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.

By in Playground on
Demo Code

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:
AnimatedFrameSlideshow_01

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:
AnimatedFrameSlideshow_03

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:
AnimatedFrameSlideshow_05

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

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:
AnimatedFrameSlideshow_04

Tiny break: 📬 Want to stay up to date with frontend and trends in web design? Subscribe and get our Collective newsletter twice a tweek.

We hope you enjoy this demo and find it useful!

References and Credits

Manoela Ilic

Manoela is the main tinkerer at Codrops. With a background in coding and passion for all things design, she creates web experiments and keeps frontend professionals informed about the latest trends.

Drawing 2D Metaballs with WebGL2

How to Animate SVG Shapes on Scroll

Trigonometry in CSS and JavaScript: Introduction to Trigonometry

Stay in the loop: Get your dose of frontend twice a week

Fresh news, inspo, code demos, and UI animations—zero fluff, all quality. Make your Mondays and Thursdays creative!

Feedback 37

Comments are closed.

  3. Manoela: This is so cool. I made demo5 work. I have one question though. The images you use have very small footprint, but they do not lose crispiness. How do you do that? – P

  5. All of the SVG frames are pretty cool. I have bookmarked this page for next to read. Could you please make it something that can retrieve images from videos?

  6. The project is really awesome and quite useful nowadays. Another Great learning 🙂

  7. Hi Mary Lou, this is an awesome use of SVG, Thanks for sharing.
    In demo 5 you use the d=”” attribute with no commands apart from M and Z.. Im a bit confused as I didn’t know you could do that and I can’t find any references online as a quick search and all examples come with commands in the d=”” attribute.. Could you please give a clue of where to look to learn how to use it in that way, please

  8. Hello and thx you for this amazing job.
    One question : is that possible on third demo to make a different path color of the svg(class=shape) for each side ?

  9. Hi Mary Lou, this is an awesome, thanks for sharing.
    I am beginner, sorry for stupid question, but…

    Where and what to change in code if I want the slideshow to go automatically?
    Thank you very much.
    Joseph

  11. Hi Mary Lou, thanks for sharing.
    One question I am beginner. Where in code and in which can I change something so that the slideshow drops automatically all over? Well thank you. WITHOUT LOVE Joseph

  12. It’s Awesome. I generally don’t comment on any tutorial or work like that, but this time, I can’t stop myself commenting. Great Work !!!

    • The div class=”slide__img” style=”background-image: url(img/25.jpg)” doesn’t show!

    • Puxa a imagem com a tag de tema do wordpress . Dê uma olhada no console para saber quais os erros, provável que algo não está carregando de acordo.

  20. Can anybody explain what the demo.js file does and why the page won’t load/work when it’s removed? It seems related to the navigation menu, so I don’t understand why it’s required for this to work??

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

      setInterval(function(){
      my_slide.navigate(‘next’);
      },5000);

      Change slide every 5 sec.

      Bye.

    • 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 😉

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

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