mvaneijgen

Your video is around 15 seconds long, so I've split it up in three sections of each 5 seconds. First of 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. I've enabled GSDevTools for the animation, so we can first fully focus on the animation and create what we want to happen on scroll. I've modified your HTML and CSS, I've created a .trigger element and have everything stack right on top of each other with CSS (please disable all the JS to see what it looks like) I've taken this logic from my stacking cards post I encourage you to read through it, see below Then on the timeline I've put all the tweens, frist the video tweens to 5 seconds over a duration of 5 seconds, then the video tweens to 10 seconds over a duration of 5 seconds and at the same time the first card animates in from of screen, and them the same for the next card. This is probably not fully correct, but it shows you how you can create a timeline and have things happen at the same time. I've add some ScrollTrigger code but this is commented out, but you can enable it to see what this would do on scroll, but be sure to disable it again when you want to tweak the animation. If you're new to GSAP check out this awesome getting started guide https://gsap.com/resources/get-started/ and check out this awesome tutorial how to work with ScrollTrigger. Hope it helps and happy tweening! https://codepen.io/mvaneijgen/pen/bGJOQzq?editors=1010

Hi @kevin.dev welcome to the forum! By default GSAP renders all the logic it needs on page load and because you're targeting the same element multiple times they all get the same start point en thus will not flow like you want to. What you can do is in your later tweens set immediateRender: false, so that they will wait until it is needed to calculate their animations. Personally for such a simple animation I would create one timeline with one ScrollTrigger, this is much easier to debug and maintain in the future. I've also tweaked the logic a bit. There is no need for a .fromTo(), the default scale of an element is 1, so setting .from() 0.75 will automatically scale to 1, if you use a timeline it will see in the next tween it is 1 and then animate .to() 0.75. Also if you want to have scale in both direction, you can just set scale. I've add two ScrollTrigger because from your question I get you want the pin to happen later then the scale up, so one handles the scale and the other the animation. In the animation I've add a pause twen for 1 second where the animation does nothing, to me this looks good, but be sure to tweak it if you want. Check out this tutorial how to work with ScrollTrigger if you want some more tips! Hope it helps and happy tweening! https://codepen.io/mvaneijgen/pen/eYobPKB?editors=0010

You where almost there! I've move your timeline outside the loop and add the ScrollTrigger logic to the one timeline, then I've add all your tweens to that one timeline and let ScrollTrigger control it. Does that make sense? Hope it helps and happy tweening! https://codepen.io/mvaneijgen/pen/qBwLJXX?editors=1010

Hi @4epeliuk welcome to the forum! Personally I find it much easier to create a timeline for the full animation and have ScrollTrigger animate that whole animation. Right now you have an animation and a ScrollTrigger for each card. I've written a post how I go about creating these kinds of effects, check it out: For this effect check out the Observer plugin https://gsap.com/docs/v3/Plugins/Observer/ https://codepen.io/GreenSock/pen/XWzRraJ And here an example that mixes normal scroll with the Observer plugin https://codepen.io/GreenSock/pen/oNQPLqJ Hope it helps and happy tweening!

First of this is really important! ScrollTrigger can only be on the whole timeline or on a single gsap.to() (or .from()) tween. As soon as you define a timeline ScrollTrigger needs to control the whole timeline, it can't control individual tweens that are on a timeline, logically this is impossible. Next 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. 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/MWRZego?editors=0010

Hi @Sikriti Dakua welcome to the forum! What is the part you're having trouble with? In your example you have different coloured sections which each there own text, but in the example you share all the text is all just stacked right on tof of each other. If that is what you want check out my card stacking tutorial of course swap out the cards for just text, but the logic should be the same. With CSS make all the text stack right on top of each other and then just animate them in and out one by one. Also keep in mind 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. Hope it helps and happy tweening, but if you still need help be sure to post back here with what you've tried!

The beauty of GSAP is that you can build anything you like. In compression to other 'plugins' were it does one specific thing GSAP is more a tool box in which you can build anything you like! The only thing holding you back is your own creativity. Personally I would start with a simple thing and start building from there, make demo's (make A LOT of demo's) and post back here when you get stuck at specific parts. Keep in mind that you're sharing a site of a design agency with as far as I can see a team with over 10 people who all have their own skill and experience, so I would adjust your goals until you've got some more experience with the tools and then you'll see you can build anything you like! If you're stuck for inspiration you can check out the GSAP collection page on Codepen with so many demo's. Hope it helps and happy tweening! https://codepen.io/GreenSock/collections/

