Rodrigo

Hi @Ajapro and welcome to the GSAP forums! Maybe something like this could be a good starting point: https://codepen.io/GreenSock/pen/bGzNdMy Hopefully this helps. Happy Tweening!

Hi @anisos, You already asked basically the same question. Please do not create duplicated posts. In the other thread you were provided with some examples that take a similar approach. Unfortunately what you're trying to do is not a simple task and we don't have the time resources to provide fully working apps/examples or debug complex logic issues for our users. We do offer paid consulting services and you can post in the Jobs & Freelance forums in order to get help there. Happy Tweening!

Hi @Ninthony, What exactly you mean by that? The ScrollSmoother Plugin is not actually being used in the latest example Jack added to the thread. The example uses the ScrollTo Plugin in order to animate the scroll position of the window object to the specific scroll position returned by the method used for that. The other thing that could lead you to think that is the fact that the ScrollTrigger configuration uses scrub: 1. This is what the ScrollTrigger docs say about that: scrub Boolean | Number - Links the progress of the animation directly to the scrollbar so it acts like a scrubber. You can apply smoothing so that it takes a little time for the playhead to catch up with the scrollbar's position! It can be any of the following Boolean - scrub: true links the animation's progress directly to the ScrollTrigger's progress. Number - The amount of time (in seconds) that the playhead should take to "catch up", so scrub: 0.5 would cause the animation's playhead to take 0.5 seconds to catch up with the scrollbar's position. It's great for smoothing things out. Maybe if you change it to scrub: true you'll get the effect you're looking for. If not please provide a minimal demo that clearly illustrates the issue you're having. Hopefully this helps. Happy Tweening!

Hi, The way to go in these cases is animating the clip-path property. You can check the cross or polygon types: https://bennettfeely.com/clippy/ Here are a couple of examples for implementing such animations with ScrollTrigger: https://codepen.io/GreenSock/pen/oNJRjNL https://codepen.io/GreenSock/pen/eYbqrLZ Hopefully this helps. Happy Tweening!

Hi @denniszyche, Sorry for the late response 🙏 I created an example using the latest version of React Router Dom with the latest version of GSAP/ScrollSmoother and can't replicate the issue you mention: https://stackblitz.com/edit/stackblitz-starters-9xvpi2 If you can fork that and make it look like your setup and replicate the issue it'd help us to identify it. Just please remember to keep the demo as minimal as possible. Happy Tweening!

Hi, This is the most basic approach I've seen to something like that: https://codepen.io/antonio78/pen/LYMvOjL After that, as @Shrug ¯\_(ツ)_/¯ mentions, is adding layers of complexity based on what you want to do. Happy Tweening!

Hi, Please don't create duplicated threads. We are keeping track of this one, so updating this should be enough. Thanks! I checked the other thread and I think it would be OK to delete it so we can focus just on this. Please confirm that the other thread doesn't have any information that is not present in this one in order to safely delete it without loosing any critical information about the issue. Circling back to the issue, I see what you mention and I'll look into it, so please be a bit patience while I try to figure a way to make it work. I have pretty good idea of the issue: When the page loads with the particular hash, the browser looks for that element and sets the scroll position accordingly. The problem is that all your elements are in the same vertical position and the scroll position is set there. Granted there is some odd behaviour that I'll look into it but on page load there is no way ScrollTrigger knows exactly where the scroll position should be based on the URL hash. Finally I think this is a far simpler setup for your demo, at least to create the horizontal layering: https://codepen.io/GreenSock/pen/poGzBpB Happy Tweening!

Hi, The demos in this thread should provide a solid starting point: Hopefully this helps. Happy Tweening!

Hi, Yep everything looks right to me, good job! 🙌 Probably there could be other ways to do it, but most likely would be variations of what you have in place already. Happy Tweening!

Hi @jamesstephensaul and welcome to the GSAP forums! Thanks for being a premium user and supporting GSAP! 💚 Unfortunately your demo is not working. Maybe you could try forking one of our Vue3 starter templates from this collection: https://stackblitz.com/@GreenSockLearning/collections/gsap-vue3-starters Happy Tweening!

Hi, This is a fork from a codepen by @Cassie https://codepen.io/GreenSock/pen/eYxOXPP Here is the original one with Flip Plugin magic in it: https://codepen.io/cassie-codes/pen/abyZYym Hopefully this helps. Happy Tweening!

Hi, Jack indeed offers a detailed explanation here: Happy Tweening!

Hi, This is the simplest way I can think of: https://codepen.io/GreenSock/pen/LYqPxJE Hopefully this helps. Happy Tweening!

