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:
VInstantTest.hype.zip (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