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

Typography animation with Bodymovin for Webflow #1793

Open rafdesign opened 5 years ago

rafdesign commented 5 years ago

Excited to finally be able to use Bodymovin with After Effects and Webflow! I am trying to do an animation with a simple text like typewriter effect. When rendering and converting the type as shapes, it works fine. But I would like to keep the text as text, thinking it would be better for SEO. In the setting I unclicked the "Glyphs" option (to render type as shapes). The export works fine to Webflow. But once in Webflow, I can only change the font, but I can't set the color, size, etc.

Was I supposed to do something in the 2nd menu in Bodymovin when asked to enter a CSS Class? I am not a coder unfortunately.

https://imgur.com/4pkiu1B **Tell us about your environment** * **Browser and Browser Version:** Version 76.0.3809.132 (Official Build) (64-bit) * **After Effects Version:** CC2018
bodymovin commented 5 years ago

Hi, you can't set the text size unfortunately because of the way svg and lottie work. But you can set the color by naming your AE layer starting with a "." and then referencing the layer with css using the fill attribute. https://github.com/airbnb/lottie-web/wiki/SVG-and-HTML-ids-and-classes-to-reference-via-css-or-select-via-Javascript

rafdesign commented 5 years ago

@bodymovin thanks for replying. I am useless with code, reason why I use Webflow. I looked at the link you sent, but I don't understand: do you mean this window setting in After Effects? I have no idea how to write CSS https://imgur.com/4pkiu1B