Animating text-decoration

How To
1

Hello Fellow Bricksforgers!

I am having trouble with animating text decorations like Strikethrough and Underline. I want to animate the line to go from left to right on page load and scroll. Can you provide any recommendations or advice?

I know I need to put some variables somewhere, maybe into an animation object? I haven’t had success with that tho. :frowning:

Loving the addon so far and I can’t wait to learn more! :rocket:

Thanks!

2

Hey! :slight_smile: As I know, text decorations like underline cannot be animated the way you want it to be. To create such animations, the common way is to add your line using css ::before or ::after and pass a css variable for the value. Then, with the Bricksforge panel, just animate the css variable including it to the animation object :slight_smile:

3

Thanks!

I think I have problem with the last part about animating the CSS variable. How can I achieve that?

Cheers!

4

You can animate it as any other property.

{"--myColor": "orange"}

This might help: QuickTip: Animate CSS Variables - Learning Center - GreenSock

5

Thanks, working! :heart_on_fire:

1 Like