mvaneijgen

It is important in which order you create ScrollTriggers, certainly when things are pining! You can manipulate this if you use refreshPriority, see docs https://gsap.com/docs/v3/Plugins/ScrollTrigger/
 
I'm not completely sure what you want to do, but be sure to keep in mind to remove ScrollTrigger from your setup, to see if your animation are doing what they suppose to without ScrollTrigger, so that you can debug one part at a time. This make debugging a lot easier.
 
If I reverse the order of your functions, things look to work VideoSectionAnimation(); ScalingBannerWithProducts(); but again I'm not sure what suppose to happen. Hope it helps and happy tweening! 
 

See the Pen wvbwMeN?editors=0010 by mvaneijgen (@mvaneijgen) on CodePen

Hi @jeycraz 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. 
 
I've written a guide how you can create any card stacking effect using a simple base. I think your struggle here is that you have to many ScrollTriggers controlling to many animations. As you can see in my post below all this can be done with just one timeline and one ScrollTrigger, check it out!
 
Check it out here a modification on the logic shared in the post with your animation requirements, showing you how you can implement something like this. I've written the tweens out by hand, doing this allows you to see patterns emerge which will make it easier to convert this to dynamic code. Hope it helps and happy tweening! 
 

See the Pen RwmbrbL?editors=0010 by mvaneijgen (@mvaneijgen) on CodePen

Hi @Robin Dhama welcome to the forum!
 
I'm not completely sure what all the code is doing in your setup. It seems fairly complicated for such a simple animation. Good to keep in mind is that all ScrollTrigger is doing is animating your animation on scroll, so I recommend first focusing on the animation at hand and only if that is correct adding ScrollTrigger.
 
Right now I've removed some of your logica and just add one timeline with one ScrollTrigger, if I resizes this logic everything works as expected. For some reason the text in the red box has disappeared? Also a good rule of thumb is that you should never animate your trigger element, in your case you animate the element box, this then can't be the trigger element, because you are moving the box the calculation ScrollTrigger needs to do will never be correct. 
 
I’ve placed some comments in your JS to better explain things, please be sure to read through them! For instance you had a gsap tween that set the box to scale: 0.3, but you can just as easily just use a .from() tween in your timeline and then the box will scale to it's initial value eg 1. Also I recommend taking a look at the ScrollTrigger docs and just read through some of the properties and what they do. As you can see there is no delay property in ScrollTrigger and also no duration. (docs https://gsap.com/docs/v3/Plugins/ScrollTrigger/). I find the following video really explains how to work with ScrollTrigger really well, and how durations work when working with ScrollTrigger
 
 
 
Hope it helps and happy tweening! 
 

See the Pen dyLBVzb?editors=0010 by mvaneijgen (@mvaneijgen) on CodePen

I think the following tutorial by our own @Carl will be helpful. Hope it helps and happy tweening! 
 
 

That is called Flash Of Unstyled content eg FOUC, check out this post https://gsap.com/resources/fouc/
 
Best is to have GSAP fire when everything has loaded especially images, fonts ect, because if you use ScrollTrigger the hight of everything is really important. 
 
Sadly we don't have the time and resources to provide free general consulting, but your code looks fine. I would not worry about it the only thing I can see is that you use x: "120%" and especially for percent based values we have xPercent: 120, same as x: `${distance}px`, I would write it like x: () => distance, this will get distance again if ScrollTrigger.refresh() is called (which happens on page resize) read more about function based values https://gsap.com/docs/v3/GSAP/gsap.to()/#function-based-values
 
Hope it helps if you need further assistance, please provide a minimal demo, so that we can take a look at your code in action. Happy tweening! 

Hi @MrBumblebee welcome to the forum!
 