Hi @tylsa welcome to the forum! If you're lost for inspiration the Codepen collection page of GSAP is a great place to gather some resources https://codepen.io/GreenSock/collections/ The following pen looks close to your example. Be sure to include a miniml demo in your next question, we love to see what you can come up with, that way we can see your thought process and thus better help you understand the tools! Hope it helps and happy tweening! https://codepen.io/GreenSock/pen/RwKwLWK

Hi @maoux welcome to the forum! Your in luck, it is even easier now. Check out useGSAP()!

This is mostly a structure question and hasn't really to do with GSAP. I would abstract out what are toggle and what are expended elements and then expand all the elements that are connected to the toggle. As you see in your example you don't want to expand elements that have them self content that also should expand, so the HTML structure (and CSS) is really important in this case. I've given each element data-toggle and data-expand with their respective key (eg the name on the link). Right now it doesn't close, personally I don't like it when toggles close them selfs and I think it is bad UX. What If I want to compare content one and three? You could could add a data-close and find all the elements that should close if some data-toggle is clicked, but agin this isn't really a GSAP question, but again more JS logic and is beyond the scope of this forum. Still hope it helps and happy tweening! https://codepen.io/mvaneijgen/pen/BaEqJOM?editors=1101

I think something like this is what you're looking for. I’ve placed some comments in your JS to better explain things, please be sure to read through them! https://codepen.io/mvaneijgen/pen/bGJxXXG?editors=0010 For React, if you have set up the useGSAP() hook correctly and your elements have the same classes and CSS everything should just be a drop in replacement from Codepen. Be suer to check out the following if you need some more guidance. If you're stuck we also have Stackblitz starter templates for all the major frameworks. Again hope it helps and happy tweening!

Everything is possible with GSAP, but their is a lot build in that you get for free, and if you want things to happen differently you have to build the logic your self. I really recommend watching the video and see what logic you can apply to your setup and post back here with what you've tried when you get stuck.

