mvaneijgen

Thanks for the demo, that really helps! What I have right now is a separate timeline for your images. This is a full timeline and not just a GSAP tween, because you want to have control over it. This timeline is called when the ScrollTrigger `onEnter` is triggered and when `onLeave` is trigged the timeline plays in reverse. These animations run completely on there own and have nothing to do with the scrub animation of your main ScrollTrigger. https://codepen.io/mvaneijgen/pen/abEzLBE?editors=0010

Your animation code doesn't care what images are in your animation, so you can easily create a demo with your images swapped out, which I suggest if you want a good answer to your question but what I would do is create a separate timeline with the animation you just want to have play, make that a function and call that function onStart of the scrollTrigger timeline. This way the animation will just start playing no matter if the user is scrolling or not.

I've created functions of all your timelines so that I can call them when ever and add them to other timelines. I've removed the if statement in each click handler, because I couldn't understand what they did. The only issue I have right now is that if the animation is still rotating and you click the button again it will keep rotating and not reset it self https://codepen.io/mvaneijgen/pen/LYeYpjN?editors=0010

I've set the height to zero and set visibility to hidden and then animate the height to auto and updated autoAlpha to unhide the elements. Is that what you are looking for? https://jsfiddle.net/etfqkhb4/

I've uncommented some of your code, because I'm not sure what it is doing. What I have now is that the animation scales to a factor of 2 and (rotates from the scale it is now eg 1), then the second animation scales to 0 and rotates and I play the animation in reverse from the very end of the hole animation https://codepen.io/mvaneijgen/pen/gOXVWeW?editors=0010

Hey, is something like this what you're looking for? https://codepen.io/mvaneijgen/pen/wvPVdBg?editors=0010 I've wrapped your animation in a scrollTrigger.batch to add a trigger on each element. You can play with the start and end positions to have it start earlier or later when scrolling. That is what the markers are for. Take a look at the docs if you want to learn more https://greensock.com/docs/v3/Plugins/ScrollTrigger/static.batch() you can also add the following css to `.img_container` and then set `autoAlpha: 0` to the first animation to make them hidden at page load and only show them when animating // css .img_container{ visibility: hidden; } // js tl.from(batch, {y: 100, duration: 1, ease: "power2.outIn", autoAlpha: 0})

This is always a thing with designers and developers, but the thing is normal people don't resize their browser often, that is only something we do all the time, so I wouldn't worry about it too much. But if you really like a fix why don't you listen for browser resize and then reinvoke your menu function so that it rerenders it self? window.addEventListener("resize", yourFunction);

If I read you question correctly this tutorial exactly discribes your issue

Can you try and make a codepen? Because as far as I know NOT defining the height of the container will just make it "auto height"

The spacing is created if you "pin" an element. If you don't want this to happen you can set `pinSpacing: false`, but this will pin the header until you proceed the scroll position and thus text will be underneath the header https://codepen.io/mvaneijgen/pen/OJOeZYb I don't know what you are going for, but I would either not pin the header or have the header 100% of the browsers height. You can also try to only pin the text.

If you moved your code to a codepen where you would demonstrate the issue people might be able to help you. But making your site responsive has nothing to do with animations (GSAP). So you're asking this in the wrong forum, but if I take a quit look at your site I see at the "our team" grid you have CSS for a grid of always three images, but this will not fit on smaller screens .grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } I would change this code to something like this .grid-cols-3 { grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); } This way the columns will fit them selfs and be at a minimum 250px. Here is a video tutorial about responsive css grid But I would recommend putting a bit more effort in posting a question, this way you'll get better answers

Have you seen https://greensock.com/docs/v3/Plugins/ScrollTrigger/static.matchMedia() you can write media queries like you do in CSS to change the animation based on screen size

