search

airbnb / lottie-web

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

Targeting animation text with jQuery #1312

Open mckeever02 opened 6 years ago

mckeever02 commented 6 years ago

Hi,

Do you know if its possible to dynamically update text within the animation using jquery? For instance, I'm creating an animation with a countdown (in days) to Christmas and an active temperature of the North Pole. I need to alter these static values. Is this possible or do I need to keep these elements separate from the animation?

thanks

bodymovin commented 6 years ago

you can update them but not using jquery. It's better if you use the built in methods. https://github.com/airbnb/lottie-web/wiki/TextLayer.updateDocumentData

mckeever02 commented 6 years ago

Thanks! I saw that, but I've absolutely no idea how I could use that to do what I'm looking for.

derbalint commented 6 years ago

+1 I also don‘t know how to use the Textlayer.update... Are all the elements listed in the .json array? So in your example element[0] is the first element? Or how do I find out wich element my textlayer is?

Thanks a lot for your work! Just a little new to the programming side of things.

bodymovin commented 6 years ago

Hi, yes, indeed you need to traverse the layer tree to find which text layer you need to update.

You can also take a look at the lottie-api library to traverse the layers easily: https://github.com/bodymovin/lottie-api https://airbnb.io/lottie/ios/dynamic.html

derbalint commented 6 years ago

Hello Hernan, thanks for your fast reply! I already took a look at the lottie-api but really don't understand how to apply it. I downlaoded the whole folder opened it up in Visual Studio Code and ran the index.html seeing a box following my mouse cursor. So far so good. But how does it work? I use .json animations from after effects on a wordpress theme on a localhost (currently in testing). I have it all up and running with the player and my custom.js for customizing the animation. How do I then apply lottie-api? Do I have to add some of it .js to my worpdress and call it in my custom.js? And then apply it? How do I do that? And about updating a parameter or element: I use codebeautify to have a look at my json. An example:

bildschirmfoto 2018-10-24 um 14 56 40

How do I update o or opacity? what are: a,k and ix? And how to specifically update the opacity of this certain layer (I know I only have one, but in general?) How do I use the lottie api to fetch o for example to add a new value to opacity. Big thanks if you can help me with this!