Scrolling letter animation

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!

1 Like

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: Webflow - Scrolling Letter Animation

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

Best regards,
Micah :nerd_face:

2 Likes

Thank you @micahryanhtml !

1 Like