Animated SVG Frame Slideshow

An experimental slideshow that shows an animated SVG frame when transitioning between slides. Different shapes can be used for creating a variety of styles.

From our sponsor: Ship fast and never break a thing with Shortcut (formerly

Today we’d like to share an experimental slideshow with you. The idea is to animate an SVG frame while we transition from one slide to another. Using different shapes we can create a variety of frame styles when morphing the SVG path. The inspiration for this idea is based on the Dribbble shot MEDIOCRE: 06 by Shota. We are using anime.js for the animations.

This demo is kindly sponsored by Sencha: Create data-intensive, feature-rich web and mobile apps with Sencha Ext JS.

If you would like to become a demo sponsor, you can find out more here.

Attention: For the demo we use some modern CSS properties like CSS Flexbox and CSS variables, so please view them in a up-to-date browser.

Have a look at some screenshots:

Here we are animating a simple box-like shape:

In this demo we used a pattern for the fill of the shape which is a slightly skewed rectangle. The pattern is from Hero Patterns:

Here we animate a circular shape to make it look like we are “focussing” on a specific place in the map. The map is added to the same SVG:

In this demo, we make a step-wise animation, making each corner move with a delay:

This example shows that we can use any kind of shape, even a very small one. Note how we placed the titles on top of the SVG in this demo:

We hope you enjoy this demo and find it useful!

References and Credits

Tagged with:

Mary Lou

ML is a freelance web designer and developer with a passion for interaction design. She studied Cognitive Science and Computational Logic and has a weakness for the smell of freshly ground peppercorns.

Stay up to date with the latest web design and development news and relevant updates from Codrops.

Feedback 37

Comments are closed.
    • var my_slide = new Slideshow(document.querySelector(‘.slideshow’));
      imagesLoaded(‘.slide__img’, { background: true }, () => document.body.classList.remove(‘loading’));


      Change slide every 5 sec.


    • Gracias por el código emmanuele, pero aun no logro hacerlo funcionar debe ir dentro de las etiquetas script o dentro del código demo ?

    • Insert these two scripts at the bottom of HTML page. 1000 is for 1 second, you can change it as per your requirement.

      $(document).ready(function() { setInterval(function(){ $(‘.slidenav__item–next’).trigger(‘click’); }, 1000); });

      thank me later 😉

  1. You never cease to amaze me with your creativity. Please keep up the good work and set new bars 🙂

  2. demo 4 its really a great idea…but demo4.js must be re-written…for geoprahic position coordinate…now are random! Argh!!!