mvaneijgen

I think you'll then have to make a separate ScrollTrigger for the first one, or at least check if it's the first one and then set it scrub: false. But you state you also want it to take a second, so creating a whole separate tween without even ScrollTrigger for the first one will be the way to go. I think. 

Just add an extra div to the sidebar, and set that as the pinned element. Hope it helps and happy tweening! 
 
https://stackblitz.com/edit/vitejs-vite-znkfam?file=src%2FApp.jsx

I've restructured your layout a bit, so that you don't have the fight the height of the elements. Everything is stacked on top of each other on page load and then with a .from() tween the elements get moved and animated in to place.
 

See the Pen RwOPGZm?editors=0110 by mvaneijgen (@mvaneijgen) on CodePen
 
If you want the border back, you'll have to create an extra element that is not part of the pin and is the window height, which then gets scrolled away or maybe make it part of the animation and have it also move the same distance as the image. 
 
I've also set ease to "none" for all tweens, made them both the same duration, and set the scroll distance to the windowHeight. Be sure to read through the JS comments!
 

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

Please always send a current pen with the progress you've made, that way we can see your thought process and thus better help you. 
 
the y property in GSAP transforms the element using translateY, eg it moves up visually, but the browser still thinks it still at its original position.. With these kinds of effects it is the easiest if you designs is 100% of the current browser window, that way you don't have to worry about what comes before or after and thus the whitespace (that needs to be there for ScrollTrigger to do its thing) is hidden from view. You could also make it so that the element you're transforming is not part of the document flow, with for instance position: absolute; I've also changed the end trigger to top+=window.innerHeight, so the the total scroll distance it now the current window height and this makes the next block coming up.
 

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

Hi @davidsantas
 
I've seen this demo before, but I don't know where it is from or why it was made. I would personally animate this with a css clip-path, much more performant than updating the height of an element. Below an example coming from my post how to make any card stacking effect which walks you through the process of how to create such effects and what is the logic behind it. Hope it helps and happy tweening! 
 
 

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

As you've stated that is indeed how ScrollTrigger works. But there is another plugin that  sounds like what you're looking for have you seen the Observer plugin https://gsap.com/docs/v3/Plugins/Observer/
 
With the plugin you can watch for scroll events and then do some logic based on that. Here is a example that tweens to labels on a timeline and it just animates the previous of next label on a timeline. To implement this in your project you'll just have to put labels in your timeline where you want the scroll to stop. Hope it helps and happy tweening! 
 

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

See the Pen oNQPLqJ by GreenSock (@GreenSock) on CodePen
 
Just going to put this here:

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

Hi @SamStAubyn, 
 
Had to restructure the HTML/CSS a lot to get it to behave some what and it still isn't perfect. I advise you to remove GSAP for now and just focus on CSS and get everything lined up like you want it to line up when the animation is playing. 
 
I've used @Carl "GSAP Staggers with Seamless Loops" logic, see video below for the looping effect and the main thing I've done in the JS is made separate timelines for each of the animations, so now the sentence can type in once and when it is done it will cal the word looping timeline.
 
 
I've changed a lot of tweens in to .from() tweens, sometimes it is so much more easy to animate .from() instead of .to(), certainly in this case because you want it to type .from() a string of '' (nothing) to what is already there, GSAP is smart and it will see what is the current content and just animates to that, no need to get the content yourself in JS. Hope it helps and happy tweening! 
 

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

Hi @rdso welcome to the forum!
 
When using ScrollTrigger.create() it is spelled with a capital "S", when using it as an object in a timeline it is scrollTrigger:{} with a lowercase "s". Happens all the time and is indeed weird, but these are Javascript conventions. Always a good idea to reference the docs from time to time and just copy code from there to see what would be different in your setup, but it is indeed hard to spot of you don't know what you are looking for https://gsap.com/docs/v3/Plugins/ScrollTrigger/
 
I've also fixed the stacking of your images, the last image was on top. The latest  element created gets the highest stacking order (this is how CSS works), I've added an extra line to your .set() function which reversed the zIndex of all the elements. 
 
