airbnb / lottie-web

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

Parse animation property value from timeline. #1480

Closed billyromano closed 5 years ago

billyromano commented 5 years ago

I thought of a neat work around to animating blurs with GSAP and Lottie and I'd like to know if it's possible to parse the opacity property from a layer in AE to be handled with JS? Here's what I'm doing for a work around. I'm creating simple color/shape layers that only have opacity at certain percentages at certain times in the timeline. The opacity would represent a blur filter amount which will be applied by reading this percentage of opacity and then applying the value with GSAP for blur on the object. Does this make sense? How can I parse the current opacity from the current frame in the timeline? I'm assuming that I'll right a function to run on every frame to parse the opacity value and set the blur amount. I'm having a very hard time understanding the JSON structure and the javascript docs don't exist to explain the JSON structure and how the animation plays to read the JSON and apply properties.

billyromano commented 5 years ago

Update I was able to parse the opacity of an SVG object instead of wasting time figuring out the JSON structure. I was also able to apply an SVG Blur Filter to the objects to animate with blurs. Performance is near flawless for this project.

Still would be interested to know how to understand the JSON for animation properties and parsing values.

Thanks for building Lottie by the way, great work. It would be awesome if you could make it work with Adobe Animate as well.