noviedo

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!

Hey guys, I´m having an issue on Safari when I try to transition some properties into a <linear Gradient>. I'm using Next.js, but I leave here a minimal codepen to replicate the issue. Also, I leave some videos to show the error. In Chrome and Firefox works fine, just fail in Safari (Version 13.1.1). I'm getting this error (TypeError: Attempted to assign to readonly property.) Maybe anyone who had this error can help me! thanks in advance. chrome.mov safari.mov