Skip to main content
Question

Text animation controlled by scrolling


Does anyone know how to animate text as you scroll to shift from grey to black as shown on this site: www.academyux.com. The section I’m referring to is on the homepage when you scroll down to “No one knows the right person”

I couldn’t find anything besides the typewrite animation which is automatic and I need to be able to control the animation by scrolling. I’ve tried various plugins but they all auto animate.

This topic has been closed for comments

2 replies

Vishal_Ramawat

Since we don’t have OnScroll interaction, it is quite difficult to get the effect you seek.
There was a bit I could try, but am not sure how helpful would it be.
I used a black rectangle with “Color Burn” as Layer property and Fixed Position in Scroll Behavior. The text was set to 50% opacity and was set to Vertical scrolling.
As the text passes the rectangle, it changes text to Black but per line instead of per character.


Thanks Vishal. The problem is it needs to go horizontally. I thought about using the typewriter animation, but that too is automatic and not scroll activated. I think I’ll have to use protopie for this as you can place scroll triggers.


Cookie policy

We use cookies to enhance and personalize your experience. If you accept you agree to our full cookie policy. Learn more about our cookies.

 
Cookie settings