That will make it a lot more complicated. You could try and make a function that handels that kind of logic, but maybe you then need to ask your self if the randomness is that important? Because you could also just set the rotation by hand (first -60, second 40, third, -30, ect) and if you then implement this with a wrap() function (https://greensock.com/docs/v3/GSAP/UtilityMethods/wrap()) then you know the order and can adjust the rotation accordingly.

What I would do is set the rotation to an initial value with .set() and then animate them to a random rotation. I've set the random rotation to "random(-60, 60)" this will set their rotation to a number between -60 and 60 and set the animation to "random(['-=60', '+=60'])" this will animate them always to a fixed 60 degrees either way, but from their current position. https://codepen.io/mvaneijgen/pen/qBVozry?editors=0010

Have you seen findShapeIndex() (https://greensock.com/docs/v3/Plugins/MorphSVGPlugin) index within the docs? https://codepen.io/mvaneijgen/pen/wvPPpBY With `shapeIndex: [4]`, It is not exactly what you want, but you can get it a lot closer https://codepen.io/mvaneijgen/pen/WNXXdoW It has to do with the number of points on the shape and your stage-3 arch has a lot more points that need to move. I would try when you've got the final shape add some more points to your stage-1 shape, so that it doesn't have to move the points around so much

Yes, making it one path would make it a lot easier to tweak the easing, but if you make both easings the same and have it set to `inOut` you could get it closer to what you want. Here is one that slows down at the outer sides of the animation https://codepen.io/mvaneijgen/pen/podwjJM?editors=1010

I don't know the reason for it being two paths, but that aside. I've removed the easing, so the movement is now linear all the way around and the second animation starts as soon as the first is done (by removing the position parameter `"-=0.25"`) https://codepen.io/mvaneijgen/pen/gOXRpzX?editors=1010

Your demo is not working because the only Javascript you load in the JS pane is ScrollTrigger. You are missing jQuery and GSAP https://codepen.io/mvaneijgen/pen/dyZMgay?editors=1010 What I can see in your code is that you target the same element multiple times, I don't know if that could be the culprit, but it certainly won't help. GSAP allows you to string animations right after each other by just adding them to the timeline, it seems like your want to have several animation to happen at the same time, you can add these to the time line and then defining a starting parameter. Read more here Both these elements will animate at the same time tl.to(targetElement, { top: "-88%", }, '0'); // Start at zero in the timeline AKA start at the begging tl.to(OtherTargetElement, { top: "-88%", }, '<'); // Start at the same time as the previous animation in the timeline AKA at the beginning

The beauty of GSAP is that you can build with it what ever your hearth desires. I've build a carousel with GSAP I'm really happy with, because I can extent it with animations if needed. Here is a basic version https://codepen.io/mvaneijgen/full/GREebPK and here a more elaborate version https://codepen.io/mvaneijgen/full/YzQZBgr

I did forget to include the codepen link https://codepen.io/mvaneijgen/pen/abLLmrm?editors=1010

Hey @makilyes I've add some tweaks, mainly set the easing to none (I find when having a scroll element with scrub, no easing makes it smoother (GSAP animation have a ease by default)). I've also removed the react stuff, because I couldn't figure out if that was something that was introducing 'laggy-ness', but you can easily copy the code to your project. For shape changing, I would look in to MorphSVG and have it change shape on mouse move, and just rotate that shape with the mouse.

Sounds like a good start to me. Whip up a demo on Codepen.io and come back here when you get stuck!

Hey I forked your pen and add some more text elements with some spacing between. And it is already doing what you want right? https://codepen.io/mvaneijgen/pen/xxXdqBW?editors=1100 I you don't want the text shown already at the start you just need to add an empty space to the beginning. Hope it helps, PS: Did some more tweaks, gave all the text elements an height of 100vh (and centered them) add a `endTrigger` to be the end of the `.d-flex` so it pins the graphic 100% of its height.

What have you tried already? Can you share a demo via codepen.io, then it will be much easier to help you on the things you get stuck on.

Just a small side note. I've noticed that when the Chrome Dev tools is open animations always run slow for me, but when I close the Dev Tools everything runs smooth as butter.