Rodrigo

Hi, Indeed it would be a very nice example to have in React and other frameworks, but unfortunately we don't have the time resources to create custom examples for our users. I'd start by checking the resources in this page: And then take it one step at a time. We can offer some guidance during the process if you get stuck and have any GSAP related question, but the code shouldn't be too different from what you see there. Hopefully this is enough to get you started. Happy Tweening!

Hi, Sorry about the troubles you're having but it's really hard for us to debug a live site. What you could try is using the anticipatePin configuration option: anticipatePin Number - If you pin large sections/panels you may notice what looks like a slight delay in pinning when you scroll quickly. That's caused by the fact that most modern browsers handle scroll repaints on a separate thread, so at the moment of pinning the browser may have already painted the pre-pinned content, making it visible for perhaps 1/60th of a second. The only way to counteract that is to have ScrollTrigger monitor the scroll velocity and anticipate the pin, applying it slightly early to avoid that flash of unpinned content. A value of anticipatePin: 1 is typically fine, but you can reduce or increase that number to control how early it does the pinning. In many cases, however, you don't need any anticipatePin (the default is 0). If that doesn't work, then maybe try using will-change: transform in some elements of your site. Pinning is a very complicated and tricky thing to accomplish and solving these situations is not easy since it also comes tied to the device hardware as well. Sorry I can't be of more assistance. Hopefully other users can chime in with some sort of solution for this. Happy Tweening!

Hi, Just change this: animacija.style.backgroundColor = "#F0F0F0"; To this: gsap.to(animacija, { backgroundColor: "#F0F0F0", duration: 0.35 }); You can play with the duration and easing function (check the ease visualizer for more information). Also is worth noticing that in your codepen example the leave back callback is never executed. I don't know if in your project it does. Hopefully this helps. Happy Tweening!

Hi @summer9844 and welcome to the GreenSock forums! The thing here is not the getProperty method but the fact that when first rendered the transform matrix of all DOM elements is the default one, where x, y and the rotations are zero and the scale is 1, that's why you're getting 0 for both values. If you want to know the x and y position of each TD in the row you should explore offset top and left: https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/offsetTop https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/offsetLeft Is worth noticing though that for the top or Y position it would be better to use the particular row and not the TD element since the position is relative to the nearest parent element so the offset top of every TD should be always zero. You'll have to test in order to see the results you get. Hopefully this helps. Happy Tweening!

Hi @newdev23 and welcome to the GreenSock forums! Yep, definitely! You might need the ScrollSmoother plugin as well: https://greensock.com/scrollsmoother/ ScrollSmoother is a benefit of Club GreenSock members but you can try it on Codepen, Stackblitz and Codesandbox for free: https://codepen.io/GreenSock/pen/aYYOdN https://stackblitz.com/@GreenSockLearning/collections You can find more examples here: https://codepen.io/collection/BNMEYN Also you can find ScrollTrigger demos in this page: https://greensock.com/st-demos/ Hopefully this helps. Good luck with your project! Happy Tweening!

Hi @Jon Burdon and welcome to the GreenSock forums! In this cases is better to use fromTo instances and create them in the click events, that because GSAP will record the values on the first render and that could lead to odd results in the animations. Here is a fork of your codepen: https://codepen.io/GreenSock/pen/QWZOmEa Hopefully this helps. Happy Tweening!

Hi, I didn't do a single calculation Actually I just used the viewbox value you had in your SVG and took it from there. If you use just this JS in the codepen I created: gsap.set("#ellipse1", { opacity: 1, }); gsap.set("#ellipse2", { opacity: 1, }); You'll see both ellipses centered in the SVG container: https://codepen.io/GreenSock/pen/gOBXvXO Starting at that point both ellipses are at the center of the SVG canvas and their X and Y values are both zero, so given the dimensions of your view box: viewBox="0 0 100 100" you know that the bounds are 100 on each axis. Then with the radius on each axis I set their positions using a couple of set() instances: gsap.set("#ellipse1", { y: -40, opacity: 1, }); gsap.set("#ellipse2", { x: 25, y: 40, opacity: 1, }); And then all I had to do is move ellipse1 to the same coordinates ellipse2 has: t2.to("#ellipse1", { duration: duration, x: 25, y: 40, attr: { rx: new_rx, ry: new_ry, } }) And that's it. Sometimes the simplest solution just works Hopefully this helps. Happy Tweening!