Hi, The issue is happening regardless of the Draggable instance. I think this might be related to your HTML/CSS setup more than a GSAP/ScrollTrigger/Draggable problem. Here is a simpler setup that seems to work OK: https://codepen.io/GreenSock/pen/PoVYWJb However I would definitely study this example (no need for the container animation and ScrollSmoother) and see how it gets done with Observer: https://codepen.io/GreenSock/pen/NWMxRvM Hopefully this helps. Happy Tweening!

Hi, A few notes. The easing function doesn't go in the scrollTo configuration: // Wrong gsap.to(window, { scrollTo: { y: value, ease: "power3.inOut", }, }); // Right gsap.to(window, { scrollTo: { y: value, }, ease: "power3.inOut", }); In your sections loop, why are you creating two ScrollTrigger instances? You could create one with different start end points and use the right callbacks in order to trigger the function that creates the tween with the ScrollTo Plugin. Finally is always better to use markers during development in order to know exactly when ScrollTrigger is being activated. Not only helps debugging in case there's need to, but also it helps getting a better understanding of how those points and callbacks work. Happy Tweening!

Just add the same code for when the browser passes the other breakpoint going up (screensize-wise of course). You created another thread for this where @mvaneijgen already suggested using GSAP MatchMedia. You should really check it out in order to see how it works. Happy Tweening!

Hi, This is a simple example of using the custom snap functionality: https://codepen.io/GreenSock/pen/OJdLbme Basically you check the value passed by the snapTo callback and if t matches certain criteria you can return a specific value, a specific value from an array or calculation or null if you don't want any snapping at all. Is worth noticing that using snap as a function works in the same way, sans the extra configuration properties in it: scrollTrigger: { trigger: ".wrapper", start: "top top", end: "+=" + (100 * panels.length) + "%", pin: true, scrub: true, snap (value) { if (value > 0.15 && value < 0.35) { return 0.25; } if (value > 0.65 && value < 0.85) { return 0.75; } return null; }, } Hopefully this helps. Happy Tweening!

Hey, I'm glad to read that it was solved, but I'm curious about the fact that it didn't worked as it should in development mode. I'll dig into this at some point and post back with what I can find. The only reason I can think for this not working is that at some point in your development environment you weren't using GSAP Context. Finally read the resources in this page in order to learn how to use GSAP in React environments: https://gsap.com/resources/React Happy Tweening!

Hi, Maybe set the image/element to use the full width, then use a set() instance to reduce it's scale and then create an instance that takes it back to scale 1: gsap.set(image, { scale: 0.135, transformOrigin: "bottom left", }); gsap.t(image, { scale: 1, transformOrigin: "bottom left", scrollTrigger: { // ScrollTrigger config here }, }); I can see the issue on an iPad on both chrome and safari, my best guess is that the browsers are taking a snapshot of the image and scaling it up messes the resolution of course. Now as far as I can tell that shouldn't happen at all with raw SVG on the HTML code. Hopefully this helps. Happy Tweening!

We prefer a minimal demo (as small as possible) on Stackblitz rather than a full repo/project. Is faster and easier to debug. Happy Tweening!

Hi, On top of Mitchel's great advice you can always use the previous() method in order to get the previous ScrollTrigger instance's start/end point and use that as a reference: const switchTL = gsap.timeline({ scrollTrigger: { trigger: ".pink", start: (self) => self.previous().start * 1.5, end: (self) => self.previous().end - 100, toggleActions: "play none reverse reverse", markers: { indent: 200 } } }); Hopefully this helps. Happy Tweening!

Hi, You could try normalizeScroll(): https://gsap.com/docs/v3/Plugins/ScrollTrigger/static.normalizeScroll() Also you could try ignoreMobileResize: https://gsap.com/docs/v3/Plugins/ScrollTrigger/static.config() Hopefully this helps. Happy Tweening!

Hi, I'm getting a 404 with the GitHub link. We have a collection of starter templates for NextJS & GSAP here: https://stackblitz.com/@GreenSockLearning/collections/gsap-nextjs-starters You can fork one of those or create a minimal demo (no need to fork your entire project, just the relevant part or use just some colored divs to show the issue) using Stackblitz (free) in order to illustrate the problem you're having. Happy Tweening!

Hi, You're in scroll land now, so duration in seconds has nothing to do with it. It's all about the amount of pixels that you scroll up/down as @Cassie explains here: Hopefully this helps. Happy Tweening!

Yep that I can see. The problem is that I can't seem to understand what's the issue you're having or what you are intending to do, that's why I asked to be as specific as possible about your objective here. Happy Tweening!