[QUESTION] GSAP ScrollTrigger

[Carlo Autor]

I am making an animation sequence. It is working, but when I add ScrollTrigger to the sequence, the highlight scrollTrigger is triggered automatically when I enter the page

I want the 2nd sequence including the highlight will ONLY appear when the 1st sequene is done

Now when I enter the 2nd sequence, the words are highlighted
What is the best approach to this?

Thank you

Here is the demo
Replit : https://replit.com/@A14313/QUESTION-GSAP-ScrollTrigger?v=1
Codepen: 

See the Pen XWxvYdB by L4zyD0g (@L4zyD0g) on CodePen.

[Rodrigo]

Hi @Carlo Autor and welcome to the GreenSock forums!

 

Basically the issue is being caused by the other animations you have in your setup. Here is a fork of your codepen removing every other animation and ScrollTrigger instance:

See the Pen YzJmvVP by GreenSock (@GreenSock) on CodePen.

 

You are animating the Y position and scale of some elements which of course will affect the vertical position of the elements that are after the ones being scaled up in the document flow.

 

One option could be to create an HTML/CSS setup that accounts for those spaces or use ScrollTrigger to pin the parent of the elements being scaled up in a way that the increase of the scale doesn't alters the document's flow, that is the vertical position of the elements that come after them.

 

Hopefully this helps.

Happy Tweening!

[Carlo Autor]

Thanks. But I want to:
1. Drop the circle as the user scroll

2. Show the 1 2 3 as the user scroll

3. Then remove the circle and 123 as the user scroll

4. Show the picture and text as the user scroll

5.  Highlight the words as the user scroll

 

[Cassie]

 

Hi there,

 

we don't have the time or resources to build out solutions based on step by step requirements lists I'm afraid.
 

Rodrigo mentioned the issue and potential solutions here

Quote

You are animating the Y position and scale of some elements which of course will affect the vertical position of the elements that are after the ones being scaled up in the document flow.

 

One option could be to create an HTML/CSS setup that accounts for those spaces or use ScrollTrigger to pin the parent of the elements being scaled up in a way that the increase of the scale doesn't alters the document's flow, that is the vertical position of the elements that come after them.

Why don't you take a look at a solution again with this in mind. If you get stuck pop back with what you've tried and an explanation of why it didn't work or what you're struggling with.

One solution could be to build out a timeline that does this all - then once that timeline is doing what you want, hook it up to scroll.