Akufeninc Posted September 21, 2020 Share Posted September 21, 2020 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 More sharing options...
ZachSaucier Posted September 21, 2020 Share Posted September 21, 2020 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. 1 Link to comment Share on other sites More sharing options...
Akufeninc Posted September 21, 2020 Author Share Posted September 21, 2020 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 More sharing options...
ZachSaucier Posted September 21, 2020 Share Posted September 21, 2020 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! 1 Link to comment Share on other sites More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now