Update y value with ScrollTrigger after content changes

[Fabian W 0 Likes (Newbie)]

Hi guys,

We have two divs with a different height which lay next to each other.

If the user scrolls gsap scrolltrigger scrolls the divs in a way that on the bottom of the page (scroll end) they are aligned at their bottom line.

This works easy if we calculate the leftover space to scroll with body height - div height.

 

If one of the divs holds an expandable element the height of the div changes dynamically.

 

Is it possible to refresh not only the start and end scrolltrigger values, but also the y value of the to tween?

 

All the best,

F

See the Pen wvXYEGE by anothercodepen (@anothercodepen) on CodePen

[Rodrigo 5,077 Likes (Superhero)]

Hi @Fabian W and welcome to the GreenSock forums!

 

First thanks for being a Club GreenSock member and supporting GSAP! 🥳

 

What you are looking for is the invalidateOnRefresh configuration option in the ScrollTrigger configuration object:

 

Boolean - If true, the animation associated with the ScrollTrigger will have its invalidate() method called whenever a refresh() occurs (typically on resize). This flushes out any internally-recorded starting values.

https://greensock.com/docs/v3/GSAP/Tween/invalidate()

 

This seems to work the way you intend:

let t1 = gsap.to(c1, {
  scrollTrigger: {
    scrub: true,
    start: () => 0,
    end: () => 'max',
    markers: true,
    invalidateOnRefresh: true,// <- HERE
  },
  y: () => document.body.clientHeight - c1.clientHeight,
  ease: 'none',
  overwrite: 'auto'
});
let t2 = gsap.to(c2, {
  scrollTrigger: {
    scrub: true,
    start: () => 0,
    end: () => 'max',
    markers: true,
    invalidateOnRefresh: true,// <- HERE
  },
  y: () => document.body.clientHeight - c2.clientHeight,
  ease: 'none',
  overwrite: 'auto'
});

Hopefully this helps. If you have more questions let us know.

 

Happy Tweening!

[Fabian W 0 Likes (Newbie)]

Hi Rodrigo,

 

That seems to work, thanks.

Unfortunately I ran into another issue:

Is it possible to tween between the old y value and the new y value?

Because invalidate() lets the elements jump to their new position.

(Or should I open another topic for this?)

 

See the Pen VwdVJOa by anothercodepen (@anothercodepen) on CodePen

 

Cheers,
F

[Rodrigo 5,077 Likes (Superhero)]

Hi,

 

I think it would be possible but it might require a bit of work, because you'll have to update the height of the element as it changes (in this case one swift change) with the current position and the progress of the ScrollTrigger instance that it represents. When you increase the height of the element the distance between the bottom of the element and the end point of the ScrollTrigger instance is less than before so that progress has changed.

 

I'll try to come up with something when I have the time, but in the mean time you can take a look at this example and see if you can abstract the logic from it to your particular scenario:

See the Pen yLEQYNv by GreenSock (@GreenSock) on CodePen

 

This is the thread that example stems from:

 

Happy Tweening!