Updating start and end values with ScrollTrigger

[carljohnston.uk 5 Likes (Newbie)]

Hello all! It's been a while!

I'm absolutely loving how easy and quick ScrollTrigger is to get the basics of 😀

I'm currently building a ScrollTrigger based carousel for a client, which is working as intended (for the most part).
The difficulty comes when I have an interactive component above the carousel, like an accordion.
When the accordion is open, the start and end points of the tween are not updated, which is causing the components to overlap.

I've tried playing with `update();` and `refresh()` whenever the body height changes, but with no luck.
Either I'm not understanding how to implement it, or perhaps there is a feature I haven't found yet?

Steps to replicate in codepen:
1. Click on any item in the carousel
2. Scroll to bottom of page.

The carousel works fine, providing no accordion items are open.

Any help is appreciated, thanks!

See the Pen VwxbYaz by carljohnston-uk (@carljohnston-uk) on CodePen

[GreenSock 17,899 Likes (Superhero)]

I don't have a lot of time right now to look into this, but it may help if I explain how something works...

 

A ScrollTrigger "refresh" calculates the start/end scroll positions for each ScrollTrigger - this happens when the page initially loads as well as when the viewport gets resized. This allows it to be extremely efficient (compared to constantly calling getClientBoundingRect() on every trigger each scroll event). So in your case, your page loads, things are calculated correctly, and it's all fine...until you toggle open one of your items which PUSHES all the stuff below it down further on the page which of course then changes the start/end scroll values for all those ScrollTriggers. 

 

If you want to force those to recalculate, just call ScrollTrigger.refresh(). You could, for example, do that in the onComplete for your item opening animation (and closing). 

 

Does that help? 

[carljohnston.uk 5 Likes (Newbie)]

Thanks Jack!

That definitely seems to work in the codepen, however when importing them as separate components with Webpack, I'm not having much luck.

Any ideas why that might be?

[GreenSock 17,899 Likes (Superhero)]

It's pretty tough to troubleshoot blind and I'm not sure what "I'm not having much luck" means exactly. Like...your onComplete isn't firing? ScrollTrigger.refresh() doesn't do anything at all? You get errors?

 

Got a minimal demo that illustrates the issue? 

[carljohnston.uk 5 Likes (Newbie)]

After reading your comment I tried to recreate the issue in a codesandbox, which got the components working perfectly and I couldn't recreate the issue that was occurring on my local environment. I did a little research on the forums here and it seems I was importing from the location.

I was using:
import { ScrollTrigger } from "gsap/dist/ScrollTrigger";

Once I changed it to:

import ScrollTrigger from "gsap/ScrollTrigger";

It all seemed to work perfectly.
Thank you for being a sounding board to find the answer!

[GreenSock 17,899 Likes (Superhero)]

Yay! Glad you got it working. 🥳