How can you make a similar effect?

[Poylar]

hi, 

i try to make cards effect from this website https://www.createwithplay.com/ (section on screenshot)

I tried many variations but they all failed, could you help me understand how to implement this, please?

I can see that position:sticky is used in the example, but I can't use it because I'm using the gsap smooth scroller plugin.

 

At first I thought that it would be possible to pin section when I enter it, but I did not understand how I should move it up further.
I think my problem is that I can't determine the start and end parameters.

 

Thank you for any help

See the Pen rNrNPNM?editors=1010 by poylar (@poylar) on CodePen

[mvaneijgen]

Have you seen the latest video from the Greensock Youtube channel? It demonstrates this exact websites effect and how to build it with GSAP!

 

The gist is as follows. Just build the animation first worry about scrolling later. Hope it helps and happy tweening! 

Quote

The best thing to do 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.

 

 

[Poylar]

1 hour ago, mvaneijgen said:

Have you seen the latest video from the Greensock Youtube channel? It demonstrates this exact websites effect and how to build it with GSAP!

 

The gist is as follows. Just build the animation first worry about scrolling later. Hope it helps and happy tweening! 

 

 

thank you, that work. but how i can remove this "extra space" after section?

pinSpacer make 2000px padding , can i remove this?

[mvaneijgen]

I don't know I can't see what you're looking at. Can you provide a minimal demo?

[Poylar]

2 minutes ago, mvaneijgen said:

I don't know I can't see what you're looking at. Can you provide a minimal demo?

See the Pen abGYbGm?editors=0110 by GreenSock (@GreenSock) on CodePen

this demo from video

i wanna remove this padding

[mvaneijgen]

Yes that is a demo, but we want yours, because your example probably doesn't look like this example. 

 

If you want the next section to not have any spacing you'll will have to make it part of the section you're pinning. 

 

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

[Poylar]

6 minutes ago, mvaneijgen said:

Yes that is a demo, but we want yours, because your example probably doesn't look like this example. 

 

If you want the next section to not have any spacing you'll will have to make it part of the section you're pinning. 

I'm not sure we understood each other.

I want to remove padding  of the  pin spacer

I mean: 

if i remove all js and CSS position next section will be closer to cards,

watch screenshot: 

i want same position with gsap animation 

[mvaneijgen]

Yes but you're pinning the container and then moving the elements up, so there will be a gap at some point. 

 

You can set pinSpacing: false (see docs https://greensock.com/docs/v3/Plugins/ScrollTrigger), but this will probably not do what you think it does. 

 

I think the best solution would be to have the element you don't want to have spacing to be part of the pinned container (see my last codepen), but this will change everything, so the best thing to do again is to remove ScrollTrigger! 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.

 

Explaining al this in text is really complicated, it is much easier to help you if you provide a minimal demo, this way we can see your thought process and better see how we can help you. A minimal demo is something you've made and tried somethings to show what you've already tried. The best way to learn is to get your hands dirty and trying new things! Codepen is amazing for this, because you can just keep forking your pens and trying out different solutions. 

[Poylar]

24 minutes ago, mvaneijgen said:

Yes but you're pinning the container and then moving the elements up, so there will be a gap at some point. 

 

You can set pinSpacing: false (see docs https://greensock.com/docs/v3/Plugins/ScrollTrigger), but this will probably not do what you think it does. 

 

I think the best solution would be to have the element you don't want to have spacing to be part of the pinned container (see my last codepen), but this will change everything, so the best thing to do again is to remove ScrollTrigger! 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.

 

Explaining al this in text is really complicated, it is much easier to help you if you provide a minimal demo, this way we can see your thought process and better see how we can help you. A minimal demo is something you've made and tried somethings to show what you've already tried. The best way to learn is to get your hands dirty and trying new things! Codepen is amazing for this, because you can just keep forking your pens and trying out different solutions. 

okay i make it 

See the Pen rNrNPNM by poylar (@poylar) on CodePen

you solution with push section in pinned container works, but i dont wanna break my semantic structure. so may be one more solution?

I also have suspicions that pinSpacer creates space for another section (which is not)

I'm sorry for being so stupid, but believe me, I've tried a lot of options and read all the documentation, but I still can't beat pinSpacer

[mvaneijgen]

Make it so your last section doesn't animate  then you'll have no gap

 

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