Streaming live at 10am (PST)

Text Scaling Animation


#1

Looking to see if anyone has some ideas or tips on how to implement this interaction. I’m basically trying to create an animation where the top line and the bottom line ‘swap sizes’. I’m unsure if my method is even the best way to go about it. I have a rough version but I’m encountering a few issues:

1 - I’m having issues turning the top line from 2 lines of text to 1 when it scales down…the ‘size’ property in the Interactions doesn’t effect this.
2 - I’m seeing the text be fuzzy/pixelated even after the animation is done on some browsers, any ideas on how to get around this?
3 - I’ve selected the ‘Loop’ option but it doesn’t start over and play the animation again.

https://vfitest.webflow.io/

Any help will be much appreciated. Thank you.


Here is my public share link: LINK