airbnb / lottie-web

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

Dynamic text animation with animography #1497

Closed johnconnorskynet closed 5 years ago

johnconnorskynet commented 5 years ago

Hi,

Would it be possible to export animography typefaces composition https://animography.net/collections/typefaces then change text and tweak animation parameters the way it is done with their after effect scripts https://animography.net/collections/extras with bodymovin and lottie?

Thanks.

charlesbail commented 5 years ago

I don't think you will be able to access any of the expressions on this plugin. You could create your animation, then bake it with https://aescripts.com/easy-bake/ for example, then export it with bodymovin. But I don't think there is any compatibility with bodymovin and animography so you won't be able to edit it through code (or even display it)

johnconnorskynet commented 5 years ago

Hi Charles,

Thanks for your answer, i tried to export animography mobilo typeface example composition and it worked, you can check it out lottie file preview . Maybe controlling the animation paramaters is not possible but at least would it be possible to change the text like in this example https://codepen.io/airnan/pen/ZLVJmq?editors=0010 and create multilines. Ultimately what i am trying to achieve is to allow mobile and web users to create a custom animated text object like in the legend app renamed text animated you can find here https://play.google.com/store/apps/details?id=appiz.textonvideo.animated.animatedtext

charlesbail commented 5 years ago

It's only possible to edit the text if it's a text in After Effects in the first place. But the plugin you use and the baking of the expression makes each part of a letter as a shape. See in the screenshot as it's considered as a shape.

image

In the past I did a multilang animation. But my text was a text layer with no plugin or baking. Then I could just access the content as a normal text. But it seems that text layer is not supported on iOS, and while it is on android, not all text properties are supported.

johnconnorskynet commented 5 years ago

Hi @charlesbail ,

Thanks for the answer. Yep this is what i discovered as well. A solution would be to embed all characters in the json file and compose words from character shapes. The problem would be that the json file would be too big as the aep file with all the characters is already 170 Mo. So the good news is it could be possible to create a composition with text placeholder and change it programmatically afterwards. I guess the text must have a maximum length constraint and i am wondering how multiline text could be done like this :

To give you an vizualization of what i am trying to achieve with lottie here are some examples

adelin-b commented 5 years ago

Any progress on this ? @johnconnorskynet