Refreshing start/end with jq

[Makssshow 8 Likes (Newbie)]

Hi everyone)

I so much love gsap and scrolltrigger, but I always have some issues.

 

If I create gsap.to() (doesn't matter what exactly) with jq in the start/end position, on window.resize (so on ScrollTrigger.refresh()) jq doesn't recalculating.

Also if I will use var and give another value on window.resize it doesn't work too.

gsap.to(".menu", {
    top: -2,
    scrollTrigger: {
      trigger: "html",
      start: "top top",
      end: "+=" + $(".header_wrap").height(),
      markers: false,
      scrub: true,
    },
    ease: Linear.easeNone,
  });

How can I make it responsive on window resizing? I have to create the page which will work perfect anyway. 

 

P.S.

I can't use some element like trigger, this is the most simple example for explaining. Other code and examples are more complicated and I have to use JQ there.

[Cassie 5,385 Likes (Superhero)]

Hey there @Makssshow,

You're probably looking for invalidateOnRefresh.
 

invalidateOnRefresh

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.

gsap.to(".menu", {
    top: -2,
    scrollTrigger: {
      trigger: "html",
      start: "top top",
      end: () => "+=" + $(".header_wrap").height(),
      markers: false,
      scrub: true,
      invalidateOnRefresh: true,
    },
    ease: Linear.easeNone,
  });

 

[GreenSock 18,577 Likes (Superhero)]

Cassie is correct, and I wanted to point out the fact that you MUST use function-based values (which she did) if you want things to dynamically get updated:

 

// BAD - value gets immediately evaluated and baked into the "end" property value
end: "+=" + $(".header_wrap").height(),

// GOOD - the function gets evaluated on each refresh(), thus the height can stay updated
end: () => "+=" + $(".header_wrap").height(),

That's simply because of how JavaScript works. It's not a limitation of GSAP. 

 

None of this has anything to do with jQuery. GSAP/ScrollTrigger work just fine with jQuery.