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

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 focusedWhy?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.

Lottie files | Articulate

InternalTrai264
Community Member
5 years ago
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.
DillonWood
Community Member
5 years ago
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.
- BrianKurkjian-1
  Community Member
  3 years ago
  Yes, but you take a hit on the quality. See attachment.
TylerJames-ad6c
Community Member
4 years ago
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
AlyssaGomez
Staff
4 years ago
Hi Tyler! No updates yet, but you're in the right place. We'll let you know if anything changes!
- TylerJames-ad6c
  Community Member
  4 years ago
  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!
  - hazelB
    Staff
    4 years ago
    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!
RoisinArmstr726
Community Member
4 years ago
I'd also love to see the addition of Lottie as a supported file type in Rise. :)
HannesGelden493
Community Member
4 years ago
Very interested on our side too - that would be a wonderful addition!
MonicaMcAlis484
Community Member
4 years ago
I'd also like to add Lottie animations to Rise and Storylline.
SydneyHamilt266
Community Member
4 years ago
I second what @Dillon Wood said. I've been able to download them as a GIF and insert them into rise as an image
SydneyHamilt266
Community Member
4 years ago
I second what @Dillon Wood said. I've been able to download them as a GIF and insert them into rise as an image
HiannaSabo-f0c9
Community Member
4 years ago
Has anyone been able to improve the quality (sharpness) of Lottie-as-gif files?
- BrianKurkjian-1
  Community Member
  3 years ago
  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.
- PatrickFinne459
  Community Member
  2 years ago
  Could you create the Lottie in a 2x or 4x scale and then size it down in Rise to improve apparent resolution?
  - TeresaRoberts
    Community Member
    2 years ago
    
    Patrick Finnegan
    
    Could you create the Lottie in a 2x or 4x scale and then size it down in Rise to improve apparent resolution?
    
    This works for GIF files, I've done this. Lottie doesn't need to be rescaled, as it's vector based which is why they are superior to GIF files.