Hope it helps and happy tweening! 
 

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

This is indeed so hard to wrap your head around, because you're trying to optimise things before they are even working. So my approach is always make it simple, just start writing out the animation by hand and worry about making it dynamic later. When you've copied a piece of code for the third time you'll probably see a pattern emerging which you can optimise later!
 
Then get ScrollTrigger and throw it in the trash where it belongs.... 🤣, but you're building an animation, so worry about the animation at first and add ScrollTrigger only at points to test things or if you're done with the animation. 
 
Also for this I would just add an animation and make the animation from 0 to 100% just in line with the other tweens that are playing. I don't have time to dive in further, but hope this gets you on the right path. Hope it helps and happy tweening! 
 

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

I've loaded your path in this SVG tool to see what is going on https://yqnn.github.io/svg-path-editor/#P=M_0_0_L_1708_0_L_1708_1330_Q_830_633_0_1330_Z
 
And when manipulating the path and comparing to the other path it was easy to see what values where changing. I don't know how the path is build, that is really important when working with MophSVG so I couldn't tell you what is going wrong.
 
I've used the attr object and target the d attribute directly.
 
When working with SVG masks via clip-path (maybe also other methods) the SVG is as big as it is and it can not conform to the element you're loading it on. I've written a guide which walks you to several solutions and workflows. Hope it helps and happy tweening! 
 
 
 

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

Hi @peter. welcome to the forum!
 
I've used the smooth origin helper function and one tween on a timeline that gets its transformOrigin updated on each repeat. I'm not sure what you want to do with the rest of the animation, but this show you how you can update the origin (smooth) on each tween. You can also set an onComplete: on each subsequent tween (not on the timeline) and do the same logic. Hope it helps and happy tweening! 
 
Edit: I’ve placed some comments in your JS to better explain things, please be sure to read through them!
 

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

Hi @jernst146 welcome to the forum! 
 
You can set the transformOrigin: '90% 65%', of a tween (here I just used random values), but you can set it so it scales to a specific point you want. I have the feeling something is setting the CSS position of the text which makes it stay in place which is conflicting with pin in ScrollTrigger, but I couldn't debug your CSS/Tailwind.
 
I've disabled one tween, because I was not sure what it was doing and change your .fromTo() tween to just .to(), no nee for them GSAP is smart and just animates from browsers defaults. I hope this shows how how you can go about these things. Hope it helps and happy tweening! 
 
https://stackblitz.com/edit/stackblitz-starters-qxhv8f?file=components%2FHero.tsx

If you remove yoyo: true, change to a .to() tween and set repeatRefresh: true,  it does wat you want right? 
 

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

Have you seen the Observer plugin https://gsap.com/docs/v3/Plugins/Observer/ with it you can watch for scroll events (and all other kind of events), so I've wrapped your animation code in a function and on click or on scroll it now calls next(), as you can see you could also implement a previous() function and have it work the other way round. Hope it helps and happy tweening! 
 

See the Pen VwRozae?editors=0010 by mvaneijgen (@mvaneijgen) on CodePen
 
Side note: you probably also want to page to scroll normally at some point,  so here an example that mixes normal scroll with the Observer plugin

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

Hi @lizettevanboom
 
That is where timelines come in!  Personally I find 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. 
 
So here is your demo with ScrollTrigger disabled for now, so that we can just focus on the animation. I like to add empty tweens to a timeline when working with ScrollTrigger that just do nothing for x amount of seconds. Here it does nothing for 1 second and your animation tween also has a duration of 1 second.  
 
Normally in GSAP things work with durations, but when working with ScrollTriggers with a scrub value these durations get converted to distance. It might be hard to wrap your head around, but maybe this example helps. 
 
Let's say we have four tweens that all take 1 second to animate and the total ScrollTrigger distance is 400px each tween will then take up 100px. If we remove one tween and make the last tween take 2 seconds the first two tweens will take still 100px, but the last tween will get stretched over the remaining 200px.
 
I’ve placed some comments in your JS to better explain things, please be sure to read through them!
 
Als je nog vragen hebt horen wij het graag en hoop dat het help! Happy tweening!
 

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

