Jump to content

Search In
  • More options...
Find results that contain...
Find results in...


  • Posts

  • Joined

  • Last visited

About Akufeninc

Recent Profile Visitors

350 profile views

Akufeninc's Achievements

  1. Nice, thanks for your help @akapowl On the same topic, I am also having the same issue when I want to stagger elements with a delay... Even though the delay variable is hardcoded, the delay is not taken into consideration. Please see here : https://codepen.io/MaxVeilleuxMTL/pen/jOyGxPQ
  2. Hello, Following up on this thread, the delay property with scrollTrigger is not working, or I can't seem to wrap my head around how to make it work. Here's a super simple demo showing the issue : https://codepen.io/MaxVeilleuxMTL/pen/xxgXpJq I want my div to animate itself with a 5 seconds delay after it is triggered in the view with scrollTrigger. No "scrub" property involved here, and I don't want any. Thanks! Max
  3. Hi Zach and thank you for the quick response 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
  4. 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)