[Problem with ScrollTrigger.saveStyles and ScrollTrigger.matchMedia]

Wow, that was quick!!!

 

Thanks Jack!!!

 

Looks like you beat me to it -- I took a stab at writing my own saveStyles function

 

Like you said -- the unpredictability of the executions was the real issue. I didn't think of using the ScrollTrigger events.

 

Your modified saveStyles function completely resolves the issue.

 

(I am going to do some more tests. I will post here if I find anything new.)

[Problem with ScrollTrigger.saveStyles and ScrollTrigger.matchMedia]

Interesting...

 

I'm not sure why, but replacing clearProps: true with an onComplete function (that should be doing the same thing) seems to resolve the problem:

 

onComplete: function() { gsap.set(this.targets(), {clearProps: true})}

 

________________________________________________________

Update: After a bit of testing, it looks like clearing the properties in the onComplete function does not resolve the issue.

[Problem with ScrollTrigger.saveStyles and ScrollTrigger.matchMedia]

Hi GSAP forum,

 

I am having the same issue as the original poster.

 

I am using ScrollTrigger.matchMedia and ScrollTrigger.saveStyles so that animations do not get applied on mobile.

 

Adding the ScrollTrigger.saveStyles correctly reapplies the original styles when the media query isn't matched -- for instance when resized outside the bounds of the matchMedia query. However, like the original poster, adding saveStyles causes the animation to glitch (the origin state/position is displayed for a spit-second before starting).

 

Also like the original poster, commenting-out the ScrollTrigger.saveStyles code removes the glitch. However, content remains in the unanimated state on window resize. (So, elements that animate "from" "opacity: 0" are invisible when I resize below the bounds of the matchMedia query.)

 

Please see CodePen below:

See the Pen qBRayvw by lindauson (@lindauson) on CodePen

 

Works fine without ScrollTrigger.saveStyles:

See the Pen wvgzYGY by lindauson (@lindauson) on CodePen

Adding CSS to start the elements at "opacity: 0" might solve the problem, although it ruins progressive enhancement -- the page will be broken without JS.