Lottie files

Aug 06, 2020

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 any platform. They look like gifs (and you can download them as such), but you can also download the json file that weights almost nothing and loads instantly on a web. Currently Rise doesn't seem to support such files, and I was wondering if any of you found some sort of workaround or solution to this.

Thanks, Anita

26 Replies
2Training Loan

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.

Scott Maxwell


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.


+ 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


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:

Tia Pez

I've managed to make lottie files that I created in aftereffects to work with storyline by importing them as web objects. I've had to create a index.html file with my json file to work. The issue I'm facing is to make them available offline. Our LMS offers offline download which many of my learners use with their company issued iPads. I've been racking my brain to get it to play. I've even downloaded the lottie player code put in its own .js file and redirected the index file to the local file. It still works online but not offline even though I've got everything local. 

Tia Pez

So I’ve used custom Lottie files I created in aftereffects in storyline, using the steps shared here https://designdebt.club/using-lottie-animations-in-storyline-360/

Downfall, is you can only see it when you publish to review 360 or a finished scorm in LMS. It just shows as that grey box that says WebObject otherwise. This can be a challenge for timing them, but instead of previewing, I just keep publishing to review after each tweak. 

Also note that it can’t be viewed if your users have the option to “download” and play offline. At least I haven’t been able to get it to work. I think the Lottie player is hosted only I’ve tied to add code to the HTML file in the WebObject I creat but I know just a little to get me in trouble. I am no advanced code writer. 

So my next try would be to create my into with Lottie’s that I want to do for my rise in a storyline block. Im pretty sure this will work as I’ve used storyline blocks in rise to show my course survey slide at the end, and it uses a WebObject for the survey form. 

just thought I would share this idea!

Brian Kurkjian

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.