Leaderboard

The ScrollTo plugin scrolls to an element on the page, but your element is not part of the flow of the page anymore, because all the text are stuck on the middle and just get shown or hidden via an animation. So instead you want to animate to a point in the timeline, labels are great for that! You can just place a label on the timeline and then use a function like .labelToScroll() https://gsap.com/docs/v3/Plugins/ScrollTrigger/labelToScroll()/ to tell scrollTo the scroll to that label! Side note: It is great that you've find all these demo's you can modify, but make sure you update the GSAP tools to use the latest versions! This usually solves 90% of the issues you might have Hope it helps and happy tweening! . https://codepen.io/mvaneijgen/pen/bGZOgQb?editors=0010

Your demo was kinda big and loaded lots of things! I thing GSAP was getting loaded like 3 times and an old version of that. I removed most unnecessary code so that we can just focus on the demo, it might look a bit different. The beauty of Codepen is that you can just write html css and js and don't have to worry about your live setup. I would recommend checking out the stagger docs https://gsap.com/resources/getting-started/Staggers you'll see that opacity is not a stagger property this is only something a tween can have. Also the stagger is for the current tween, so if you also want things to animate out you'll have to build that animation. So you need to create an extra tween that animates the text out and also set a stagger to that. Then with some position parameter magic you can have that tween start at the same time as the previous tween, but have it wait for the tween to complete first. I've also changed your CSS, so that the text is already visible on page load then we can just animate .from() an opacity: 0 and GSAP will animate to the default 1. If you're are worried about flash of unstyled content (FOUC) check out https://gsap.com/resources/fouc/ I’ve placed some comments in your JS to better explain things, please be sure to read through them! I would recommend taking a look at the awesome getting started guide https://gsap.com/resources/get-started/ Hope it helps and happy tweening! https://codepen.io/mvaneijgen/pen/poYqEBL?editors=0010

Hi @maeOlives welcome to the forum! Instead of trying to wrap your head around how that would work, what if we already start with the seconds overlapping! Just some CSS to set all the sections in place where you want them to be, stacked on top of each other. Then we first focus on the animation. 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. And when you're happy with the animation uncomment the ScrollTrigger code and see how it would work with ScrollTrigger. I’ve placed some comments in your JS to better explain things, please be sure to read through them! Hope it helps and happy tweening! https://codepen.io/mvaneijgen/pen/BabvKxr?editors=0010

Right now you only loop through the sections, but you want to change the .nav-link one by one, so you need another loop that does this but then for each .nav-link, this does mean that we're creating as many ScrollTriggers as there are sections * .nav-link items, which means there are a lot! You do have to calculate the offset of each .nav-link I now used some random fixed values which are good enough to show in the demo and explain the concept, but you probably want to get that dynamically so that it is more robust on different screen sizes. There is probably a better way of doing this. A timeline animation with a stagger what just changes each .nav-link color one by one instead of a class and than setting the ScrollTrigger to scrub: true, so that it plays the animation on scroll, but that is why Codepen is great. Personally I use codepen to try out new ideas, I usually then just keep forking my pen to try out different ideas, either because I think it could be better or my original idea was not working. Usually at version 10 I got something I'm happy with. Creating forks of your pen will allow you to fall back at earlier ideas if something new is not working. https://codepen.io/mvaneijgen/pen/poYqNPx?editors=0010 In this case if you're not going to animate things why not just set mix-blend-mode: difference; in CSS I'm not sure if there is a better blend more for the colors you use, but this gets you 90% there for free. https://codepen.io/mvaneijgen/pen/zYbyopO?editors=0100

Hi @nightfury1720 welcome to the forum! I'm no React expert, but there are a few things you want to keep in mind working with React or use the new useGSAP() hook instead of useEffect(), which solves most of these out of the box. 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. And check out this demo and the MotionPath docs https://gsap.com/docs/v3/Plugins/MotionPathPlugin/static.getRelativePosition() Hope it helps and happy tweening! https://codepen.io/mvaneijgen/pen/rNdzEpe?editors=0010

I know this is an old post, but this worked like a charm. Safari seems to have some differences in the way that it handles the scrollposition's values (given the way the viewport is calculated), causing the autokill: true to be forcibly called. I just set it to off for safari and now it works fine. I also want to mention a fix for a similar problem i had a month ago, and it's related to the metadata tags of the website. Certain gsap scrollTo features seem to break unexpectedly on Safari ( in my experience, using any of the features that use translate() ), but another forum member had written something along the lines of needing some specific metadata tags in your html head. <meta name="viewport" content="width=device-width, height=device-height, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no"> Thanks again for the fix.

