Lin Hazell

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.)

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.

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: https://codepen.io/lindauson/pen/qBRayvw Works fine without ScrollTrigger.saveStyles: https://codepen.io/lindauson/pen/wvgzYGY 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.