Animated Image Collapsing Slideshow Transition using SVG

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.