Javascript Animated Frame Slideshow

An experimental slideshow that shows an animated SVG frame when transitioning between slides.

Author Mary Lou
Github here

I tried the first demo here, and more demos please check github

Step1:
link anime.js and imagesloaded. (when you need loading styles)

Step2:

html

Inside the sildeshow, there are slides and slidenav

html

Inside the slides, there are four slide div with detail info.

html

Step3:
css
complete css ,please check codepen.
The most important css is shape class name styles.

css

Step4:
js

js

slides and shape have different durations,and frameFill is color white.

css

initialize the DOM variables.

css

The function creats frame with svg and set attributes.

update frame when resize.

with anime.js, the slides eases smoothly.
More anime.js document here