Page freezes during ScrollTrigger pinning on Safari (without scrolling the page)

[TomasS]

Hi everyone, I'm relatively new to GSAP and still learning a lot. I have one problem that I can't solve.

 

In my sample website, I have a short Lottie animation that plays when to page loads. As soon as it's completed the ScrollTrigger is activated and the video is controlled by scrolling the page. The issue is that when the ScrollTrigger is set, the page freezes for a fraction of a second. It's barely visible on most devices, but quite noticeable on Safari.  This can easily be seen in the horizontal scrolling text that runs over the animation. And it's all happening without even scrolling the page.

 

If I don't pin the ScrollTrigger, it works fine, no freeze at all. Also, I have found out that the duration of the freeze depends on the file size of the Lottie animation. The video in this sample is about 4mb so that the jitter is clearly visible but even with 2mb file the freeze is annoying.

 

If anyone can take a look at this and tell me if there is a solution or what is wrong with my code, it would be greatly appreciated!

 

 

See the Pen yLrvzre by Tomas-Soukup (@Tomas-Soukup) on CodePen

[Rodrigo]

Hi,

 

I don't have a Mac machine so I can't test in Safari, sorry about that. In an old laptop using Ubuntu 20 your codepen works good in both the latest Chrome and Firefox.

 

Two things I noticed, you can use our Horizontal Seamless loop helper function for the marquee:

https://gsap.com/docs/v3/HelperFunctions/helpers/seamlessLoop

 

Here is a demo that uses ScrollTrigger to control the direction and speed of the marquee elements:

See the Pen GRwePYw by GreenSock (@GreenSock) on CodePen

 

 You can set will-change: transform; in your styles for the elements in the marquee in order to improve performance by the way.

 

Also we have  a Lottie & Scrolltrigger helper function as well that you can use to create a ScrollTrigger instance that controls that specific Lottie animation:

https://gsap.com/docs/v3/HelperFunctions/helpers/LottieScrollTrigger

 

You can also set a specific frame of the Lottie animation as the start offset  (if you want to use a different frame than the first one which is the default), as Jack explains in this thread:

 

Hopefully this helps.

Happy Tweening!

[TomasS]

Thank you. I will look into your suggestions.