Jump to content
GreenSock

carljohnston.uk

Updating start and end values with ScrollTrigger

Go to solution Solved by carljohnston.uk,

Recommended Posts

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

Link to comment
Share on other sites

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? 

  • Like 1
Link to comment
Share on other sites

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?

Link to comment
Share on other sites

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? 

Link to comment
Share on other sites

  • Solution

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!

  • Like 2
Link to comment
Share on other sites

Yay! Glad you got it working. 🥳

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