Jump to content
Search Community

Can't find out how to implement ScrollTrigger for a moving elements properly

AsKadir test
Moderator Tag

Go to solution Solved by GreenSock,

Recommended Posts

Hello,

I have a block, when user scrolls it becomes pinned and elements inside of it start to move to top with scrub,

it's kind of smooth scroll only for this block. So it's working good, but now I have an issue, because I can't understand how can I implement ScrollTrigger animation for elements that inside of this pinned block.

I understand why it's not working right now because I move this elements with tween and the trigger position changed.

Can you give me advice, please? Thanks in advance!

See the Pen PomqKPe by ChicagoJostik (@ChicagoJostik) on CodePen

Link to comment
Share on other sites

@Cassie Hello Cassie,

Here is another codepen:

See the Pen oNWjaYq by ChicagoJostik (@ChicagoJostik) on CodePen

What I want to have the block ".wrapper" be pinned and move the content ".items" inside of it to top to have smooth scroll, and at the same time to have rotation animation for the boxes.

Did you get the point what I want? Sorry for my bad explanation. Thanks a lot!

Link to comment
Share on other sites

That seems to be what's happening in the previous pen? Although I'm not sure what you mean by smooth scroll in this context?

You could simplify it down a bit - but it does seem to be doing what you're intending already. Sorry if I'm missing something.

See the Pen dca5f54e6400034d53461c9f355b8bd4?editors=1010 by cassie-codes (@cassie-codes) on CodePen

  • Like 1
Link to comment
Share on other sites

16 minutes ago, Cassie said:

Although I'm not sure what you mean by smooth scroll in this context?

I mean scrub: 0.7, so animation of the moving seems like smooth scroll.

 

In the last your codepen you are doing stagger animation, which is not what I want.

Let me try to explain in another way, so we have block with elements:

See the Pen ExmVOGz by ChicagoJostik (@ChicagoJostik) on CodePen

 

Here is another codepen with pinning and elements moving to top, so when user scroll it seems like elements start moving smooth, but actually the block is pinned and elements inside of it moving up:

See the Pen dyWYQwo by ChicagoJostik (@ChicagoJostik) on CodePen

 

Do you see the difference?

 

So right now I want to add animation for each red box on scroll, I'm using ScrollTrigger:

But because elements are moving up, their entry point are different from what ScrollTrigger thinks and that's why if you look to the last red box you will see that rotation starts too late.

Link to comment
Share on other sites

  • Solution

If I understand you correctly, that's waaaaaay more complicated. 

 

One of the big priorities we had with ScrollTrigger was to make it FAST. That's why it pre-calculates the exact scroll positions where things should get triggered. That way, when the user scrolls, it is simply comparing the new scroll value to the start/end to see if it's between them. Very simple and fast. But what you're talking about where you're actively animating a container (with an ease) and dynamically shifting around the intersection points would likely require constantly doing a getBoundingClientRect() on each element to see where it is and then rendering it accordingly. 

 

Or maybe you could add an onUpdate listener to your tween that's shifting that whole chunk up, and then manually set the progress() of each ScrollTrigger's animation based on its start/end but apply the offset from your chunk tween. For example, if your chunk tween moved 10.5 pixels at that point, you'd subtract 10.5 from the start and end of each related ScrollTrigger and calculate the progress accordingly and do scrollTriggerInstance.animation.progress(whatever). 

 

It's definitely not a simple task. If you need custom consulting services to explore this, feel free to contact us and we can discuss scheduling and pricing. 

 

Good luck!

  • Like 2
  • Thanks 1
Link to comment
Share on other sites

10 hours ago, GreenSock said:

It's definitely not a simple task. If you need custom consulting services to explore this, feel free to contact us and we can discuss scheduling and pricing.

@GreenSock Thanks for your answer, Jack!

I will try by myself, if not I will contact you.

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...