Laggy scrolltrigger results on safari

[Adam.shires]

Hey everyone,

 

This is my first post on the forum and I'm extremely new to this all. My JS is non existent and my HTML and CSS are very basic. I use Webflow to build sites for my little studio and have made it my goal this year to learn HTML, CSS and JS as best I can. Recently I've been trying to implement ScrollTrigger animations into a rebuild of our current website. I've been having some success and everything is running smoothly except in Safari.

I'm running Chrome (Version 98.0.4758.81) on Windows 10 64Bit and the animations are smooth and fluid. However, when running it on my Safari (Version 15.3) on my wife's MacBook Pro and iMac the animations are incredibly choppy and laggy. I've noticed that up to a point in the scroll animation it seems to suffer with so much transforming text on the page and really doesn't seem to like the transitions of the autoAlpha until it's finished, then runs smooth again. 

 

I've tried to create a Codepen to demonstrate:

But here is my staging site: https://bsa-site.webflow.io/

 

Any advice on getting this to run smoothly on Safari would be greatly appreciated.

 

Much thanks in advance

 

Adam

See the Pen wvPGjdb by Geeza82 (@Geeza82) on CodePen.

[OSUblake]

Welcome to the forums @Adam.shires

 

If something is laggy, it probably means you are putting a high rendering load on the browser. The only thing I can really recommend is to put will-change: transform; in your CSS on elements you are animating with GSAP.

 

https://developer.mozilla.org/en-US/docs/Web/CSS/will-change

 

If that doesn't work, you might have to switch to a faster rendering solution, like canvas/WebGL or somehow rework your animation to use images instead of text. 

 

 

[mvaneijgen]

Your demo is not working because the only Javascript you load in the JS pane is ScrollTrigger. You are missing jQuery and GSAP 

 

See the Pen dyZMgay?editors=1010 by mvaneijgen (@mvaneijgen) on CodePen.

 

What I can see in your code is that you target the same element multiple times, I don't know if that could be the culprit, but it certainly won't help. GSAP allows you to string animations right after each other by just adding them to the timeline, it seems like your want to have several animation to happen at the same time, you can add these to the time line and then defining a starting parameter. Read more here 

 

Both these elements will animate at the same time 

 

tl.to(targetElement, {
    top: "-88%",
}, '0'); // Start at zero in the timeline AKA start at the begging 

tl.to(OtherTargetElement, {
    top: "-88%",
}, '<'); // Start at the same time as the previous animation in the timeline AKA at the beginning

 

[Adam.shires]

Thanks so much for all the advice @OSUblake and @mvaneijgen I'm going to spend some time playing around with all the solutions you mentioned and will let you know how I go