GSAP animation laggy after initial load

[vierless_julian]

Hi fellow GSAP friends,

 

a few months ago I was asking for a scrub animation that we were developing for our new page. This page is now live and we are receiving some weird laggy bug after loading the page. The animation appears super laggy for a few seconds and then slowly gets better until it runs smoothly after some time.

 

The live page is: https://vierless.de/

The prototype I built a few months ago that is running on our live site now can be seen in codepen: 

 

I hope someone has an idea why this is happening and how we can stop this.

See the Pen wvEjpgL by julian_witzel (@julian_witzel) on CodePen

[mvaneijgen]

I can't see any laggy behaviour, not on the codepen or on the live site. I do see that you are animating your trigger element, which you should never do. ScrollTrigger uses the start and end based on the trigger element, but you keep moving the trigger element in your tween.

 

You could also check if some third party script is adding transition values to the items you're animating with GSAP. If I open your CSS on the live site and search for transition: all I see a view lines pop up, in my personal opinion you should never transition: all, and only every specify the particular properties you want to transition. And you should never use css transitions on the properties you want to animate with GSAP, then JS and CSS will fight for who gets to animate when, which will cause 'lag'.

 

But again I see none of this in your demos on macOS on either Safari or Chrome. 

[Rodrigo]

Hi,

 

I don't see any performance issues on Ubuntu 20 & 22, with the latest versions of Firefox and Chrome.

 

Happy Tweening!

[vierless_julian]

@Rodrigo @mvaneijgen I recorded a loom video for the support of our caching tool. Maybe it can show a little bit better what I am refering to.

 

https://www.loom.com/share/401146a1bcf54e7396e0825ca4e75833

[vierless_julian]

@mvaneijgen This is my first time of implementing a GSAP animation. So I appreciate any tips on how to improve my current code. Talking about the transition: all, we are using WordPress and a page builder for the page and the most of the CSS is generated through it. Unfortunately it adds a lot of all values. But also here: If you have tips on how to improve/change this I am open to hear them!

[mvaneijgen]

Just now, vierless_julian said:

we are using WordPress and a page builder for the page and the most of the CSS is generated through it. Unfortunately it adds a lot of all values.

And these tools can cause issues. I've reproduced your steps (except clearing cache, maybe try disabling this plugin for a while and see if some setting is causing this issue), but I'm still not seeing it.

 

At line 34 in your codepen       trigger: '.video-container', should not be the same element as at line 9   gsap.fromTo('.video-container', preferably the trigger element should be a higher top level element something like .video-container-trigger. You could also disable the filter blur tween to see if that makes any effect. We can debug live website, it would be best if you could create a codepen with the issue then we can dive in and help you debug, for if it only happens on your live site you'll be the only one that can debug, just start by disabling big chunks of code to help isolate the issue.