ScrollTrigger .refresh breaks all animations that happened before current location on the page

[OneDoBit]

After calling scrolltrigger refresh function in the middle of my page (to update starts and ends when accordions are opened) every single animation that happened before my location on the page broke

If I go back to the beginning of the page before calling the scrolltriger refresh everything works prefectly, but not if I am in the middle of the page

Unfortunately I can't share any code since it got a lot to it, and I simply can't create a simpler version. Maybe someone had a similar problem before

I have tried using refreshPriority, did not work

I have 6 accordions in total, and after I open them i want to update all of the starts and ends after.

[GreenSock]

3 hours ago, OneDoBit said:

Unfortunately I can't share any code since it got a lot to it, and I simply can't create a simpler version. Maybe someone had a similar problem before

I don't think I've seen anything like that, no. It sure sounds like there's something funky going on in your particular setup, but it's impossible to know without seeing a minimal demo. 

 

ScrollTrigger.refresh() doesn't affect non-ScrollTrigger-related animations so it sounds very fishy (unless all the animations you're talking about are linked to ScrollTriggers). 

 

If you still need some help, please post a minimal demo and we'd be happy to take a peek. 

[OneDoBit]

12 minutes ago, GreenSock said:

ScrollTrigger.refresh() doesn't affect non-ScrollTrigger-related animations so it sounds very fishy (unless all the animations you're talking about are linked to ScrollTriggers). 

All of the previous animations are indeed ScrollTrigger-related animations.

For example, In this piece of code, after I call in ScrollTrigger.refresh() onComplete, previous mainAnimation doesn't work

 

This is not tied to any problems with logic, since if I scrollTo very top of my page right before calling ScrollTrigger.refresh() everything seems to work properly, but if I stay in the middle, every single ScrollTrigger-related animation stops working.

[GreenSock]

Yeah, some of that code looks odd to me. 

• You're literally putting the start and end exactly on top of each other, but you've got a scrub set. Why? Are you trying to treat that like a toggle point or something? 
• You're setting numeric start/end values (which are absolute) but you're ALSO setting a trigger element (which is pointless in that context). 
• You're using the old syntax for easing
• Why are you calling ScrollTrigger.refresh() inside an animation onComplete? 

Are you using the latest version of ScrollTrigger and GSAP? 

 

I don't think we can be of much help without a minimal demo. Once we see one, I'm sure we'll have more to offer. 

[OneDoBit]

10 minutes ago, GreenSock said:

Yeah, some of that code looks odd to me. 

• You're literally putting the start and end exactly on top of each other, but you've got a scrub set. Why? Are you trying to treat that like a toggle point or something? 
• You're setting numeric start/end values (which are absolute) but you're ALSO setting a trigger element (which is pointless in that context). 
• You're using the old syntax for easing
• Why are you calling ScrollTrigger.refresh() inside an animation onComplete? 

Are you using the latest version of ScrollTrigger and GSAP? 

 

I don't think we can be of much help without a minimal demo. Once we see one, I'm sure we'll have more to offer. 

Hi, thank you for the reply.

1) Yes, I am trying to treat that like a toggle point, but the reason it looks that weird, because the container that it is on, is horizontalScrolled

2) I am not sure that they are absolute, since they are based on the container that I got from the trigger, maybe I am not into something here...

3) Yes, I am aware of that, but for some reason TimelineMax is working weirdly with new syntax on VueJS

4) When I open my accordions everything that is under them is moving, but the starts and ends on ScrollTrigger are not moving from their previous position, so the content moves down, my the trigger points are not, so what I am doing is when I finish one of the animations on accordion opening, I call ScrollTrigger.refresh() to get new height values besically

 

I am 3.6.1 version from npm

 

I will try to get demo in upcoming days, but it will be amazing if I can get any type of solution or workaround before that

[GreenSock]

7 minutes ago, OneDoBit said:

1) Yes, I am trying to treat that like a toggle point, but the reason it looks that weird, because the container that it is on, is horizontalScrolled

Are you trying to make your ScrollTriggers oriented horizontally? If so, you should set horizontal: true. 

 

7 minutes ago, OneDoBit said:

2) I am not sure that they are absolute, since they are based on the container that I got from the trigger, maybe I am not into something here...

Yes, I'm telling you that's how ScrollTrigger works and hopefully it's clear in the docs - if you set start/end values as NUMBERS, those are interpreted as absolute scroll positions. So if you set a "trigger" element, it's totally meaningless if you're using numbers for your start/end. 

 

// when the scroller is scrolled by exactly 300px (trigger doesn't matter!)
start: 300

// when the top of the trigger element hits the top of the scroller
start: "top top" 

 

10 minutes ago, OneDoBit said:

3) Yes, I am aware of that, but for some reason TimelineMax is working weirdly with new syntax on VueJS

This sounds very fishy to me. Do you realize there's no such thing as TimelineMax anymore? You might want to check out

TimelineMax code still technically works because we made almost everything backwards-compatible. But when you say things like "TimelineMax is working weirdly with the new syntax" that's an immediate clue to me that you've got some faulty code or misunderstandings. 

 

I don't think we can do anything else without a minimal demo, sorry.