Jump to content
Search Community

Refreshing start/end with jq

Makssshow test
Moderator Tag

Go to solution Solved by Cassie,

Recommended Posts

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.

Link to comment
Share on other sites

  • Solution

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,
  });

 

  • Like 2
Link to comment
Share on other sites

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.

  • Like 3
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.
×
×
  • Create New...