Streaming live at 10am (PST)

Scrolling letter animation


#1

Hi I found this cool animation transition to use between headers and I was wondering how I would incorporate this? I know you have yo use the custom code section but if someone with a little bit more knowledge could maybe break it down a little?

Thank you!


#2

Hey @wleatherman,

Definitely a great question.

I was able to get this integrated into Webflow, and wasn’t as difficult as I thought.

First, grab the script sources that you’ll need and them to your sites Custom Code (I used the scripts found at https://github.com/codrops/ScrollingLettersAnimation/tree/master/js):

Then, create the layout using the same CSS naming convention as the article (content__section, content__text,
etc.)

And finally, add as many sections as you need.

You can view the live Webflow site at the following URL: http://scrolling-letter-animation.webflow.io/

Also, the following is the Webflow share link to see how implemented it: https://preview.webflow.com/preview/scrolling-letter-animation?preview=d9a23b71f56831443b2eb044d9c14245

Hopefully this helps, and feel free to reach out if you have any questions.

Best regards,
Micah :nerd_face:


#3

Thank you @micahryanhtml !