Animated Image Collapsing Slideshow Transition using SVG

Worried about licensing?

Do you have right license for your templates and fonts?

Head over to our partner Envato Elements and unlock unlimited downloads of over 50 million digital assets with full commercial licensing.

  • 50+ Million Assets with Unlimited Downloads
  • Templates, Addons, Fonts, Footage, Photos, Brushes, Presets & More
  • Full Commercial licensing for client work

Get ultimate peace of mind!

Get Started Now
Image: Animated Image Collapsing Slideshow Transition using SVG GIF

In this animated transition for image slider by the awesome folks at Codrops, we have six different fullscreen styles to choose from. This snippet using SVG and these two Javascript libraries anime.js and imagesLoaded.js

  1. The image collaps in to the center of the screen and slides to the right revealing the new image then expands back to full screen
  2. Similar to the one above but when the image collapses to the ceter it has a slight angle to it
  3. When the image collapses each side is pulled in one after the other
  4. the image collapses into a circle that points to a location on the map in the background
  5. similar to #2 but has a black angled bars going from left to right
  6. the image collapses to a slanted

You can find the project on Github(Our Fork). Check out the Demo and Tutorial on Codrops.

Posted by:Saijo George

Digital Marketer with a strong focus on technical SEO and design. One of the top 100 makers on Producthunt, co-organizer of the SEO Meetup in Melbourne, an instructor at General Assembly. Worked with brands like Envato, AEON. Currently the SEO Strategy Director at Supple.