Jump to content
Search Community

GSAP "filter:blur" animation is super glitchy on first load only (Chrome browser).

Akufeninc test
Moderator Tag

Recommended Posts

The blur animation on the peach coloured text is super glitchy when you visit the website for the first time only (Chrome browser).
https://witnessestohistory.museeholocauste.ca/

You can recreate the issue by visiting in "Incognito mode", or clearing your cache.

If you refresh your browser or visit another page, the same animation runs super smoothly.

My current animation setting is :
 

this.tl.staggerFromTo(this[splitKey], this.duration, { css: { opacity:0, scale:1.3, filter:"blur(10px)", z:0 } }, { css: { opacity:1, scale:1, filter:"blur(0px)", z:0 }, ease:this.easing}, this.stagger[splitKey]);


I have tried all of the following :

- this.tl.progress(1).progress(0); (before playing my timeline)
- z:0.01
- backface-visibility: hidden
will-change: transform, filter
-webkit-font-smoothing: subpixel-antialiased
gsap.set(this[splitKey], { force3D:true })
- Adding a huge delay before the animation starts to prevent overlapping of effects / images loading
- Adding page cache
- Adding a "loader" with a blur animation out to prepare the GPU for the effect, since it seems to run smoothly the second time (didn't work)

See the Pen by (@) on CodePen

Link to comment
Share on other sites

Hey Akufeninc and welcome to the GreenSock forums. Interesting (albeit very performance intensive) effect!

 

55 minutes ago, Akufeninc said:

The blur animation on the peach coloured text is super glitchy when you visit the website for the first time only (Chrome browser).
https://witnessestohistory.museeholocauste.ca/
You can recreate the issue by visiting in "Incognito mode", or clearing your cache.
If you refresh your browser or visit another page, the same animation runs super smoothly.

This almost always means that it's a loading issue, not an issue with GSAP. Most likely resources are still loading or the page is still being set up so that takes away from the resources allowed to be animating. Like I said already, your animation is very performance intensive so you'll likely see some sluggishness on some devices regardless. 

 

You can try waiting for everything  to load and be setup before starting the animation. I'm betting that will help a bit. But I'm afraid there's not much we can help you with.

  • Like 1
Link to comment
Share on other sites

Hi Zach and thank you for the quick response :)
 

1 hour ago, ZachSaucier said:

This almost always means that it's a loading issue, not an issue with GSAP. Most likely resources are still loading or the page is still being set up so that takes away from the resources allowed to be animating. Like I said already, your animation is very performance intensive so you'll likely see some sluggishness on some devices regardless. 


I get that it's a very performance intensive animation, but how can we explain that it always runs super smooth once we refresh the page?

The lag only (and always) occurs in a fresh incognito mode, or with cache cleared... other than that, if you refresh the page after your first view and navigate the rest of the website, it will look super smooth!

Regarding the loading, as I mentioned in my 7th point, I've already tried adding a huge delay on the animation, to make sure that all the other assets and images were fully loaded. Still, the lag appears on the first load only :S

Link to comment
Share on other sites

5 minutes ago, Akufeninc said:

how can we explain that it always runs super smooth once we refresh the page?

Like I said, I am guessing it's due to other things being set up (other content loaded, etc.). Unfortunately we don't have the time or capacity to debug exactly what the cause is for you. If you have a GSAP question please ask and we'll do our best to help!

  • Like 1
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...