This is a read-only archive of the Framer Community on Facebook.

What is Framer? Join the Community
Return to index
陳威威
Posted Feb 23 - Read on Facebook

https://framer.cloud/gxiUU/

Hey guys, I just successfully render the JSON animation which is generated by Lottie (http://airbnb.design/lottie/) in my prototype. Since it took me some effort to implement it on Framer, here are some tips to help anyone who wants to play around with this new tool.

1. Generate the .json file from AE with the pulging bodymovin (https://github.com/bodymovin/bodymovin)

2. Drag the .json file to your Framer project folder and place it in the root directory

3. Copy the bodymovin.js file (you can find it from Github of bodymovin or just copy it from my Framer project) to the framer folder inside your project

4. Open index.html file and add some code (<script src="framer/bodymovin.js"></script>) to link up bodymovin.js

5. Load an animation with bodymovin.loadAnimation() and enjoy!!

8 Comments

JinJu Jang

Awesome :D

Bart Simons

Awesome. I was playing around with the React Native Lottie plugin and that cost me so much time to get it up and running due to a lot of errors. Hope this works smoother, definitely trying it out today.

Chris Chen

Awesome!

Chris Camargo

Am I missing something, or is this just bodymovin? How is Lottie integrated into this?

Jihoon Suh

June Punkasem lottie ftw

Way Chang

Awesome 👍

Emanuele Salamone

Since you are working with Lottie, I wanted to ask something to you.
Do you have any experience of animations using masks?
I made one and exported the JSON, it loads fine with Bodymovin but renders wrong on Lottie for Android.

Tan Tsi

Bravo! But masks and many awesome AE-efforts can't be export by using Lottie, so whats the advantage of it?

Read the entire post on Facebook