Akufeninc
Content Type
Profiles
Forums
Store
Blog
Product
Showcase
FAQ
Downloads
Posts posted by Akufeninc
-
-
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 :
See the Pen ?editors=0010 by GreenSock (@GreenSock) on CodePen
In order to use it with Draggable and the Inertia Plugin. Here's my codepen :
See the Pen NWwwmRe by MaxVeilleuxMTL (@MaxVeilleuxMTL) on CodePen
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 :
See the Pen jOyGxPQ by MaxVeilleuxMTL (@MaxVeilleuxMTL) on CodePen
-
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 :
See the Pen xxgXpJq by MaxVeilleuxMTL (@MaxVeilleuxMTL) on CodePen
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
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 -
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)
iOS Mobile problem - ScrollSmoother + pin large section glitching
in GSAP
Posted
I found this topic because I was facing the same issue, and I managed to fix this by adding :
...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) :
with this solution, i do not need to set normalizeScroll: true anywhere.