Leaderboard

For sure! No worries. Would you happen to have a link to the video, that would be a huge help to make sure no one else gets the corrupted files. Not quite There are public plugins like ScrollTrigger and club plugins like ScrollSmoother. GSAP and the publicly available plugins are free for everyone to use as long as their usage falls under our standard license (most usage does). There are only two reasons you'd need to pay for anything: If you need the special commercial license that comes with Business memberships. This is only necessary if you're using GSAP in a site/product/game/app for which you're charging MULTIPLE customers a fee. See our licensing for details. If you need one of the members-only plugins like ScrollSmoother. You can use all the plugins for free on codepen, stackblitz and locally with our trial package though https://gsap.com/resources/trial/ We also offer discounts to students, so let me know if you're interested in that and I can DM you a coupon code. Sorry if this was a stressful first encounter with GSAP for you and thanks for deleting that file 💚

I found your repo here - https://github.com/IgCheer/fyrre I noticed that the ScrollSmoother and ScrollTrigger files had been heavily minified (further than we minify them) and the licensing info at the top had been removed. 😬 So, some good news first! I swopped in the latest files and the site works fine. However, This brings me to a slightly awkward conversation - ScrollSmoother is a (paid) club GSAP plugin. If you have an active license this isn't an issue, you can simply just download the latest files to use in the project. However, I don't see a membership on your account. If you acquired these files without realising it was a paid plugin we'd appreciate if you delete that file (even though I think that file is possibly corrupted) or sign up for your own membership for use of the plugins.

Hey there! So this isn't a GSAP set thing. I've tweaked the demo so you can see what's happening. (I 've added a viewBox so we can see the bounding box of the SVG more clearly) Untransformed circle (green) The circle, by default, is positioned exactly at [0,0] without the GSAP transform added. Perfect Transformed circle (red) If you add the x and y coordinates to a circle element it ends up at the correct place - this is because the circle starts exactly at [0,0]. Untransformed Hand (purple outline) The hand however, with the same transforms applied is positioned below and left [0,0]. So it's starting point is offset from the very beginning. This is because the bounds of a group just reflect the bounds of its contents. The hand path isn't drawn to start at [0,0], so the g isn't bounded by a point at [0,0] Adjusted path - (Green outline) I adjusted your path to start at [0,0] - awkwardly, the way the pointer was drawn means the start of the path is at the bottom of the hand 🫠 Adjusted and transformed path - (Red outline) With the adjusted start point the hand ends up on the dot as expected. https://codepen.io/GreenSock/pen/KKELpem I'd recommend redrawing the pointer so that the beginning of the path is the tip of the finger and starts at [0,0] - that'll solve your problem neatly, or just add some 'magic number' offsets now that you understand what's happening.

Great to hear you've solved your issue. Give it time, this was me 10 years ago. Wouldn't have it any other way now, combining the design with the development skills is amazing, you'll find that one day you can build what ever you design! Good luck with the project and happy tweening!

Hiya! You need to add pointer-events: none to that circle. It's interfering with the mouse events at the moment. Also just a heads up, but this is very old syntax. There's no TweenLite anymore - it works for now but we may deprecate it in future versions so it's best to use the latest. // old TweenLite.to(circle, 0.3, { opacity: 1, scale: 1, }); // current v3 syntax gsap.to(circle, { duration: 0.3, opacity: 1, scale: 1, }); There's also a more performant way to animate on mousemove - quickTo. Here's a demo https://gsap.com/docs/v3/GSAP/gsap.quickTo()/ Hope this helps!

hi @lizettevanboom I moved the styling for the div-2 inside the CSS to collect it all in one place also i used 1 scrolltrigger to pin div-1 with pinSpacing false and another trigger for the div-2 to animate it , ofc @mvaneijgen solution is more professional and organized 🫡 but I wanted to give another quick lazy solution https://codepen.io/ahmed-attia/pen/oNVOrxN?editors=0110

