How to control svg animation playback?

I’m trying to set an svg animation created on Vivus Instant to play when it enters the viewport. How can I achieve this?

Place the SVG file output by Vivus Instant directly into a HYPE container - that is it.

Here is a video showing that it works:

Sample HYPE file: (14.6 KB)

There is one caveat - sometimes this tool neglects to add the animation CSS code so if it doesn’t work check that there is a CCS style appended to the end of the SVG code. It should look something like this: <style>.szDSnlzo_0{stroke-dasharray:554 556;stroke-dashoffset:555;animation:szDSnlzo_draw 765ms linear 0ms forwards;}.szDSnlzo_1{stroke-dasharray:554 556;stroke-dashoffset:555;animation:szDSnlzo_draw 765ms linear 765ms forwards;}.szDSnlzo_2{stroke-dasharray:554 556;stroke-dashoffset:555;animation:szDSnlzo_draw 765ms linear 1531ms forwards;}.szDSnlzo_3{stroke-dasharray:190 192;stroke-dashoffset:191;animation:szDSnlzo_draw 263ms linear 2297ms forwards;}.szDSnlzo_4{stroke-dasharray:317 319;stroke-dashoffset:318;animation:szDSnlzo_draw 438ms linear 2561ms forwards;}@keyframes szDSnlzo_draw{100%{stroke-dashoffset:0;}}@keyframes szDSnlzo_fade{0%{stroke-opacity:1;}94.44444444444444%{stroke-opacity:1;}100%{stroke-opacity:0;}}</style>

1 Like