Scrolltrigger - Update animation value on resize

[YBP]

Hello everyone, I'm looking for the right way to use the animation feature with ScrollTrigger and scrub option.
I made a little demo.

I modify the css:top value of #nav on scroll. The starting value is variable (#intro's height), and the ending value is fixed. Everything went well until I resized the page in height.

The trigger seems to notice the height change (#intro's height), but the position returns to the first value after the resize. This only happens when I resize the page in height, and the position of #nav is at the start of the animation. So I suppose that the starting value is kept somewhere...

Sorry if it's a stupid question 😛
Any help would be welcome. THANKS !

See the Pen wvRoZZq by Ybperhaps (@Ybperhaps) on CodePen

[GreenSock]

It looks to me like this line is the problem: 

$("#nav").css({"top":$("#intro").height()});

You're forcing the initial CSS to be a very specific height there which gets locked into the tween as the "revert" value. Since you're doing a .fromTo() tween anyway, this line of code is completely unnecessary. 

See the Pen bGOgagp?editors=0010 by GreenSock (@GreenSock) on CodePen

 

There's no need for jQuery either, FYI. Nor do you have to create a whole separate tween and ScrollTrigger.

 

Is that what you're looking for? 

[YBP]

Hi @Jack and thank you very mutch for youre repply, it help me a lot to understand gsap mecanics. 
It is exactly what I was looking for / the simpliest way to do that before to come and ad any resize functions ect.

 

If I give css:top to #nav, it's because in the real application, the "75vh" #intro height is rounded on my font base line, so it's never really 75vh. But I can manage it another than give the #intro's height. 
 

For the "almost" final result, I added a small piece of code so that the css:top value of #nav returns to "(empty)" onRefresh, if #nav's css:top = #intro's height. This allows me to update the #nav animation on window's resize.
 

If there is a more direct way to achieve this, that would be my pleasure, but I'm not asking for that much, thank you very much:
 

example :

See the Pen XWopgWX by Ybperhaps (@Ybperhaps) on CodePen

 

 

Now I'm looking for a way to update the scrub in the same time I resize the windows and not after the end of resizing !

Edited September 8, 2023 by YBP
Miss last sentense, same subject I think, no need new topic for that

[Rodrigo]

Hi,

 

9 hours ago, YBP said:

Now I'm looking for a way to update the scrub in the same time I resize the windows and not after the end of resizing !

I'm not sure I follow 100% what you mean by this. ScrollTrigger has to do a few operations when the browser window resizes. After all that is completed and the instances' start and end points are updated, ScrollTrigger checks for the current scroll position and updates all the instances accordingly. Since you have scrub: true the update will be immediately. If you want for it to be smoother, you can use a number in scrub instead of the boolean.

 

Finally you can change your code to this:

scrollTrigger: {
  id: "NavTop",
  markers: true,
  trigger: "#intro",
  start: () => "bottom "+intro.offsetHeight,
  end: () => "+="+intro.offsetHeight ,
  scrub: true,
  invalidateOnRefresh: true,
  onLeaveBack: () => document.getElementById("nav").style.removeProperty("top"),
}

That onLeaveBack callback does the same our onUpdate does, but instead of running all that logic on every update, it only changes the style of the element directly once, no need for conditional checks and more expensive code.

 

Hopefully this helps.

Happy Tweening!

[YBP]

Hi, thank you very mutch for your help.
Yes, like Jack your answare help me to understading the way ScrollTrigger work.
It's really cool, thank you.

 

10 hours ago, Rodrigo said:

I'm not sure I follow 100% what you mean by this.

What I mean (sorry for my weak english), is to make #nav follow the window resizing move while resizing. Now it move after stop resizing.
When I use onUpdate for removing #nav css top, it do the trick after we return back to the first position, witch is not the case with the onLeaveBack method (I don't know why). 

For reproducing the differences :

01. Before scrolling, I resize the window vertically : #nav follows #intro's height 
02. After scrolling, come back to initial position :  #nav follows #intro's height (in my first example it doesn't)

03. After scrolling, #nav between start position and end position : #nav doesn't follows #intro's height until Istop resizing the window.

I'm trying to make the #nav follow the movement of the resizing whil we do it. 
Thanks for your help !

[GreenSock]

3 hours ago, YBP said:

What I mean (sorry for my weak english), is to make #nav follow the window resizing move while resizing. Now it move after stop resizing.

Do you mind me asking why? That seems incredibly wasteful. "resize" events fire VERY frequently, so doing all those calculations constantly while the user is resizing seems like it'd be terrible for performance and deliver very little benefit visually. 

[YBP]

Thank you very much for your explanations and examples! I'm thinking of joining the club soon