Vertical scroll cards

[ketchupmarketing]

Hi

 

Trying to create vertical scroll cards. Checked every example I could find, but they do not seem to do exactly what is needed in my case.

 

The idea is that cards reveal themselves on vertical scroll, this part works as expected.

 

Currently the cards stack on top of each other. Previous cards need to go off the screen ( -y axis ) as the next comes into view. Or at the very least, change opacity to 0.

 

The problem is that cards might have different amount of content and keeping them stacked is not really great as content clashes ( please see example)

 

We are running animation on cards array. I fee that the solution could be to run animations on individual cards, but that is something we are struggling with  as pinContainers break.

 

Any suggestion would be much appreciated.

 

See the Pen 76a2abc8c8b16e775fd2e578bdc93725 by ketchupmarketing (@ketchupmarketing) on CodePen

[mvaneijgen]

Hi @ketchupmarketing if you share a pen please make sure it is forkable (you've disabled this in your settings), so that we can share a pen back based on your code.

 

I've converted your tween to a timeline and set ScrollTrigger so that it is controlling that timeline. I didn't really get what all the calculations were doing and I hadn't had time to scope everything correctly. But right now the cards move in and out of the viewport with two tweens that animate at the same time. I've made the stagger amount twice as long as the duration of the tween, so it 'waits' for every card in the center. I've also removed your .fromTo() tween, because GSAP is smart and it will just animate to the browsers defaults (or your initial css) if you use .from()

 

I've disabled ScrollTrigger for now, because 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. 

 

Hope it helps and happy tweening! 

 

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

[ketchupmarketing]

Thanks @mvaneijgen

 

This in theory does mostly what we need. I guess we failed to mention that there could be multiple instances of this section per page.

 

We tried to pass in Array and DOM objects in place of .scroll-card:not(:first-child) and .scroll-card:not(:last-child) based on

 const cards = instance.querySelectorAll(cardSelector);  ( instance is the key element here )

 

but the above does not work. It sort of breaks both of them.

 

Docs state that object is accepted. Wondering it is different sort of object: https://gsap.com/docs/v3/GSAP/Timeline/from()/

 

Thanks for letting me know about the privacy settings and the useful tip about disabling scroll trigger. very helpful

 

 

[mvaneijgen]

7 minutes ago, ketchupmarketing said:

This in theory does mostly what we need. I guess we failed to mention that there could be multiple instances of this section per page.

I've updated my pen to include scoping via the selector utility method, see https://gsap.com/docs/v3/GSAP/UtilityMethods/selector()/ for more info

 

7 minutes ago, ketchupmarketing said:

 

We tried to pass in Array and DOM objects in place of .scroll-card:not(:first-child) and .scroll-card:not(:last-child) based on

 const cards = instance.querySelectorAll(cardSelector);  ( instance is the key element here ) but the above does not work. It sort of breaks both of them.

I've never seen such a function, seems fancy, so I thought since you guys know what you're doing including scope would be a none issue. 

 

6 minutes ago, ketchupmarketing said:

Docs state that object is accepted. Wondering it is different sort of object: https://gsap.com/docs/v3/GSAP/Timeline/from()/

I don't know what you mean by this. 

 

Here is the updated pen. Hope it helps and happy tweening! 

 

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

[ketchupmarketing]

 

Very good explanation. "selector()"  utility function is indeed what we were after. 

 

Marking as resolved.

 

Thanks.