search

airbnb / lottie-web

Render After Effects animations natively on Web, Android and iOS, and React Native. http://airbnb.io/lottie/
MIT License
30.46k stars 2.87k forks source link

Pulling my animation into a website #1094

Closed tommytime123 closed 4 years ago

tommytime123 commented 6 years ago

Hi..

I've used Body Movin to export my animation and now I'm trying to pull this into my Wordpress website, DIVI theme to be specific.

They have a code module where you can cut & paste .js but when I do this the animation is over-powering the whole WP theme and filling the screen.. Are there some specific settings I can possibly over-ride to keep this from happening?

Example link here:
http://am1.creelit.com/test/

.js code by itself: https://www.dropbox.com/s/9nj11frb2j5yiie/animation.js?dl=0

Thank you!

T

Wordpress / DIVI Theme Mac OS AE CC 2018

bodymovin commented 6 years ago

Hi, can you try adding an element with class "bodymovin" or "lottie" to your page?

tommytime123 commented 6 years ago

That did something! -- but now its too small..!! :) Is there something in the .js that might be constraining full-width?

You can see the animation on the webpage here: http://am1.creelit.com/ Scroll down to the 3rd section where it says "Launch an entire marketing campaign in less than 24 hours!".

Your help is really appreciated!

T

bodymovin commented 6 years ago

It seems that the containing div is setting it's dimensions. You'll have to play around with the container size to adjust to your needs.

tommytime123 commented 6 years ago

Great.. one last question for ya --- Is there code in the .js that might be preventing the animation from looping? It was looping fine on the demo.html preview...

Thanks so much!

bodymovin commented 6 years ago

add an attribute data-anim-loop="true" in your html element

tommytime123 commented 6 years ago

Thanks for the prompt help! Love your plugin!