Hi @lizettevanboom That is where timelines come in! Personally I find the best thing to do when working with ScrollTrigger is to remove it! This seems counter intuitive, but ScrollTrigger is just animating something on scroll, so just focus on the animation at first and only when you're happy with the animation add ScrollTrigger back in. This way you can focus on one part at a time and it will save a lot of headache when debugging. So here is your demo with ScrollTrigger disabled for now, so that we can just focus on the animation. I like to add empty tweens to a timeline when working with ScrollTrigger that just do nothing for x amount of seconds. Here it does nothing for 1 second and your animation tween also has a duration of 1 second. Normally in GSAP things work with durations, but when working with ScrollTriggers with a scrub value these durations get converted to distance. It might be hard to wrap your head around, but maybe this example helps. Let's say we have four tweens that all take 1 second to animate and the total ScrollTrigger distance is 400px each tween will then take up 100px. If we remove one tween and make the last tween take 2 seconds the first two tweens will take still 100px, but the last tween will get stretched over the remaining 200px. I’ve placed some comments in your JS to better explain things, please be sure to read through them! Als je nog vragen hebt horen wij het graag en hoop dat het help! Happy tweening! https://codepen.io/mvaneijgen/pen/XWGQLrx?editors=0011

z-index only works on children relative to the parent. So of course you can do this, you just have to restructure your HTML to allow the functionality you want from the elements to be possible. You have to view a parent element as a paper page, and you can stack the elements how ever you like on that page, you just can't put the elements behind the current page or allow elements from other pages to be on top or below the page your currently on. https://codepen.io/mvaneijgen/pen/mdoYEye?editors=0010 Yeah sounds like a good route to go down research Flip can reparent elements so that could be a smart solution. Hope it helps and happy tweening!

Hi @FilipTheGod frist of welcome to the forum and thanks for being a club member! Sometimes it so hard to wrap your head around who something could work before you do some initial tests. I've just written a post how I go about creating something from scratch and how to prevent from getting stuck. Check it out below, the most import point for you might be... If I was you I would just start on code pen and try throwing some stuff at the wall to see what's going to stick. Try setting transformOrigin: "top center" in your tween that scales the logo. Also did you know GSAP animates to the default values of the browser if you do a .from() so the following code .fromTo( logoRef.current, { yPercent: 100, scale: 4, }, { yPercent: 0, scale: 1, duration: 1, ease: "none", } ) // This does the same, but is easier to read .from( logoRef.current, { yPercent: 100, scale: 4, duration: 1, ease: "none", transformOrigin: "top center" // transformOrigin goes here! } ) Hope it helps and happy tweening!

You surprised me a lot! I took these files from a video tutorial on using gsap ScrollSmoother from YouTube. I didn't know that these files were somehow modified to circumvent your license agreements. I will, of course, delete them. I just went to the gsap club page. As far as I understood from there, I can use the club's plugins (including ScrollSmoother) for free, if I do not need a commercial license (for example, I wanted to use this plugin for educational purposes). But I didn't really understand how to join the gsap club in this way. And you're saying that I'm not in this club. I would be grateful if you could explain to me if I can use these plugins for free (for educational purposes). And if so, how can this be done?

That's basically how HTML/CSS work, nothing to do with GSAP unfortunately. If the container of the texts container is above the canvas there is no way to put anything inside that container below the canvas element. The only way is to keep each text in the body tag with a fixed position and play with each text's z-index value, but again that is mostly an HTML/CSS thing rather than a GSAP one. Hopefully this helps. Happy Tweening!

@Rodrigo - lols at both of us saying "magic number" and "put it at x: 0 and y: 0"

Ohh I see @Cassie is working some SVG magic here ✨, so probably you should pay more attention to Her answer 😃

This doesn't sound right to me. It would be great to see what your timeline setup is. "Child timeline" Is making me think that you have nested ScrollTriggers (Like Jack mentioned) But just going off the code snippets you've posted, you're doing something like this? let tl = gsap .timeline() .to(".box", { rotation: 360 }) .eventCallback("onComplete", () => { masterScroll(); }); const masterScroll = () => { const tl = gsap .timeline({ scrollTrigger: { trigger: ".trigger", start: "top top", end: "bottom top", scrub: 3, markers: true } }) .to(".box-2", { rotation: 800 }); }; https://codepen.io/GreenSock/pen/oNVRgqo This is a strange setup, you're instantiating the second scrubbed timeline when the first timeline finishes. This is at a specific *time* - but as it's a ScrollTriggered timeline it's start is controlled by scroll position. This sounds like it's asking for conflicts and possibly just unnecessary. What are you trying to accomplish or avoid by doing this? Maybe we can help? Also - seeing as you're using React, this pattern raises some flags for me - The second "masterScroll" timeline isn't contextSafe as it's not created inside the useGSAP function on load, so it won't be cleaned up properly either. Pretty certain we could advise a better way of writing this if we saw a demo! If you'd like some eyes on it - Here's a React starter template that you can fork to create a minimal demo.

I can help you in building the web page. Please connect further to discuss in detail the same eMail : deepvyas71@gmail.com Awaiting your response Regards Deep

