Animated SVG Frame Slideshow

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

We hope you enjoy this demo and find it useful!

References and Credits

Animated SVG Frame Slideshow was written by Mary Lou and published on Codrops.

Leave a Reply

Testimonials

"Kyle has helped our company’s image a lot by redesigning our logo, creating our new website and putting together some great, eye-catching ads. He’s very easy to work with and we were able to hit all of our deadlines."
Elliot Feder - Director of Business Development, SpringBoard Data Management
"Kyle has a natural talent for taking any idea I have and turning it into a visual work of art. He is a genius with layouts and overall concepts, the first person I call when I know a project needs to be done right."
Cheryl Bell, Executive Business Manager, Global Automotive Consultants