The most powerful tool in GSAP is the timeline! You can add multiple tweens on it and  if you got your desired animation you can let ScrollTrigger control that whole timeline. You had a .to() tween, but you needed to set CSS to get your boxes in place it is always best to let GSAP handle all the transforms. So in this case (this is true for most animations) use your CSS to set your elements to be in the position where you want them to end when the animation is done, then you can use a .from() to have GSAP put them at the correct place. As you can see this now works perfectly (on any screen size). You can see that I've moved your ScrollTrigger logic to the timeline and it is commented out you can enable it to see how this would work on scroll. 
 
I’ve placed some comments in your JS/CSS to better explain things and also below some notes that are important to understand,  please be sure to read through them!
 
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! 
 

See the Pen JjVqpGq?editors=0100 by mvaneijgen (@mvaneijgen) on CodePen
 
Please also read the following:
 
 

You can use the ScrollTo Plugin for that. I've create an array and pushed all your ScrollTrigger to that array. Then in your click handler you select one of them and get it .start of .end value and then scroll to it. Hope it helps and happy tweening! 
 

See the Pen QWPRNjO?editors=0011 by mvaneijgen (@mvaneijgen) on CodePen

I would get in to the habit of never animating your trigger element, in this case it will probably be fine, but better save then sorry. I've wrapped your .trust-item in an element called .trigger and used that as the trigger element now your trigger and element you animate are separate. 
 
I've restructured your pen a bit, personally if a ScrollTrigger has an animation I like to combine the two, so there is no confusion what code does what. Then because you want things to animate first, but pin later, just add another ScrollTrigger that just does the pinning. I highly recommend reading the ScrollTrigger docs, just once to see what all kinds of awesome features are in there, because I've used a few. 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! 
 

See the Pen mdgYRyq?editors=0010 by mvaneijgen (@mvaneijgen) on CodePen

Personally I would always create timelines in GSAP and have ScrollTrigger control the timeline you create. I've restructured your JS and give all your ScrollTrigger an ID so that when markers are on you can see when what is happening. I'm not sure if 150vh works like that in ScrollTrigger, but I personally would just the current window.innerHeight and then times 1.5 to get 150%. 
 
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! 
 

See the Pen oNORgwJ?editors=0010 by mvaneijgen (@mvaneijgen) on CodePen

Hi @marcow welcome to the forum!
 
From your screenshot I see you load your motion-gsap.js BEFORE all the GSAP scripts. It is recommended too load your own script AFTER all the dependencies you'll need. 
 
As a work around you can wrap your custom code in a load listener eg that way you're sure your code gets executed when everything on the page has load. 
 
