Jump to content
Search Community

How to reset Scrolltrigger animation start/end positions after a change in another element's height?

Erik_ test
Moderator Tag

Go to solution Solved by GreenSock,

Recommended Posts

How to reset ScrollTrigger animation start/end positions after a change in another element's height?

 

I have a large heading that a smaller heading animates over on scroll both above and below an image that can be resized.  When the image is resized the ScrollTriggers for the headings below the image are not recalculated.  (They are if the window is resized.)

 

I tried ScrollTrigger.refresh(true)with and without adding true, but that does not work.

 

Using setTimeout works, but is that the correct way to solve the problem?

 

setTimeout(() => {
      console.log("refreshing")
      ScrollTrigger.refresh(true)
    }, 500)

See the Pen LYexeam?editors=0111 by EOJA (@EOJA) on CodePen

Link to comment
Share on other sites

  • Solution

If I understand your question correctly, the problem is that you're calling ScrollTrigger.refresh() BEFORE you actually change the height. You need to call it AFTER everything has finished changing so that it can recalculate properly. So just drop it into an onComplete in your animation: 

 gsap.to(box.current, {
   height: "1000px",
   onComplete: () => ScrollTrigger.refresh() // <- magic
 })

Does that help? 

  • Like 1
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...