If you set a hex color it works. Also highly recommend reading the following article if you're using react https://gsap.com/react If you need further assistance, please provide a minimal demo, so that we can take a look at your code in action. Hope it helps and happy tweening! 
 

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

For the loading of content that is not really something GSAP can help with.
 
How ever what you can do is add a class to the body which hides everything you want to hide and then do some animation and onComplete of that animation remove the class that hides everything. This class that hides everything could also set it so that the body can't scroll, you could do this multiple ways, setting overflow-y: hidden to the body or with JS just fully block everything that has to do with scrolling, but again those are things not really GSAP related. 
 
Hope it helps and happy tweening! 

Hi @Yuvraj Bokhre welcome to the forum! That demo looks cool, nice job @Cassie!
 
This demo uses the Observer plugin https://gsap.com/docs/v3/Plugins/Observer/ which kinda 'eats'  your scroll (because of preventDefault: true, on line 111. So you have to find a way to break out (and in) to this effect at the moment you want! Below a demo that does this, this is not really simple logic, but if you're up for a challenge it is certainly possible. 
 
I would advice first making some demo's, Codepen is a great place for that, so you don't have to worry about your real project or your framework trowing errors. Also I would check out this awesome getting started guide https://gsap.com/resources/get-started/ just to get a feel for the basics, you have to learn to walk before you can run, right?
 
If you still need help be sure to fork one of the demos and show us what you already have tried, that way we can see your thought process and thus better help you understand the tools!
 
Hope it helps and happy tweening! 
 

See the Pen oNQPLqJ?editors=0010 by GreenSock (@GreenSock) on CodePen
 

When working with timelines, all the control is given to the timeline, but you've set the tween to paused and thus it will do nothing. If you move the paused: true to the timeline object, you'll see it will work as expected. If you need further help please include a minimal demo, so that we can dive directly into the code. Hope it helps and happy tweening! 
 
let tl = gsap.timeline({ paused: true, defaults: { duration: 0.6 } });  

Why solve problems that aren't even problems yet? But sure you could check if there is already scrolled and then  just don't create the ScrollTrigger. There is no pinning in this ScrollTrigger, so it will not effect any under laying ScrollTriggers.
 
But I would build things first, test them and solve problems as they arise. Hope it helps and happy tweening! 

Hi @ohiosveryown welcome to the forum!
 
Would setting the snap of x to 6 solve your issue? Some more info on the docs if you're interested https://gsap.com/docs/v3/GSAP/CorePlugins/Snap?_highlight=snap
 

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

If you want things to have the blur on page load, yes.
 
Right now the animation only triggers if the green and red markers touch. Another way of going about it would be to blur everything on page load and change animation to un-blur something if ScrollTrigger onEnter fires. But that is up to you and what is the best fit for your project. Hope it helps and happy tweening! 

Yeah I would restructure your layout so that you can easily do this. Right now you moved the whole container its width over the whole screen, but I would instead position all your elements on top of each other, something like this 
 

See the Pen MWxxLQV?editors=0010 by mvaneijgen (@mvaneijgen) on CodePen
 
And move the elements in view when you need them, then it will be also much simpler to have certain things happen at the same time. Hope it helps and happy tweening! 
 

See the Pen jOJJJzX?editors=0100 by mvaneijgen (@mvaneijgen) on CodePen

I don't have time to debug your function, but you're using GSAP anyways, so why not let GSAP handle it for you? 
 
I've add a tween to your onEnter which animates the innerText of the h3 to the number in the dataset. It has a delay of 3 seconds on the tween. 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://gsap.com/docs/v3/GSAP/CorePlugins/Snap/?_highlight=snap
 

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

I would set a scale on the image (maybe calculate how much you need the scale to be based ont the window.hight and the image height). Also set the image to object fit cover and add a clamp to the ScrollTrigger, so that it always starts from a point even if it already should be playing. 
 
Check out for an explanation.
 
 
 
I've modified your pen a bit, to visually see where the image is and the red border shows where it's clipping it off. Hope it helps and happy tweening! 
 

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