Show text while scrolling and minimize it

[giggi]

Hi,

I'm just started learning gsap animations and i'm trying to make a text animation but i don't know how.

By scrolling, I want to show the new text and minimize the old text. The final result should look like this:

Can you give me any advice? Thank you so much.

See the Pen QwWNpmz by luigiggi (@luigiggi) on CodePen.

[mvaneijgen]

Hi @giggi welcome to the forum!

 

 

The best thing to do when working with ScrollTrigger is to remove it! This seems counter intuitive, but ScrollTrigger is just animating something on scroll, so just focus on the animation at first and only when you're happy with the animation add ScrollTrigger back in. This way you can focus on one part at a time and it will save a lot of headache when debugging.  
  
Also when working with timeline ScrollTrigger can only be in the timeline not on the tween!

 

I've restructured your code a bit and I’ve placed some comments in your JS to better explain things, please be sure to read through them! 

 

 

If you're new to GSAP check out this awesome getting started guide https://gsap.com/resources/get-started/

 

Again, the most important thing in GSAP is the animation don't worry about scrolling, just build the animation you'll want to happen and when that is done ScrollTrigger will do the rest. 

 

Hope it helps and happy tweening! 

 

 

See the Pen bNGpYKW by mvaneijgen (@mvaneijgen) on CodePen.

 

[giggi]

Thank you very much for your help @mvaneijgen. The animation is correct but I still haven't figured out how to implement the scrolltrigger after the animation. How can I tell gsap to start the animation only when I reach that part?

[Rodrigo]

Depends on what particular part you need the animation to start, read about the start value in the ScrollTrigger config object:

https://gsap.com/docs/v3/Plugins/ScrollTrigger/?page=1#start

 

Also it would be a good idea to read and play around with ScrollTrigger in order to understand how the start/end points and trigger works, that will allow you to tell ScrollTrigger where to start and end animations correctly.

 

Happy Tweening!