Pinning multiple elements using ScrollTrigger?

[miguelst]

This is the design I'm trying to animate. I've discovered ScrollTrigger's pin option, and it works very well to keep the image pinned, using

 

ScrollTrigger.create({
  trigger: main.value,
  start: "-200px top",
  end: "bottom bottom",
  markers: true,
  pin: self.selector!('.ani-image')
})

 

However, I'm wondering what the correct direction would be to also pin the 3 dots on the top, and the gradient blur at the bottom, so that when the user scrolls, the text passes by on the right, while other elements remain stationary.

 

If anyone could give me a nudge in the right direction, I would be very grateful.

 

[mvaneijgen]

Hi @miguelst,

 

instead of setting one element as the pin set the container as the pin that contains all the elements you want to pin. Usually setting pin: true, does this, because the trigger elements most of the time contains all your elements.

 

This all is hard to judge from just a code snippet and a screenshot,  so I highly recommend providing a minimal demo, so we can take a look at your full setup if you still need help.

 

Hoop dat het helpt en veel geluk met je project! 

[miguelst]

On 2/26/2024 at 9:27 PM, mvaneijgen said:

Hi @miguelst,

 

instead of setting one element as the pin set the container as the pin that contains all the elements you want to pin. Usually setting pin: true, does this, because the trigger elements most of the time contains all your elements.

 

This all is hard to judge from just a code snippet and a screenshot,  so I highly recommend providing a minimal demo, so we can take a look at your full setup if you still need help.

 

Hoop dat het helpt en veel geluk met je project! 

Thanks @mvaneijgen I suppose I can pin the container, but the idea is that the text keeps scrolling past, is it possible somehow to exclude this text from the pinned container, or have it be "absolute" so it's not affected by the pin? Thanks!

[mvaneijgen]

Yeah, animate the text so that is looks like it's scrolling! You're on an animation forum so you're going to get animation answers. 

 

But there are a 100 ways you could build this, it just depends on your skill level an how much elbow grease you want to put in it. I advise you to just start building and post back here with a minimal demo when you get stuck. 

[miguelst]

Hi @mvaneijgen I set up a demo to recreate what I'm trying to achieve: 

See the Pen bGJNwaB by studiomonty (@studiomonty) on CodePen

 

So the sticky works for the full container, however the blocks on the right should also scroll until the end, and that's the thing I'm not succeeding at.

Thanks!

[mvaneijgen]

Great you've got the scrolling part down! In most cases this is the easiest step and when making an animation it is advised to first focus on the animation and only worry about the scrolling part when you've got that down. 

 

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 moved your ScrollTrigger to a timeline and add a tween to that timeline. I've add scrub: true, so that now the animation is linked to the scrollbar position. I've created the most simple tween do demonstrate how easy it is to work with GSAP. We get the yPercent property and just move the element up 100% of its own hight. This is probably not what you want, because you want it to line up with the bottom of the image, but that is easy to! The second tween if you enable it will move the element up again its own height, but now with pixels and then subtracts the image hight from it. You probably want to get this value dynamically, but I'll leave that up to you.

 

I’ve placed some comments in your JS to better explain things, please be sure to read through them! Below a video that is a really clear demonstration how ScrollTrigger works, highly recommend watching it.

 

Hope it helps and happy tweening! 

 

 

 

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

 

[miguelst]

Thanks @mvaneijgen I've got a solution using the complex tween now, I'm not sure I understand it completely, but it works!

 

[miguelst]

@mvaneijgen There is one issue I'm seeing, and that is a bunch of whitespace underneath the component, I guess that's the original height that the component had without the fixed scrolling? Any idea how to get rid of that? If I set a fixed height of 500px on the container the scroll stops working

[mvaneijgen]

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

[miguelst]

2 hours ago, mvaneijgen said:

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.

 

 

 

Thanks @mvaneijgenThat's a good idea, to make it 100% of the viewport. Could you guide me in the right direction? is it enough to set the wrapping div to 100vh? 

[mvaneijgen]

8 minutes ago, miguelst said:

Thanks @mvaneijgenThat's a good idea, to make it 100% of the viewport. Could you guide me in the right direction? is it enough to set the wrapping div to 100vh? 

Test it out, might be as simple as that indeed. If it doesn't work, just post back here with a pen that shows the issue.