Happens to all of us, no worries 😂 Glad that it helped! 🥳 Happy Tweening!

Heya! I'm looking into this - thanks so much for flagging it. Did you manage to access the repo with the token from the dashboard page?

I’m not at my desk right now, but from a quick glance, it looks like the problem is that you didn’t register useGSAP as a plugin: gsap.registerPlugin(useGSAP, ScrollTrigger); Normally that isn’t really necessary but since you’re using the gsap-trial package too and it’s in a special environment like Stackblitz, you’ve technically got 2 different gsap objects being loaded. The one that’s creating the context in the useGSAP() hook is different than the one you’re using to create your actual animations. You don’t really need to understand all that - the solution is probably to just register the useGSAP hook as a plugin. Does that resolve things for you?

Yeah honestly I don't follow all the logic you have there because is also connected to the world.x/world.y values and those are set in a different place in your code. I believe that this is a far simpler and cleaner approach: https://codepen.io/GreenSock/pen/mdqLWVV I've been fiddling with this for a bit and I'm afraid that this is not the simplest thing to achieve and is mostly a custom JS logic issue rather than a GSAP related one. Unfortunately this is beyond the scope of the help we can provide in these free forums. You can contact us for paid consulting or post in the Jobs & Freelance forum in order to get help there. Good luck with your project! Happy Tweening!

That is something you have to ask your swiper plugin. We like to scope these forums to GSAP related questions and we can't help you debug third party plugins. If you would use our own Draggable plugin, everything would work as you expect! Hope it helps and happy tweening! https://codepen.io/mvaneijgen/pen/LYaMxwB?editors=1111

Hi @Rodrigo, I figured it out... ScrollTrigger.normalizeScroll helps with the window scrolls as stopPropagation too but it needs to be tested in any case since it still worked a little bit buggy in the beggining. Basically you need to target the correct container. As for the Inertia bug I found out that adding a border to the #scrollContainer prevented the user to drag back to the first slide. Using outline instead worked for me. After all this time it was basically a CSS fault. I am leaving the codepen with the bug and a comment for anyone who might need it to use outline instead. At least for this case scenario. Hopefully it will help the next one trying to do something similar. Thank you all for your time and effort!

I've minimalised your demo a bit so that we can focus on the relevant parts to see what is happening. This is the tween that has the issues right? I'm also not clear what the animation should do right now and what it is doing instead. https://codepen.io/mvaneijgen/pen/YzgdGqg?editors=0010 I've never worked with mask-image before. I've written the following guide how certain masks work with GSAP, so maybe if I understand this one I can add it to the guide. When animating complex strings in GSAP you have to make sure that both strings are the same (only have different values), so animating from "60% 60%" to "center 32%", can't really work, because how would GSAP know how to convert center to 60%. This is the same logic as in my guide animating the clipPath. I do know that browsers don't really like calling to insane values like 1400% and you're better of setting the final size to the image and then animating .from() some value like 1% to the default value of 100%. To me you're just animating some logo to a bigger scale, and I'm wondering if you need mask-image at all. And instead just load a transparent SVG directly in the browser and scale that using the transform scale property. I hope these point already guide you in the right direction otherwise let us know what else we're missing here. Happy tweening!

Hey Nick, Thanks for the kind words you're more than welcome! 💚 If at any point you can replicate the issue and create a demo that shows it, please be sure to post back here and we'll jump into it as soon as we can in order to help you solve this. Just out of curiosity did you tried the stopPropagation() method on the wheel event as well? Happy Tweening!

Hi, I believe that the ScrollSmoother issue is more related to something else in your setup, here is a fork of your demo using that approach and the preventDefault approach seems to work the way you intend: https://codepen.io/GreenSock/pen/MWxzppQ As for reducing the amount of items, you could play as well with the throwResistance config: throwResistance : Number - A number (1000 by default) that controls how much resistance or friction there is when the mouse/touch is released and momentum-based motion is enabled (by setting inertia: true). The larger the number, the more resistance and the quicker the motion decelerates. (requires InertiaPlugin and setting inertia: true, otherwise throwResistance will simply be ignored.) I'm pretty sure that there is a way to achieve this with code, but I can't think of one right off the top of my head. The easiest option is to drop inertia and just use the onDragEnd callback to move one element at a time, which is worth noticing that in your demo is not doing much. If I comment out the snap section and the inertia config and leave the onDragEnd callback, nothing actually happens, so you might want to check that Hopefully this helps. Happy Tweening!

