Text animation on scroll

[Istiak Hossain Tushar]

Hello everyone,

I want something like this website

https://www.neom.com/en-us/sectors/education

01. Moving text top to bottom and change colors
02. when text moved then icon is loaded

 

Is anybody having something examples or something similar ?

Please let me know. It would be very helpful.

 

Thanks

[Trapti]

Hey, Welcome to the forum! 

I think this thread will be useful. 

For Example, steps can be:
1. Create a timeline 
2. Add .from tween for text element which will come from bottom. {y: -100, autoAlpha: 0}. 
3. Add .to tween after this for the image to be visible. {autoAlpha: 1}. Hide it initially. 

If you face problem then create a minimal demo , Will be be happy to help further. 

[mikel]

Hey @Istiak Hossain Tushar

 

Does this example match your ideas?

 

See the Pen ZEvOmeb by mikeK (@mikeK) on CodePen

 

EDIT: The example has been exchanged!

 

Happy tweening ...

Mikel