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

Scale property animation doesn't work well #1967

Open Siddhar109 opened 4 years ago

Siddhar109 commented 4 years ago

Tell us about your environment

What did you do? Please explain the steps you took before you encountered the problem. I wanted to create a text reveal animation. The text has a background color as shape layer which fits text size and position using expressions. After which i parented shape layer to the text layer. Then added scale animate property to text layer, set scale to 0,0 and set range selector Start keyframes to get reveal animation.

Expected behavior should be text being reveled and shape layer should follow the text. But while i preview the lottie file, the shape layers doesn't seem to revel with the text, but has some strange behavior.

Please provide a download link to the After Effects file that demonstrates the problem.

Untitled Project.zip

bodymovin commented 4 years ago

Hi, unfortunately sourceRectAtTime is complex to replicate and it relies on the svg getBBox method which doesn't take into account matrix transformations to letters.

Siddhar109 commented 4 years ago

Thanks for the reply, is there any other way to add background color to text and animate it ?

Siddhar109 commented 4 years ago

i tried a different method using gaussian blur, fill, alpha curves and cc composite effects on the text layer. But it doesn't seems to work.

Here is the file - textbg.zip