Jump to content
Search Community

[QUESTION] GSAP ScrollTrigger

Carlo Autor test
Moderator Tag

Recommended Posts

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

Link to comment
Share on other sites

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!

Link to comment
Share on other sites

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

 

Link to comment
Share on other sites

 

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.
 

 

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...