window.addEventListener("load", (event) => { // your code here! }); Hope it helps and happy tweening! 

Check the demo again. I've changed your tween from a .from() to a .to(), so that will reverse the logic. So in my example it scales from scale: 1 to scale: 0.1

GSAP is highly optimised and will get it's initial values on page load, but because you tween the same element twice they both get the same starting position and because you want the second (ScrollTrigger) animation to wait for the first one to end you have to tell it to that tween some how. Luckily GSAP has you covered with immediateRender: false, if you put that on the second tween everything works as expected. Hope it helps and happy tweening! 
 
https://stackblitz.com/edit/stackblitz-starters-cgdvlq?file=components%2FBanner.tsx

Are you sure you've updated your pen? It is always best to relink the pen or even fork, so that in the thread we can see the progress of the current version of that time. 
 
To me it seems like you've removed the functions from the parameters, this is importent, because it indicates to GSAP that is can recalculate the values, if you leave this out you tell GSAP get the value once and never update it!
// From height: gsap.utils.random(10, 100, true), // Is already a function width: gsap.utils.random(0, 100) + "%", // not a fucntion // To height: () => gsap.utils.random(10, 100, true), // Better save and also convert it to a function width: () => gsap.utils.random(0, 100) + "%", // Convert to function  
Hope it helps and happy tweening! 
 

See the Pen XWQOGpa?editors=0010 by mvaneijgen (@mvaneijgen) on CodePen

Indeed without a minimal demo seeing the code in action it is hard to help you debug. 
 
That said have you seen my post on how to animate all types of different clip masks? Hope it helps and happy tweening! 
 

See the Pen jOdJGQq by mvaneijgen (@mvaneijgen) on CodePen
 

Hi @Sandeep Choudhary welcome to the forum!
 
You just needed to scope the pin: ".right" element  eg pin: galleryObj.querySelector(".right"), otherwise it would always gets the first .right element. Hope it helps and happy tweening! 
 

See the Pen ExJGMed?editors=0011 by mvaneijgen (@mvaneijgen) on CodePen

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!
 

See the Pen bGJxXXG?editors=0010 by mvaneijgen (@mvaneijgen) on CodePen
 
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! 
 

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! 
 

See the Pen bGJxyeV?editors=0010 by mvaneijgen (@mvaneijgen) on CodePen
 

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!
 

See the Pen MWRqvgg?editors=0010 by mvaneijgen (@mvaneijgen) on CodePen

Just remove the first item from the query section eg .card:not(:first-child). Hope it helps and happy tweening! 
 

See the Pen JjVBqeQ?editors=1010 by mvaneijgen (@mvaneijgen) on CodePen

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! 
 
 

See the Pen dyLjLBw?editors=0010 by mvaneijgen (@mvaneijgen) on CodePen

Ha, that is not a good sign! "Keep calm and grap some calming tea", there is probably some server down, if you want to continu working, just grap the CDN files from https://cdn.jsdelivr.net (grap the links via our installer tool) and swap them out in your pen and we're currently looking in to getting the https://unpkg.co packages back in action! 

Don't pin just the header pin the whole block and move the content inside. Same as the Stackblitz demo. Again everything in GSAP is an animation. 
 
Also always make sure you're loading the latest versions of the plugins, your demo loaded version 3.4.0 we're currently at 3.12.5! 
 

See the Pen MWRXJgM?editors=0010 by mvaneijgen (@mvaneijgen) on CodePen

Hi @Fumiho 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. 
 
You have four "hello" blocks and you want them to move off screen, but have the last one stay. Your logic right now is move them all 100% of their width times the number of .project elements, this is what it is doing now, but your logic is they should all do that expect for the last one, so just subtracted one from your calculations. This is why removing ScrollTrigger is such a powerful move, now you can check just the animation if it is doing what you expect it to do and don't have to worry about what is causing your issue. 
 
What could be even more powerful when debugging is changing out projects.length for a hard coded value eg just try the hard coded value of "4" and see what that does, then try "3" and see what that does, this always helps me. Getting dynamic values is great for final code, but before you can get there you first have to know what it is you're trying to do and trying hard coded values probably results in you finding your own solutions. A few weeks back I've written the following post with a philosophy that really helps me debug any project I'm working on, give it a read. Hope it helps and happy tweening! 
 
 

See the Pen gOyKwqa?editors=0010 by mvaneijgen (@mvaneijgen) on CodePen

I can't get this to happen on iOS (17.3.1) Safari either in the Codepen view or the debug view of Codepen (without an iframe) any particular device/version you see this happening?
 
Side note you can also use .from() instead of .to() tweens that way you don't have to set custom CSS for your second and third image and just let GSAP handle all the setup. I've also written a guide how you can create these kinds of card stacking effects and the logic behind it. You already got the logic down, but maybe it helps you when you want to start making loops or use staggers 
 
 
This demo from the post looks like your setup. Hope it helps and happy tweening! 

See the Pen MWxgQbV by mvaneijgen (@mvaneijgen) on CodePen

This is totally not to be mean, but check the docs https://gsap.com/docs/v3/Plugins/ScrollTrigger/ I know it sounds really boring, but just read the page once and you’ll be surprised how much knowledge is in there that you didn’t even know you needed. 
 
If you after reading it still need help just post back here with what you’ve tried and we’ll be happy to help you out