text need to show on scroll on a sticky Background

[atulraj89]

I am trying to create this banner animation just for learning, 
https://www.apple.com/iphone-se/
I only need first part of the above link, 

what I am trying to achieve is, there is a background image and some text on it, I need to show text one by one on scroll, I have tried many thing, since I am new to GSAP, I have tried to use it with Scroll magic but no luck. Can anyone guide how to achieve this result.

[Shaun Gorneau]

No need for ScrollMagic here... and with the new ScrollTrigger plugin, no need for ScrollMagic at all, period.

 

If you want to tween text characters one by one, I would recommend looking at SplitText

 

You could make use of ScrollTrigger here, but you can also just advance a Timeline's progress based on the scroll value. Example here,

 

See the Pen WNrpWKZ by sgorneau (@sgorneau) on CodePen

 

 

 

[ZachSaucier]

We highly recommend ScrollTrigger as it gives you a lot more control with greater ease than just hooking into the scroll event, but Shaun's approach is definitely a good one