Let's keep it simple and tackle your question in parts otherwise it will be really complicated to explain. Indeed it is a bit weird to wrap your head around. Normally in GSAP things work based on durations, but with ScrollTrigger that all gets thrown out the window (not really it still matters if you have multiple animations), but in ScrollTrigger the whole animation gets played over the scroll distance you've set. Right now I've enabled scrub again and set your ScrollTrigger end to center (the same as start) and add +=6000px to it eg the scroll distance now gets span over 6000px. There are now two tweens on your timeline one that does nothing for 0.1 seconds and your other tween that scales the .box and takes 0.5 seconds (default if you don't set a duration), so your total duration = 0.6 seconds the distance is 6000px which means every 0.1 seconds = 1000px, so the first tween does nothing for 1000px, then your last tween takes 5000px to do its thing. If you don't want things to happen on scrub you'll have to create multiple ScrollTriggers that get positioned like you want eg 100px further then the first ScrollTrigger and that all control their own elements. ScrollTrigger has build in toggleActions (see the docs https://gsap.com/docs/v3/Plugins/ScrollTrigger/) which you can tell what to do based onEnter, onEnterBack, onLeave, onLeaveBack, but you can also fully manually define your logic in these callbacks. Check out this amazing tutorial if you want to learn more. Hope it helps and happy tweening! https://codepen.io/mvaneijgen/pen/KKYxOaO?editors=0010

Hi @Haris Khan welcome to the forum! A timeline is the most powerful tool in GSAP with it you can put tweens in a sequence and thus in this case have ScrollTrigger play your timeline in full. If you're new to GSAP check out this awesome getting started guide https://gsap.com/resources/get-started/ Hope it helps and happy tweening! https://codepen.io/mvaneijgen/pen/bGJxyeV?editors=0010

GSAP is smart and will calculate all the end positions (or start) on page load and then when things need to animate it can purely focus on animating, this makes it blazingly fast! But this means that if you want to animate the same thing twice, they both calculate their respective starting values on page load, but in your case you want the second animation (ScrollTrigger) to get its values when the first one is done, right? To do this I would create the whole timeline/ScrollTrigger combo in enableScroll() and not half (timeline) already, and then the other half (ScrollTrigger) on complete. Also when working with a timeline/ScrollTrigger combo it is best to view it as one and I find it much easier to create the ScrollTrigger inside the timeline, so there can't be any confusion when coming back to the project in a year what controls what. When wanting to fix FOUC https://gsap.com/resources/fouc/ all you need is visibility: hidden; and autoAlpha: 1. I would not also set display: none; the browser does a lot of things different when setting display: none; and it is also not a property that you can animate, it's either one value or the other, there is no in between. Now I'm only not sure what your last animation should be doing, but I hope this already gets you in the right direction. Happy tweening! https://codepen.io/mvaneijgen/pen/MWRqvgg?editors=0010

Hi @pirrex welcome to the forum! Personally I would keep working in codepen and fork the base version you want to work on and then try to tweak the animation to what you want to happen. When that is working try adding the auto next section and try and get that to work and keep forking it until you are fully confident it is working like you want and when that is done try implementing it in your framework of choice. This way you only have to battle one change at a time and this will make it so much easier to implement. I see you had removed some logic from the original demo, which I feel is fairly importing for this effect to work. I've forked the original version and removed some of the animations that you don't seem to want. I’ve placed some comments in your JS to better explain things, please be sure to read through them! Again my advise keep working in codepen until you've fully done with the animation/logic and then port it to your framework. Hope it helps and happy tweening! https://codepen.io/mvaneijgen/pen/gOydmJN?editors=0010

Just remove the first item from the query section eg .card:not(:first-child). Hope it helps and happy tweening! https://codepen.io/mvaneijgen/pen/JjVBqeQ?editors=1010

Each tween in GSAP has a default duration of 0.5 seconds, so in this pen the total timeline is 0.5 + 0.5 = 1 second

Looks good! What is your question? If there is something not working be sure to include a minimal demo and we'll be happy to take a look at your setup.

I think your issue is that you have two tweens that both have an ease that are separate from each other. What you can do is have a timeline with all tweens on it an ease of "none" and then use a .tweenTo() https://gsap.com/docs/v3/GSAP/Timeline/tweenTo()/ to play that timeline with an ease over the whole timeline. Check out the ease visualizer if you want to see what types of eases are build in to GSAP. Also you had a typo in duratin eg duration, doesn't really matter, but wanted to let you know. You could also look in to other mask features of the browser SVG mask could also be a solution. I've written a guide how to use most of them, see below. Hope it helps and happy tweening! https://codepen.io/mvaneijgen/pen/dyLjLBw?editors=0010

Hi @OmarS welcome to the forum! Always share a pen you've created, that way we have the latest version you're working with also make sure you update to the latest version of GSAP after forking someone else their work. This seems like a perfect use case for gsap.quickSetter() https://gsap.com/docs/v3/GSAP/gsap.quickSetter()/ Can you share this version in a minimal demo preferably in a Codepen?

Hi @Boxen welcome to the forum! No not really. My advies start disabling big chunks of your local environment to see if the bug goes a way (JS/CSS) then start enabling it back in bit by bit until it breaks, this way you can pin point what the culprit is. You can also try our Stackblitz starter templates depending in what framework you're working. Hope it helps and happy tweening!

Hi @Ravina welcome to the forum! 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. Also be sure to load the latest versions of the tool! (you were loading and old version). I've removed ScrollTrigger and enabled GSDevTools so we can easily visually inspect your animation. It doesn't seem to do a whole lot!? it is over a 100 seconds long, but doesn't do a whole lot. If yo drag the progress bar at the end it suddenly jumps to the last slide. My advies is try to debug you animation this way. Remove most of your tweens and keep the working once, then slowly introduce the next tween and test if everything is working (with out ScrollTrigger) if you get stuck post back here with what you've tried. If you're new to GSAP check out this awesome getting started guide https://gsap.com/resources/get-started/ Hope it helps and happy tweening! https://codepen.io/mvaneijgen/pen/GRLBwNv?editors=0010

Hi @Stasicus welcome to the forum! Check out this awesome tutorial by our own @Carl better than this I can't explain how it works. Hope it helps and happy tweening!

Hi @kanishk soni What have you tried already? We love to what you can come up with, that way we can see your thought process and thus better help you understand the tools!