joyboy

Nice! That worked super fine. Just to understand it better: is there any reason why you prefer a single tween for the 3 properties instead of a quickTo for x and y and another tween just for the rotation?

Something like: gsap.to(fish, { rotation: `${angle}_short`, duration: 0.8, ease: 'back.out(1.2)' }) inside the moveHandler fuction also works. Is okey having a gsap.to() on every mousemove? Or do I have to clean the previous tweens on each update?

Hey! I'm working on a mouse follower using React + TypeScript, following the new useGSAP package recommendations. I'm trying to use quickTo with the rotational direction plugin, but it would only work with degrees in number (also will throw a TS error if using TypeScript). Is this indeed a limitation, or am I missing something here? Created a demo really quick to showcase the scenario. As pointed out in line 48, using the ${rotation}_short syntax for the rotation property won't work along with a quickTo. Sample here: https://codepen.io/joyboyar/pen/WNWRQgw Also, if not this way, what would you recommend to achieve the same "lerp" effect with the rotation while doing the same as "_short" does? Thanks in advance 🫡

Hi! Facing the same problem here using Next App router. Are there any benefits of the ssr lost if using this solution? Normally you don't run any gsap on the server, but just in case.

Hi! Just facing a similar problem in 2023. I was wondering if there's any better way to do this now, and if so, if it's possible to only ignore vertical/horizontal resize.

That was an incredibly clear explanation! Thank you very much ?️

Hi! Just looking for a solution for a timeline I was working on in React I found out I was having this same problem. While ctx.revert() works fine, ctx.kill() doesn't. I don't know why to be honest. const headerRef = useRef<HTMLElement>(null) const headerCtRef = useRef<HTMLDivElement>(null) const timeline = useRef<GSAPTimeline>( gsap.timeline({ defaults: { ease: 'back.out', }, }) ) useLayoutEffect(() => { const tl = timeline.current const header = headerRef.current const headerCt = headerCtRef.current const ctx = gsap.context(() => { tl.from( header, { yPercent: -100, duration: 0.5, }, 0 ) .from( headerCt, { rotateX: 35, delay: 0.1, duration: 0.5, }, 0 ) .from( [headerCt, header], { autoAlpha: 0, duration: 0.2, }, 0 ) ScrollTrigger.create({ start: 'top top', end: 99999, onUpdate: (self) => { self.direction === -1 ? tl.play() : tl.reverse() }, }) }, headerRef) return () => { ctx?.revert() } }, []) If I would use ctx.kill() the timeline bounces in and back no matter what I do, I suspect because of react strict mode second call.

Hi! I was trying to achieve a similar effect to this codepen (found it in the gsap showcase) , but without all the complications of the loop. Most precisely, I was trying to achieve that instant snap effect, but without restarting when the array ends. Something exactly like this. I spent several hours yesterday without catching it, I would really apprec.iate any start point to work arround. Thanks in advance