Akufeninc

I found this topic because I was facing the same issue, and I managed to fix this by adding : scroller: null ...on my ScrollTrigger pin instance, when I am on mobile. So in my case (Vue project) I am using it like this to manage desktop (smooth-scrolling) / not desktop (no smooth-scrolling) : scroller: this.$device.isDesktop ? '#smooth-wrapper' : null, with this solution, i do not need to set normalizeScroll: true anywhere.

Awesome, it's working great with the solution you provided Thanks a lot @GreenSock, cheers!

Hello @GreenSock, I am wondering how to create this effect that you posted a while back : https://codepen.io/GreenSock/pen/QGyyyd/?editors=0010 In order to use it with Draggable and the Inertia Plugin. Here's my codepen : https://codepen.io/MaxVeilleuxMTL/pen/NWwwmRe Right now I am faking a bounce back to x:100, y:100... But I would like it to bounce off the wall with the correct velocity and to the correct end position, like we can see in your example. Thanks a lot

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

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

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

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)