noviedo

Hey Romanus! I hope you are well, I leave here a fork of your pen using GSAP to rotate the cube. https://codepen.io/nazarenooviedo/pen/rNZmZLx Basically, I used a useEffect() to animate it. useEffect(() => { if (!ref.current) return; gsap.to(ref.current.rotation, { x: Math.PI, ease: "linear", repeat: -1, duration: 2 }); }, []); I hope helps you!

If you find yourself calling gsap.set() many times on the same object (or set of objects), like in a "mousemove" event, you can boost performance 50% - 250% by creating a quickSetter function and using that instead of gsap.set(). And on the other hand, If you find yourself calling gsap.to() many times on the same numeric property of the same target, like in a "mousemove" event, you can boost performance by creating a quickTo() function instead. Basically a gsap.quickSetter() is a optimized function of gsap.set() and gsap.quickTo() is a optimized function of gsap.to() I leave here both links to the documentation. (gsap.quickTo() & gsap.quickSetter())

Hey Lounes, you can usegsap.quickTo()instead of use gsap.quickSetter() in this way you can use duration and ease for that. I leave here a fork of your pen with the changes applied. I hope that helps you! GSAP - Smooth Cursor Movement

thanks so much Jack! it's just I needed ?

I just took the GSAP Horizontal Scroll pen with ScrollTrigger, and I added ScrollSmoother and this works perfectly. And also I have a requirement to do draggable the horizontal section, so for that I used the Observer plugin to use the onDrag function to update the scroll() of the main ScrollTrigger. So, this also works fine, but I wanna reach a smooth movement on the drag, like a ('lerp' ,'momentum', 'inertia') as when I scroll, but I can't reach. Any suggestions are welcome. I did this to update the scroll value of the ScrollTrigger. Observer.create({ target: ".container", type: "wheel,touch,pointer", onDrag: (self) => { scrollTween.scrollTrigger.scroll( scrollTween.scrollTrigger.scroll() - self.deltaX ); } }); Thanks so much!

Hey!, I did a simple animation just to show the concept about to use morphSVG. In this example all paths are morphing from the same shape (circle), if you need transitions between two SVG (I refer to your files), you need to make sure to have the same quantity of paths in each SVG to have a smooth transition between them. I hope this helps you! https://codesandbox.io/s/morph-svg-gsap-charmander-2wpntv (I forked your codesandbox, and worked there)

Hey @cereal_beast how is going?? you are using the same target for all titles, so this executes the triggers at the same time, so I did a quick refactor. I used an iterator to keep the correct trigger, and then I used the same animation! I hope helps you! https://codepen.io/nazarenooviedo/pen/MWVazVe

Hey @Ryan Lee, how's going? I just add a ResizeObserver in your code to listen to the ".viewport" size changes. Also, I wrapped the ScrollTrigger.refresh() into a delayedCall() just to simulate a debounce function. const container = document.querySelector(".viewport"); const resizeObserver = new ResizeObserver((entries) => { gsap.delayedCall(0.2, () => { ScrollTrigger.refresh(); }); }); resizeObserver.observe(container); I don't know in which framework you are working, but please, don't remember to clean up the resizeObserver, just to keep clean the memory. resizeObserver.disconnect() I hope this helps you!. https://codepen.io/nazarenooviedo/pen/poLJvga

Hey @cereal_beast, how's going? You are using a .from() function, so in this way, you will never get the correct autoAlpha because you are set the opacity in 0, probably you will need to use a .to() function to trigger the opacity. I did a quick fork from your pen and fixed it, just check it. I fixed your syntaxis regarding the duration position, and also I split the animation into two tweens, a from() function for all properties and just a to() function to the autoAlpha. With the last parameter in the to() tween ('<') we reach to execute both tweens at the same time. I hope helps you! https://codepen.io/nazarenooviedo/pen/mdxJdad

I'm glad to hear it! is a pleasure ?

Please, could you create a minimal demo? just to debug and test it. Thanks!

Hey @nthpolygon how is going?? I leave here an example with 2 alternatives, but the onComplete should be doing the same thing. Using onComplete: const tween = gsap.from(["h1", "p"], { yPercent: 30, autoAlpha: 0, stagger: 0.1, paused: true }); gsap.to("body", { autoAlpha: 1, duration: 0.5, onComplete: () => { tween.play(); } }); Using .then(): const tween = gsap.from(["h1", "p"], { yPercent: 30, autoAlpha: 0, stagger: 0.1, paused: true }); gsap .to("body", { autoAlpha: 1, duration: 0.5 }) .then(() => { tween.play(); }); I leave here the Codepen: https://codepen.io/nazarenooviedo/pen/mdXZMQg

Hey @chacrasoftware I hope you could solved it, but just in case, I leave here a codesandbox for you!

Hey @Nye, I just did a quick refactor to avoid using the addHeadingRef() function, I isolate this code in a little component, and then I just did what @Cassie said, I used the gsap.utils.selector() function and I just use one ref (const containerRef = useRef(null) to map the elements const q = gsap.utils.selector(containerRef.current); gsap.to(q(".heading"), { xPercent: 5, duration: 3, repeat: -1 }); https://codesandbox.io/s/nested-react-next-gsap-forked-x4fdvr?file=/pages/index.js I hope helps you! ?

Hey @josefirmino, how is going? I leave here an example from @Cassie but implemented it into the Next.js framework. I hope works for you!. ? https://codesandbox.io/s/horizontal-scroll-nextjs-fuog8t?file=/pages/index.js