mvaneijgen

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 

I've just build something similar, check it out! Hope it helps and happy tweening! 
 

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

GSAP is smart and on page load calculates everything it needs to do the animation, so that when it is time it to animate it doesn't need to do calculations anymore. In your case you have two ScrollTrigger animating the same element, so both of them see the initial state of your gradient and record that and when it is time they animate from that initial state to their new state. 
 
You want the second ScrollTrigger to wait until the first one has finished. You could do this multiple ways, but the easiest is to give the second tween immediateRender: false, so that it waits until it needs to do the animation. Hope it helps and happy tweening! 
 

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

I thought it was fixed, but I see it happen now again. I think the browser doesn't like rendering (or animating rem units) I've tested it with random px units and I don't see the issue. 
 
You're rem unit of 100 is also larger then the element can display, so for around half of the animation the border radius doesn't animate. 
Nope the first tween already animate to those values, so setting it again will just mean for 0.5 the animation does nothing while it animates from 1 to 1 and ("1.5rem"). 
 
I'll mark the topic to see if anyone else has some insight on rem units. 

Hi @Brandemic welcome to the forum and thanks for being a club member!
 
ScrollTrigger is build to hook animations to the scroll bar position, but you're looking for a tool that watches for a scroll event and then does some logic based on that, have you seen the Observer plugin https://gsap.com/docs/v3/Plugins/Observer/ that does exactly what you're describing 
 
Check out this demo from the docs, you can scroll as much as you want, but it only navigates to the next 'slide' when the current slide has done animating, this would be the basis on which I would build the animation you're looking for. Hope it helps and happy tweening!  
 

See the Pen XWzRraJ by GreenSock (@GreenSock) on CodePen
 
And here an example that mixes normal scroll with the Observer plugin
 

See the Pen oNQPLqJ by GreenSock (@GreenSock) on CodePen

Hi @kalininmax welcome to the forum!
 
xPercent and x are to different properties, if you want your logic to work you also have to animate the element using there x and y property, not there xPercent and yPercent values. In CSS there is just one property translateX, but having them split in GSAP can be really powerful. If you want to keep the percentage based movement, just that the elements width and height an multiply it by the value you want to get, for 70% multiply by 0.7 or for 120 multiply by 1.2. 
 
Hope it helps and happy tweening! 
 

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

You can set pinnedContainer: '.pin-gallery', to you imageReveal ScrollTrigger. from the docs https://gsap.com/docs/v3/Plugins/ScrollTrigger/
 
 
Hope it helps and happy tweening! 
 
 
See the Pen JjVPZGX?editors=0010 by mvaneijgen (@mvaneijgen) on CodePen

Hi @Atap Tailor welcome to the forum!
 
GSAP records its starting values and when you set repeat: -1, it will repeat to its original position, so you have to call repeatRefresh: true, to have it recalculate new values on each repeat. 
 
When working with timelines I would put all the logic on the timeline and keep the tweens just for animations. 
 
Also check out our Seamlessly loop elements along the x-axis might be helpful https://gsap.com/docs/v3/HelperFunctions/helpers/seamlessLoop/
 
Hope it helps and happy tweening! 
 

See the Pen oNOByvj?editors=0110 by mvaneijgen (@mvaneijgen) on CodePen

Lol I was just typing this out:
 
You can snap to different progress values. Check out snap in the do https://gsap.com/docs/v3/Plugins/ScrollTrigger/
 
as mentioned it snaps to progress values, eg 0 is the start of your ScrollTrigger and 1 is the end. Your total scroll distance is 6000px, so let's say you have 6 images and you want to snap to each one of them 1 / 6 = 0,1666, you you want to snap to increments of 0.1666
 
Hope it helps and happy tweening! 

Than you have to build in a delay in your animation, right now it comes in and then moves away immediately, so you have to have it come in, do nothing for x amount of seconds (I like this snippet to have a tween that doesn't nothing for 1 second `tl.add(() => {}, "+=1");`) and then move away. 

Both the codepen and the site work perfectly fine at my end in Safari version 17.2.1.
 
Any particular reason for the complicated setup with SVG and filters. I've found complex SVGs never play nice with animations, but I don't see why you can't use a normal div here with border-radius and a box-shadow, probably gets you a beter result with 1/3 of the resources need at multiple fronts (accessibility, page speed, render time) 🤷