Hi @Harley Dev and welcome to the GSAP Forums! Your demo actually doesn't have any GSAP implementation in it. What I would suggest you is to go to our Learning Center and check our getting started section: https://gsap.com/resources/get-started Is far better to just get the animation working the way you intend first and then add ScrollTrigger to the mix. ScrollTrigger only controls a GSAP Tween/Timeline based on the scroll position, nothing more. Finally you can have a look a these demos in order to see how they work: https://codepen.io/GreenSock/pen/rNJQPXz https://codepen.io/GreenSock/pen/BarmbXq Hopefully this helps. Happy Tweening!

I assume you meant to do something like this?: var items = gsap.utils.toArray(".gallery-item__inner"), cursor = document.querySelector(".me"), xTo = gsap.quickTo(cursor, "x", {duration: 0.3, ease: "power3"}), yTo = gsap.quickTo(cursor, "y", {duration: 0.3, ease: "power3"}); gsap.set(cursor, {xPercent: -50, yPercent: -50, autoAlpha: 1, scale: 0, pointerEvents: "none"}); window.addEventListener("mousemove", (e) => { xTo(e.pageX); yTo(e.pageY); }); items.forEach((item) => { item.addEventListener("mouseenter", () => { gsap.to(cursor, {scale: 1, duration: 0.2, overwrite: "auto"}); }); item.addEventListener("mouseleave", () => { gsap.to(cursor, {scale: 0, duration: 0.01, overwrite: "auto"}); }); }); https://jsfiddle.net/t6byepfa/

Hi, You have a syntax error: var tl = gsap.timeline(); var items = tl.utils.toArray(".gallery-item__inner"), // Here cursor = document.querySelector(".me"), xTo = tl.quickTo(cursor, "x", {duration: 0.3, ease: "power3"}), // Here yTo = tl.quickTo(cursor, "y", {duration: 0.3, ease: "power3"}); // Here The issue is that you're referencing the timeline instance. There is a difference between an instance and GSAP core constructor. The utils object and the quickTo method is part of the core constructor, not a timeline instance. https://greensock.com/docs/v3/GSAP https://greensock.com/docs/v3/GSAP/Timeline This seems to work the way you expect: var tl = gsap.timeline(); var items = gsap.utils.toArray(".gallery-item__inner"), cursor = document.querySelector(".me"), xTo = gsap.quickTo(cursor, "x", {duration: 0.3, ease: "power3"}), yTo = gsap.quickTo(cursor, "y", {duration: 0.3, ease: "power3"}); Hopefully this clear things up. Let us know if you have more questions. Happy Tweening!

Heya! Not a silly thing, this stumped me for a bit too. So the end trigger is set as window.innerWidth * 3 - which is a specific number. So both end triggers are set at one specific point on the page. You want the end triggers to be relative to the start point of the image. At different points down the page. end: () => `+=${window.innerWidth * 3}`, https://codepen.io/GreenSock/pen/GRxLGae?editors=0010 Hope that helps!

My pleasure! Good to hear it works for you ? I'll also add the original demo I took as a basis for this - just in case anyone is wondering wondering why there is a ternary operator on the x-property of the tween; It's just because the original demo is fake-scrollable in left and right direction. If you only need it to be tweened in one direction you can of course trim things down a bit there. Good luck with the project and happy tweening https://codepen.io/akapowl/pen/dyvygmj

Hi Jack. Thanks again for getting back to me. So after days of trying out different ways of firing my event listeners and reading various posts all over the web I finally figured out the problem. As it turns out, it had nothing to do with Greensock or the scrollTo plugin. Good news! The issue is specifically an iOS Safari issue on iPhone X. Perhaps known by some (not by me) the issue was the location of where I had my button placed. It was in the lower corner of the viewport so that when it was ‘clicked’ the iPhone’s action bar (only in Safari) interfered with my handler function. The solution is frustratingly simple. Move the button from the bottom of the viewport, make sure to have { autoKill:false } set and everything should work as expected. At least it did in my case. From what I’ve read, place buttons that have functionality associated with them above the lower 10% of the viewport and one shouldn’t encounter any glitches. As I said, seemed to only happen with iPhones X. There are other workarounds that people have written about, but… This is simple. Hopefully, I’ve saved someone a few hours.