Refresh scrolltrigger for one of them

[fonveton]

I have an animation on my page and Im trying to add another one. First animation works with scrolltrigger and changes heigh of some elements, that brokes start/end position for my second animation. When I refresh scrollTrigger before my second animation this time it brokes my first animations start/end position and can't reverse it on scroll. So my question is 'is there a way to refresh scrolltrigger for just one scrolltrigger animation' ?

[Rodrigo]

Hi,

 

You can use the refresh method that works for individual Scroll Trigger instances:

https://greensock.com/docs/v3/Plugins/ScrollTrigger/refresh()

 

const stOne = ScrollTrigger.create({/*...*/});
const stTwo = ScrollTrigger.create({/*...*/});
const stThree = ScrollTrigger.create({/*...*/});

// Add a new element to your HTML
addNewElement();

// Update a specific ScrollTrigger
stTwo.refresh();

The ScrollTrigger.refresh() method works for all the instances you have created.

 

If you keep running into an issue, please provide a minimal demo that clearly illustrates the problems you're having.

 

Happy Tweening!!!

[GreenSock]

This sounds very fishy to me - you should NOT have a situation where one ScrollTrigger is using old values (not refreshed) in order to work, and another one has fresh ones. They must be able to work together, fully refreshed. So it sounds like you have something wrong in your setup. It's impossible to know without seeing a minimal demo (like a CodePen). I would caution against doing what Rodrigo said even though it might technically work in one scenario (assuming you don't resize the page or do anything to trigger a full refresh() after that). At best, it's a band-aid but at worst it's just masking a fundamental problem in your setup.