Lottie files

Lottie animations from lottiefiles.com can be added to Rise using the 'embed' option in Rise and the iFrame code on lottiefiles. Although I understand this only gives you the one option for displaying, i.e. centred in a block, but it's a start...

Not sure if you figured out a way to use Lottie files, but you can download them as a GIF and then insert them into your courses.

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/

Howdy all! Just checking in again to see if there have been any feature updates planned on the current Storyline 360 roadmap for JSON files being able to be imported, specifically for Lottie images/files. I'm currently trying to spice up a course with them, but I'm still having to convert them to GIFs, and when trying to make them transparent, they lose quality or just break.

Try using the Iframe? - that can be used for more then video. You would have to have a external site with your json things on set of blank pages..and you would need to add correct height on size for the iframe placeholder.

The iframe code insert in rise vanishes from time to time and you might need to scroll to input changes so it is good to use notepad for any code inserts backups.

Hi everyone!

My team and I just came to learn about lottie files. I see this previous post was a year ago. Does any know of any updates on this? Can you easily use lottie files in both Rise and Storyline? Would love to hear thoughts on this!

Thanks!

-Ty

Hi Tyler! No updates yet, but you're in the right place. We'll let you know if anything changes!

I'd also love to see the addition of Lottie as a supported file type in Rise. :)

Very interested on our side too - that would be a wonderful addition!

I'd also like to add Lottie animations to Rise and Storylline.