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.
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.
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!
Hey Alyssa! Thanks for the update. I am taking your message as a "we don't support Lottie/json files yet". Is that correct. If so, is there a timeline? Appreciate the quick response today! Thanks!
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.
No. And this is my biggest issue. Right now, I'm still getting an off-white background on the lottie image, and it's driving me nuts! Would be nice if there was an update to support the JSON file extension in Rise and Storyline.
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...
Yes, I suppose this is an option..not ideal, but an option nonetheless ;-)
I'm hoping this is on their list of future updates. It would make course creation far more crisp for those of us who use Lottie images (not to mention would reduce the overall file size instead of having to use GIFs.
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.
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.
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.
26 Replies
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.
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.
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!
Hey Alyssa! Thanks for the update. I am taking your message as a "we don't support Lottie/json files yet". Is that correct. If so, is there a timeline? Appreciate the quick response today! Thanks!
Hi Tyler! So sorry, we don't have a timeline at the moment, but for sure we'll update this thread once we have more information to share!
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.
I second what @Dillon Wood said. I've been able to download them as a GIF and insert them into rise as an image
I second what @Dillon Wood said. I've been able to download them as a GIF and insert them into rise as an image
Has anyone been able to improve the quality (sharpness) of Lottie-as-gif files?
Lets make this happen. This would be a big win.
What?
![]()
<img > tags, forcing the CSS based SVGs to be the only ones that will work natively inside.
![]()
tags. This is changing though as Lottie SVGs become more mainstream in web development.
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
As for the browser limitation, most browsers limit or prohibit the use of interactivity in
If this helps anyone out, come say hi sometime on LinkedIn:
https://www.linkedin.com/in/scott-maxwell-638399131/
No. And this is my biggest issue. Right now, I'm still getting an off-white background on the lottie image, and it's driving me nuts! Would be nice if there was an update to support the JSON file extension in Rise and Storyline.
Yes, but you take a hit on the quality. See attachment.
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...
Yes, I suppose this is an option..not ideal, but an option nonetheless ;-)
I'm hoping this is on their list of future updates. It would make course creation far more crisp for those of us who use Lottie images (not to mention would reduce the overall file size instead of having to use GIFs.
I would also like to see Lottie integration in Storyline. Thanks.
https://storage.googleapis.com/rscreativework/Lottie%20animations%20-%20Storyline%20output/story.html
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.
You cannot import a local json file. This is a browser security restriction unfortunately.
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!
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.
Could you create the Lottie in a 2x or 4x scale and then size it down in Rise to improve apparent resolution?