mvaneijgen

I'm not completely sure what animation you're referencing. And on this forum we love helping with GSAP-related questions, but unfortunately we just don't have the resources to provide free general consulting or "how do I recreate this cool effect I saw on another site?" tutorials. That said most of the animations seem to be using some sort of mask which they then morph to different shapes. The MorphSVG seems to be the perfect candidate for that, see the morphSVG plugin And here are some topics that might get you started. Hope it helps and happy tweening!

I'm sorry to say, but I'm really getting sea sick when scrolling on your page. The example you've linked doesn't hack the scroll of the bowser and probably has different values when running the logic. If you're looking for a smooth scroll library that is build for ScrollTrigger I would suggest looking in to the SmoothScroll plugin from GSAP. That said, if I change the y: value to a negative value the elements move up. https://codepen.io/mvaneijgen/pen/qByYoLe?editors=1010

Hi @BruceST, you where already using the position parameter and with this you can also set a relative offset to a tween, eg "-=0.3" will start the animation 0.3 seconds before the previous ends. In your setup the only tricky part is that you don't want this to happen with the first item. So what I did is check if the index of your loop is not 0 and then add this offset to your tweens. Keep in mind that a default tween in GSAP (if you do not define it) is 0.5 seconds. Hope it helps and happy tweening! https://codepen.io/mvaneijgen/pen/abjGqqV?editors=0010

Hi @AlejandroAlonzo welcome to the forum! You had it set up that the previous trigger created the next trigger, so only when the previous trigger was completed the would the next animation be crated, if you thus want to jump to animation 03, it doesn't work, because it hasn't been created yet. I would how ever also suggest looking in to https://greensock.com/docs/v3/Plugins/ScrollToPlugin you have it already loaded, and as the name implies it will scroll to the specific part on the page, instead of the browser just jumping to that part of the page. It is always great to first create working code before optimising, I personally would have like that you tried your hand your self at a looping version and posted both versions, that way we could see what your thought process was and how we could better help you. I would encourage you to read through my version and see if you understand what is going on, I've just copied one version of your setup and placed it in a .forEach loop and just filled in the blanks and scoped everything to that particular trigger in the loop. I don't see what you mean? You are using the GSAP 2 syntax in your code I would recommend using the v3 syntax, much more readable. And you are using some really fast animations 0.01 translates to 10ms which is really fast! If you don't want animations and just have it change instantly just use a .set() instead of a .to() tween. I Hope it helps and happy tweening! https://codepen.io/mvaneijgen/pen/eYjMqBq?editors=1011

Hi @aanscharius welcome to the forum! This really looks like the example on https://greensock.com/docs/v3/Plugins/MotionPathPlugin/static.convertCoordinates() https://codepen.io/GreenSock/pen/GRJEGzB I'm no pro at he convertCoordinates function but this video dives really deep in it. Hope it helps and happy tweening!

Sorry, I still don't understand what you mean. Could you maybe formulate your question or edit your pen with the issue you're facing (even pseudo code how you think it should work, really help)?

What are you referencing with: Because right now you're animating blocks and do nothing with text opacity. Have you seen the following post, this is a really great tool to have in your belt when working with GSAP I was wondering, why you would have to first block change size with `width`, because all the others use scaleX and this is much more performant.

That is the thing with GSAP tools, you can build everything your heart desires, so the videos on the YouTube channel don't usually focus on one particular part, because the concept that is being talked about could be used on multiple solutions just by tweaking some parameters. Personally I've watched every video on the channel and every time I watch them again I'll learn something new. There is so much general knowledge to glean from them!

Have you seen the latest ScrollTrigger video on the Greensock YouTube channel? It amost exactly looks like your example website, but in a reverse stacking order.

First off, if you want to animate things with GSAP you can't use transitions in your CSS, if you do CSS and GSAP will fight for control over who gets to animate and the browser will thus insert a transition each time GSAP animates something. Personally I like to start with the animation it self. The best thing to do 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. With this I always like to start with a timeline, so that I can easily toggle ScrollTrigger on and off. start: 'top bottom', means when the bottom of the browser hits the top of the element play the animation, this doesn't really work, because the start trigger will then always be below element trigger. I've now set them to be on the top with an offset of 200px, so that you can see when it happens. I had to rewrite your setup and because nothing much changes between the left or the right I just check if the element has the .right class and change it xPercent value. Hope it helps and happy tweening! https://codepen.io/mvaneijgen/pen/PoBRGoQ?editors=1111

Hi @nthony welcome to the forum! What have you tried already? We love to see minimal demo's, that way we can see your thought proces and thus better help help you. The stagger can be a simple property, where you just feed it a number, this will then be the duration each stagger takes after the previous one, but it can be its own object to where you can specify it a lot of powerful features. Like amount: [Number]: The total amount of time (in seconds) that gets split among all the staggers. So if amount is 1 and there are 100 elements that stagger linearly, there would be 0.01 seconds between each sub-tween's start time. If you prefer to specify a certain amount of time between each tween, use the each property instead. This seems like exactly what you're describing. From the docs https://greensock.com/docs/v3/Staggers

I've took a better look at your setup, I've never used a 0 duration tween, so I changed it to 0.1 and now I can't seem to reproduce the issue anymore. https://codepen.io/mvaneijgen/pen/LYBeGVO?editors=1000

I see it now, can you maybe provide your browser version. I'm on Safari 16 and there it never happens, but in Chrome 109.0.5414.87 it does. For me it only happens when I flick my scroll wheel really fast, so if you have a better description on how to reproduce the issue, that would be really helpful

I couldn't find your issue in your pen, but did you know that you can use the toggleActions property for what you're doing with the call backs String - Determines how the linked animation is controlled at the 4 distinct toggle places - onEnter, onLeave, onEnterBack, and onLeaveBack, in that order. The default is play none none none. So toggleActions: "play pause resume reset" will play the animation when entering, pause it when leaving, resume it when entering again backwards, and reset (rewind back to the beginning) when scrolling all the way back past the beginning. You can use any of the following keywords for each action: "play", "pause", "resume", "reset", "restart", "complete", "reverse", and "none". From the docs https://greensock.com/docs/v3/Plugins/ScrollTrigger I don't know on the top of my head, but maybe this is more performant. https://codepen.io/mvaneijgen/pen/wvxpKQQ?editors=0010 Where there any steps to reproduce the issue like the following I am expecting the purple div to spin 360degrees the purple div only spins 90deg Open the demo on mobile in IOS safari and scroll down to the grey container

ScrollSmoother works great with ScrollTrigger, so I would leverage the power of the two to pin elements on the page. Here is an example. Hope it helps and happy tweening! https://codepen.io/mvaneijgen/pen/gOjXejj?editors=1011