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.

Hey guys! I just wanna show that we are having some rendering issues with ScrollSmoother in Safari browser, so I will leave here 2 videos to show the difference between Safari and Chrome. I would like to know if you have any workaround for that. Safari: Safari.mp4 Chrome: Chrome.mp4 Thanks so much!

Hi @GreenSock, thanks so much for the insight, I really appreciated it, I would have never find the CSS weird behavior. 🙏😀

Hey @Carl!, thanks so much for your help, I think that with these CSS changes I can get the same initial result. Really I needed other eyes to find another way, thanks again for your help, and btw, your courses are great man! https://codepen.io/nazarenooviedo/full/abWwMJP

Hey guys! I reused an animation based on snorkltv to have a rotator attached with the ScrollTrigger, but I'm having some issues with the scroll. I can't find the bug, but my issue is that scroll is blocking (I can't reproduce the exact time or behavior), and the animation obviously stops working. I leave here a video and the Codepen to show them, as usual, thanks in advance for your help! 🙂 🙏 scrollvideo.mov

Hey @andsavu, I leave here a pen with a solution for your issue, so, as you can see I did a correct bind for ScrollTrigger and Smooth-Scrollbar, if you will use just a horizontal scroll you need to do this: // Setup Scrollbar const scroller = document.querySelector("#scrollbar"); const bodyScrollBar = Scrollbar.init(scroller, { overscrollEffect: "bounce", alwaysShowTracks: true, delegateTo: document }); ScrollTrigger.scrollerProxy(scroller, { scrollLeft(value) { if (arguments.length) { bodyScrollBar.scrollLeft = value; } return bodyScrollBar.scrollLeft; } }); Then we need to bind the listeners and a quick default setup for ScrollTrigger to enable the horizontal scroll and setup a scroller. bodyScrollBar.addListener(ScrollTrigger.update); ScrollTrigger.defaults({ scroller: scroller, horizontal: true }); And also I added some stuff to improve the code, for example with this line you can be sure to avoid all time the yAxis. bodyScrollBar.track.yAxis.element.remove(); Codepen: https://codepen.io/nazarenooviedo/pen/YzWgJWw I hope to help you 🙂

Hey @RoyM, I just did a fork, and also I replaced your masterTL by a useRef() hook, so in this way works. You can check it here: https://codesandbox.io/s/flamboyant-solomon-vdis4 const masterTL = useRef(null); useEffect(() => { masterTL.current = gsap.timeline({ repeat: -1, paused: true }); }, [masterTL]);

Thanks so much! you gave me a great idea, I just use a a fixed width for the viewBox and just move the inner group along x axis. Thanks!

Hey @ZachSaucier thanks! yes, I tried using an array but my question is, how can I to set a specific position for each one?. For example, if I use a timeline I can use the .tweenTo() to reach a specific position, but doesn't available for tweens. In my challenge I need to have paused the line at the load, so when you do a hover, this line moves forward, but when you leave the hover I need to reverse to the first position. (I leave here some images to try explain) Initial Position & Mouseleave: Hover:

Hi folks! I need help to implement a new timeline from tweens that are building into a loop. (btw, I use as a base this pen https://codepen.io/osublake/pen/ExPMgQq, credits to Blake Bowen) If is use a gsap.exportRoot() into a const, I have control over the timeline (but there isn't apply to use into a component) . So but I use tl.add(tween) into the loop I can't reach the same result . Also I tried with tl.add(tween, 0) but isn't work for me. Surely I'm doing something wrong, but I can't discover what, so if you can help me I will be appreciated. Thanks. 😊

Hey, @GreenSock thanks so much! I totally forgot to use the AttrPlugin. You are right in all, I just applied your feedback, and works fine for both browsers. Thanks again!