Getting Jitter when transforming multiple elements with multiple scrolltriggers

[travispamaral]

Hi there! I have pretty much this same exact code (codepen) in a project and I see SO MUCH JITTERING. The only reason I have multiple scrollTrigger's is because I want to animate the boxes to end at different times. The codepen is actually smoother than my local project but is there anything in this code that stands out as incorrect?

See the Pen GRrrQOO by travispamaral (@travispamaral) on CodePen

[GreenSock]

I'm not seeing any jitter but I'm on a fast system. I glanced at your code and I noticed some issues: 

1. You're using CSS filters like drop-shadow. Those can be very expensive rendering-wise (totally unrelated to GSAP)
2. You're using SVG filters like blur, flood, colorMatrix, and blending modes. Those can be CPU hogs. 
3. Masks can also be CPU-intensive.
4. You might want to run some tests to see if using CSS variables the way you're doing it for the x/y translations is any faster than just animating those with GSAP directly. My suspicion is that it'd be faster to just use GSAP because then the browser doesn't have to constantly be worrying about cascading with CSS variables. I could be wrong. 

If I were you, I'd remove the CSS and SVG filters and just see how much of an impact that has. If you suddenly get silky smooth movement, you know those filters are the issue. And again, none of this has anything to do with GSAP - it's browser graphics rendering

 

Happy tweening!

[travispamaral]

Thanks for the quick reply! I’ve actually removed the animation for the drop shadow but didn’t see too much improvement. I had a sneaking suspicion it might be all the other svg crap in there. I’ll look at stripping out. 
 

I did try doing everything in gsap but didn’t see any huge improvements but I’ll give it another go. In terms of scrollTrigger setup it all looks ok?

 

thanks again!

[GreenSock]

27 minutes ago, travispamaral said:

I did try doing everything in gsap but didn’t see any huge improvements but I’ll give it another go. In terms of scrollTrigger setup it all looks ok?

I can't say for sure because I don't know precisely what your goal is with each one, but I did notice that you're defining a "trigger" and then start: 0 which doesn't make a lot of sense. If you're setting start to a numeric value of 0, there's no need for a trigger element at all. start: 0 just means you want it to start at a scroll value of 0 (very top). It isn't breaking anything, it just seemed odd to me. When you use a trigger, it's like saying "when this element hits a particular spot in the scroller/viewport..." 

 

ScrollTrigger is super flexible, so you can use whatever kind of values you prefer. Absolute or relative to a trigger. 

 

I bet once you pull out all that filter stuff from the SVG, you'll get better performance. 

[travispamaral]

Oh interesting good to know! The main thing is I want all three of the inside elements to transition at the same time as the main skewed image but hit there ends at different times. I’ll try and simplify the svg and remove the extra stuff. Thanks for the help!