Ah, I see! Then something in your project is breaking it. Sadly we can't debug your live site for you. I would recommend disabling big chunks of CSS (or JS) in your project until the issue goes away then start introducing small chunks back in until the issue is back, this allows you to pin point the the culprit. If you have found what line cause the issue and you can't solve it post back here and we'll be happy to point you in the right direction.

Hey @Rodrigo, Thanks a lot I understood it and working fine now by the above method.

Hi, Besides echoing @Toso's request for a minimal demo maybe this example can provide a good starting point: https://codepen.io/GreenSock/pen/mdVyPvK Hopefully this helps. Happy Tweening!

Hi, Proper cleanup is very important with frameworks, but especially with React. React 18 runs in strict mode locally by default which causes your useEffect() and useLayoutEffect() to get called TWICE. Since GSAP 3.12, we have the useGSAP() hook (the NPM package is here) that simplifies creating and cleaning up animations in React (including Next, Remix, etc). It's a drop-in replacement for useEffect()/useLayoutEffect(). All the GSAP-related objects (animations, ScrollTriggers, etc.) created while the function executes get collected and then reverted when the hook gets torn down. Here is how it works: const container = useRef(); // the root level element of your component (for scoping selector text which is optional) useGSAP(() => { // gsap code here... }, { dependencies: [endX], scope: container }); // config object offers maximum flexibility Or if you prefer, you can use the same method signature as useEffect(): useGSAP(() => { // gsap code here... }, [endX]); // simple dependency Array setup like useEffect() This pattern follows React's best practices. We strongly recommend reading the React guide we've put together at https://gsap.com/resources/React/ Here are a couple of demos of the horizontal loop with the useGSAP hook: https://stackblitz.com/edit/vitejs-vite-cljwjs?file=src%2FApp.jsx This changes the loop direction based on the scroll direction: https://stackblitz.com/edit/vitejs-vite-auctqy?file=src%2FApp.jsx Hopefully this helps. Happy Tweening!

i, This is redundant: gsap.set(childElements, { opacity: 0, y: 115, willChange: "transform, translateY", }); The property translateY is actually a value of the transform property: https://developer.mozilla.org/en-US/docs/Web/CSS/transform#syntax This would be as easy as setting it in the CSS: .my-class[data-reveal] { will-change: transform; } Unfortunately performance is a deep topic and 99.99% of the times this comes down to rendering more than code processing/JS/GSAP issues. Browser rendering is most likely the bottle neck here. Maybe use GSAP MatchMedia to create simpler animations and use smaller images for smaller screens as well. Other than that I can't think of a way to solve this. Hopefully this helps. Happy Tweening!

You can pass the helper function the repeat property an then set it to -1 if you don't want it to stop. Hope it helps and happy tweening! https://gsap.com/docs/v3/HelperFunctions/helpers/seamlessLoop https://codepen.io/mvaneijgen/pen/poYBwBB?editors=0010

Here are some of the problems I noticed: You were adding a new "mouseleave" event handler on EVERY "mousemove" event, so when the mouse left the button, there were probably thousands of those firing, all trying to tween the same properties of the same element. Massively wasteful. You weren't applying any overwrite logic, so you were creating a bunch of overlapping tweens, all controlling the same stuff. I'd recommend using gsap.quickTo() for the best performance on things where you're constantly interrupting and trying to go to new destinations. You were using pageX/pageY instead of clientX/clientY for measurements, thus after scrolling the calculations would be incorrect. You were only applying the magnetic affect to one .btn instead of all of them. Just loop through them accordingly. You were using an onscroll listener, but you might want to consider using ScrollTrigger instead because it simplifies things. Maybe this will help: https://codepen.io/GreenSock/pen/QWooxbG?editors=0010

Hey alexb148. ScrollTriggers callbacks are perfect for this sort of thing. For example: ScrollTrigger.create({ trigger: elem, onEnter: myEnterFunc, onLeave: myLeaveFunc, onEnterBack: myEnterFunc, onLeaveBack: myLeaveFunc });

Hello nexie, and Welcome to the GreenSock Forum! Here is a cool codepen by jamiejefferson, that shows a simple explosion (particles) http://codepen.io/jamiejefferson/pen/rJtjw/ Here is a fork (copy) of his codepen with the particles animating onDragStart and stop onDragEnd: http://codepen.io/jonathan/pen/vENome/ See TweenMax and Draggable docs for more info. Hope this helps get you started or gives you some ideas! Update: Carl beat me to it again