Hi, The reason for that is because in those examples the element that follows the path, soto speak, is a wrapper for the element that rotates. So in Cassie's example that arrow is wrapped around a <g> tag. That particular <g> tag is the one that follows the path, the arrow is just a free loader that goes for the ride and just rotates according to the scroll direction . So in your case you have to wrap your car around an element and tinker a bit with your code and CSS. Here is a fork of your codepen, you can see the red box around the car is the one that is attached to the path: https://codepen.io/GreenSock/pen/MWPOQmo Hopefully this helps. Happy Tweening!

Hi, We can't really offer too much in terms of creating animation for our users, that's beyond the scope of these free forums and we don't have the time resources for that. For what I can see in the video this could be a mix of a parallax animation on a background, an SVG element with some paths changing or a series of PNG images fading in/out and some layered content being animated in. Here are a few examples: https://codepen.io/GreenSock/pen/vYNNvMj https://codepen.io/GreenSock/pen/PoOpobM https://codepen.io/GreenSock/pen/KKpLdWW Hopefully this helps. Happy Tweening!

Hi, As I mentioned before I'm having a hard time following what you're trying to do. Please be specific about what you're trying to do, what the issue is and provide a minimal demo. Without a demo and vague description, there is almost nothing we can do to help you. Happy Tweening!

Hi, You can use CSS variables for that: https://codepen.io/GreenSock/pen/abRVwed just be aware that Filters and specially blur are not really good in terms of performance so thread carefully and test as much as you can in order to prevent bad UX. Hopefully this helps. Happy Tweening!

Hi, @Cassie already solved the same problem for another user here: Hopefully this helps. Happy Tweening!

Hi, I updated the codepen example: https://codepen.io/GreenSock/pen/rNqGQNo This should provide a good starting point. Unfortunately we don't have the time resources to provide anything beyond this, so you'll have to come up with the rest in order to create a more robust and complete solution. Hopefully this helps. Happy Tweening!

@Mohamad Tohme, maybe you have a syntax error somewhere that Webflow is picking up. Unfortunately the small code snippet you posted in that image doesn't tell us exactly what could be the issue. Maybe it would be better if you review your code and if you keep having issues head to the GSAP Forums and start a thread there: https://greensock.com/forums/forum/11-gsap/ Happy Tweening!

Hi @clau2 and welcome to the GreenSock forums! There are a couple of issues in your setup. In your wrapper you don't need the overflow in the Y axis to work so is better to just set the overall overflow to hidden. Then is the start and end points you're giving to ScrollTrigger. By using a relative value you're setting your end point to be relative to the starting point, since that value never reaches the actual point because there is not enough scrolling available you never see the end of the animation. If you add an extra space at the end it works. Also is not a really good idea to give the body tag a display flex property it can lead to issues like this. Here is a fork of your codepen: https://codepen.io/GreenSock/pen/jOeGgYO Hopefully this helps. Happy Tweening!

Hi, Maybe the examples in this thread could provide some inspiration for what you're trying to do: Hopefully this helps. Happy Tweening!

Hi @AaronMark and welcome to the GreenSock forums! Perhaps this example using Clip Path can provide a good starting point: https://codepen.io/GreenSock/pen/eYjoOEW You have to add the scale animation to the images, but adding those to the timeline already in use with the position parameter shouldn't be too complicated. Hopefully this helps. Happy Tweening!

Hi, Sorry about the issues, the main problem here is order of operation. The ScrollSmoother instance should be created first and then the ScrollTrigger ones, as seen here: https://codepen.io/GreenSock/pen/wvYrLVE If you comment out lines 3 through 6 and uncomment lines 21~26 you'll get the same result you have right now. I was hoping that the refresh method could solve this, but apparently it doesn't right now. The problem is that React renders child components first and the works it's way up the component tree, so in your case the page gets rendered first and then the layout component. We're looking into this right now, so please stand by. What you can do in the mean time is create a React Context that tracks the page rendering in the layout and informs the pages components that the ScrollSmoother instance is ready so the ScrollTrigger instances can be created now. https://react.dev/learn/passing-data-deeply-with-context https://react.dev/reference/react/createContext Hopefully this helps for now. Happy Tweening!

