noviedo

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

Hey Jack!, thanks so much for your comments! Fortunately, I found was my bug(?), I'm using a video with a wrapper with an ::after layer with a filter: blur() and this apparently doesn't like to safari haha, if I comment on this line, the scroll works perfectly. I leave here the GreenSock demo implementation (with some images replaced by videos) on Next.js, and I did the test, so I leave a commented line with the blur() (just for you can test it). https://codesandbox.io/s/gsap-next-smoothscroll-jg1zin

Hey @Cassie, thanks so much, I will review my code, and I will try to do a minimal demo to show it because in my current project I'm having this issue, and isn't into an iframe, but let me debug a little more.

Mmmm, is so weird, I tested in: and in a: and in both mac's we have the same behavior. Also I tested using normalizeScroll: true but I continue having the same issue.