Stacking card effect different card lengths

[dogzzz]

Hi there,

 

I'm trying to replicate this effect on the scrolling cards: 

 

https://aawum.com/about/

 

In the example all the cards are the same length

 

I can't seem to get it to work , I've tried so many things:

* setting a timeline to start on the pinPanel element and then bringing the cards up. The problem is when I pin the first card you cant scroll down and read it all

 

* animating each card one by one

 

* using position absolute and setting what position to go to (it animates in the wrong direction)

 

* animating each card upwards by the height of the previous card. The problem is they all overlap

 

The goal is the be able to scroll the first card and read it, then each card comes over the top still showing the title behind. Problem is you can't seem to pin the first card without losing the content that overspills the viewheight of the screen.  Then if you do scroll down the content of any card that is too long is visible behind. I thought about maybe allowing scroll through the first card and losing the title as it scrolls off screen, then starting from card 2 to keep the titles in but I'm not sure that can work either. 

 

Trying to apply the effect of the site above to this, can't seem to get it to work, spent a week on it and completely stymied. Any help greatly appreciated. Have looked through the forums but can't seem to apply a working solution.  Thank you 

See the Pen mdaoRyL by zrrrrr (@zrrrrr) on CodePen

[Rodrigo]

Hi,

 

There are literally tens of threads and examples in the forums about stacking cards effects with ScrollTrigger.

 

Here are a few that could help:

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

 

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

 

See the Pen WNzBrdz by Mohsen-Khakbiz (@Mohsen-Khakbiz) on CodePen

 

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

 

Hopefully those provide a good starting point.

Happy Tweening!

[dogzzz]

Thanks Rodrigo,

 

Yeah I know --  I've updated my codepen, why do the cards fly in left to right instead of from down to up? That's the main issue

 

Then there's another issue that the cards get pinned so you can't read anything below the viewport cut off

 

Sorry I realised scrolltrigger wasn't loaded correctly in the codepen before so hard to see the issue 

 

Thank you 

[Rodrigo]

Hi,

 

Your codepen example is not loading ScrollTrigger, so we can't see the issue you describe.

 

Please do your best to provide a working minimal demo that clearly demonstrates the problem you're having.

 

Happy Tweening!

[dogzzz]

Sorry don't know what happened there, it should be working now: 

See the Pen XWoQmrJ by zdogg (@zdogg) on CodePen

 

Thank you 

[dogzzz]

Hopefully scroll trigger is working on this demo, any idea even why the cards are going left to right not bottom to top?

 

Thank you 

[GreenSock]

I don't have much time to look at this in depth, but one big problem is that you applied a CSS transition to the element(s) that GSAP is controlling which completely interferes with things and also degrades performance. 

 

Are you trying to do something like this?: 

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

[dogzzz]

Yes but also be able to scroll each card to the end before the next one comes up 

 

is it better to absolute the cards and bring them to top: 0 then? But they again need to come up from the bottom, then I tried that they came in from the top ?

 

also to deal with different lengths I was going to overflow:hide the box that holds all the cards which kind of works but again you only get to see the length of a card up to 100vh which is tricky. I know the example above has shorter cards that all Fit in 100vh so it’s ok but doesn’t work for my case 

thank you 

[Rodrigo]

Hi,

 

19 hours ago, dogzzz said:

also to deal with different lengths I was going to overflow:hide the box that holds all the cards which kind of works but again you only get to see the length of a card up to 100vh which is tricky. I know the example above has shorter cards that all Fit in 100vh so it’s ok but doesn’t work for my case 

 

In this case I think this example is a better approach:

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

 

Hopefully this helps.

Happy Tweening!

[dogzzz]

Nice thank you 

[dogzzz]

Which part of the animation there would control if you wanted each new panel to be offset by the height of the title ( first card) then the height of two titles (next card) etc etc? Thanks 

[GreenSock]

Are you trying to do this?

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

[dogzzz]

Yeah trying to do exactly that, but also be able to read each card to the end (eg the first card is quite long) 

 

thank you 

[GreenSock]

I'm not really sure how you're wanting that to work. I mean what if it doesn't fit on the screen? You're trying to make the header chunk stay put...but the content below it move up BEHIND that until it starts pulling the next section with it? 

 

This is all probably doable with enough elbow grease (a lot of custom logic), but it's well beyond the help we can provide for free in these forums. We do offer paid consulting services. If you'd like to explore that, simply contact us directly. 

[dogzzz]

Yeah true, 

Maybe there’s a way to stack the titles as you scroll through the variable height stacked pinning example

Yeah ok will think

Thanks

[dogzzz]

Hi,

 

I'm using exactly the same code in my project as on the codepen but I'm getting different results; the panels are sliding in from the side instead of down to up (the codepen is the right behaviour, my project with the same code is being weird), wondering if that's to do with gsap or is that something else?

 

videos of unexpected behaviour on mobile and desktop:

 

https://tinyurl.com/yb93d4t3

 

https://tinyurl.com/2xhnfv22

 

Thank you 

[GreenSock]

Did you make absolutely sure that you don't have any CSS transitions applied (that was your original issue that we diagnosed)? My guess is that's the problem. 

 

If you'd like more help, we really need to see a minimal demo, like in CodePen - we can't effectively troubleshoot a live site because there are way too many factors and it's too difficult to make tweaks and see the results.