Forum Discussion
Lottie files
Hi everyone!
I want to insert lottie files into my Rise 360 content, but I'm not sure if it can be done. A Lottie is a JSON-based animation file format that enables designers to ship animations on...
What?
Lottie files are animated SVG that should just require the SVG and some CSS (color) or JavaScript (animate). You can do this a few ways, but ideally I would find the icon you are replacing inside your course, then add the javascript function to animate it to the exported html with a custom json file within the exported folder.
How?
+ It's possible but with caveats
- Not all browsers support animated SVG currently
- You are restricted when animating with CSS (no transform animations)
- All your SVG animation must be point and path focused
Why?
So, why do both Storyline and Rise function this way? Glad you asked me.
The SVGs using JavaScript are in <object> tags and CSS are in <img> tags.
Articulate wraps all image uploads in <img > tags, and because of this, all SVG images are wrapped in <img > tags, forcing the CSS based SVGs to be the only ones that will work natively inside.
As for the browser limitation, most browsers limit or prohibit the use of interactivity in tags. This is changing though as Lottie SVGs become more mainstream in web development.
If this helps anyone out, come say hi sometime on LinkedIn:
https://www.linkedin.com/in/scott-maxwell-638399131/