Hi, Sorry I don't follow your last post at all. Are you still having issues? If so, please create a minimal demo or fork the last one I provided and be as specific as you can about it. Happy Tweening!

Hi, I have limited experience in SVG but in this cases I always remember what @OSUblake recommends: "keep everything in the center of the SVG view box at startup and then create a coordinate system based on that". So taking his extremely wise words I forked your codepen and came up with this: https://codepen.io/GreenSock/pen/GRYMbRj As I mentioned SVG is not the sharpest tool on my development drawer. I'll invoque @Cassie and @PointC, our SVG wizards so they can either confirm what I'm saying or expose me as a fraud and post a better solution Hopefully this helps. Happy Tweening!

Hi, We do highlight that situation in our resources, unfortunately we can't find a better way to do it, other that having such information on our docs and resources and inform users about it. We are always open to suggestions in order to improve how this is passed onto users, especially those who are unaware of this, as we all have been at certain point, trust me a lot (and I mean a lot) of people have been bitten by this. Happy Tweening!

The example is a fork of your example and is drawing the circle as you scroll down and un-drawing (to phrase it some way) as you scroll up. You can use the MotionPath plugin in combination with the Draw SVG Plugin for that: https://greensock.com/docs/v3/Plugins/MotionPathPlugin Here are a couple of examples: https://codepen.io/chrisgannon/pen/dypvKvR https://codepen.io/GreenSock/pen/oNNEdRV Hopefully this helps. Happy Tweening!

Hi, The main problem I see is this: <section class="gallery"> <div class="frame"> </div> <div class="frame"> </div> <div class="frame frame_bg"> </div> <div class="frame"></div> <div class="frame"> </div> <div class="frame frame_bg"> </div> <div class="frame"></div> <div class="frame frame_bg"> </div> <div class="frame"></div> <div class="frame"> </div> <div class="frame frame_bg"> </div> <div class="frame"> </div> <div class="frame"></div> <div class="frame"></div> <div class="frame frame_bg"> </div> <div class="frame frame_bg"> </div> <div class="frame"></div> <div class="frame"></div> <div class="frame"> </div> </section> See how many elements with the class frame you have in your HTML? Guess what happens when you run this code: let frames = gsap.utils.toArray(".frame"), overlap = 5, time = 0, tl = gsap.timeline({ defaults: {ease: "none", duration: 1}, scrollTrigger: { trigger: ".containerr", start: "top top", end: "+=2000", markers: true, pin: true, scrub: 0.5, } }); frames.forEach((el, i) => { tl.fromTo(el, {opacity: 0, z: -2000}, {opacity: 1}) .to(el, {z: 2000, ease: "power2.out"}) .to(el, {opacity: 0,}); }); You're adding an instance to your timeline FOR EACH element with that class, even empty ones, that's why your animations are too fast. ScrollTrigger is just doing it's job, which is updating the timeline's progress based on the scroll position. The problem here is that you have created an extremely long timeline in a short scroll amount (2000 pixels). I strongly recommend you to re-think your HTML structure and class names for creating the GSAP Timeline in order to correct this. Also I recommend you to just create your GSAP Timeline instance first and then plug ScrollTrigger into the mix in order to first get your animation working the way you expect. Watch this video in order to get a better grasp of this concept: Unfortunately we don't have the time resources to re-build your codepen example, eliminating every possible element that you don't want or need to animate, we'll leave that to you. Hopefully this helps. Happy Tweening!

Hi, The helper function does offer a series of config options. In this case the paddingRight option: let loop = horizontalLoop(".item", { repeat : -1, paddingRight: 30 }); That seems to solve the problem in your codepen example. Hopefully this helps. Happy Tweening!

Hi, Indeed it seems that for some reason SimpleBar doesn't work the way is expected when combined with ScrollSmoother. As you can see SimpleBar is adding a lot of stuff around the elements ScrollSmoother uses to create the effects: https://i.imgur.com/wyDuECq.png Unfortunately SimpleBar is not a GSAP product and we can't offer support for third party plugins and packages in these free forums. Good luck with your project! Happy Tweening!