Stacking card , scroll inside element

[olr]

I found a card solution that suits me and I'm trying to expand it. In each of my cards there will be a large amount of text that is scrollable.
Is it possible to connect this general scroll to also scroll the content with text before moving to the next tab?
Scrolls down for card1 -> scrolls .card-content of card1 -> enters card2 -> scrolls .card-content of card 2 -> enters card 3.....

See the Pen LYqJXej by Rafa-Olejarz-the-flexboxer (@Rafa-Olejarz-the-flexboxer) on CodePen

[ryan_labar]

You'll likely want to do this with transforms on the inner text layer with overflow: hidden (instead of scroll), and adding those to the tween (as a timeline). This way you can control how the user moves through the data. With a traditional scrollbar, as you have in the current version, it's really tough to control the inner scroll, as I'm sure you found out.

[Toso]

hi @olr 

 

maybe you looking for something like that? containerAnimation is great for creating this kind of animation,

also to hiding the scroll bar is a good idea as @ryan_labar already mentioned it will look better

 

 

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

[olr]

thanks for your answers!
I updated my code (codepen in the first entry)
Yes, sliding seems to be a better idea than scrolling, but I can't achieve it. Basically I can't achieve two things:

1. Scrolling/moving the content itself - when I tried to do this, I was moving the entire element, not its content.
2. I don't know how to stop the next tab from entering until the content moves to the bottom

For example, I added opacity there, it ends when the next tab is at the top, I would like the opacity to be done on scrolling to 0 and only then the next tab appears.
Ultimately, it is not supposed to be about opacity, but about moving/scrolling the content down.

 

 

 

[ryan_labar]

Definitely rough, but checkout my fork of your pen.
I think this can/should be done in a single gsap timeline with just one scrollTrigger instance per card...

You'll definitely want to tweak the math/timing to fit your needs but it's a working example:

See the Pen zYemMpv?editors=0010 by ryan_labar (@ryan_labar) on CodePen

[GreenSock]

This might also be helpful: 

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

[olr]

thank you for your answers and help! now I know how to do it thanks!

[olr]

However, I can't quite deal with it, I guess my problem is that I will always have a view of 100vh and the content that needs to be scrolled will fill its center. I wasn't able to transfer your examples to my project, as if another tab was always added before the entire content was shown. I need to stop the tab if the content is on scroll and move the text in the middle of the window to the very bottom. If you could take a look it would be great, I've tried many times and I could never show all the content before the next tab. I keep fighting and this is just an example of what I mean:

See the Pen LYqMGWj by Rafa-Olejarz-the-flexboxer (@Rafa-Olejarz-the-flexboxer) on CodePen

[Rodrigo]

Hi,

 

If you have sections with height less than the height of the screen you can wrap them inside another element and pin that parent element as shown in these demos:

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

 

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

 

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

 

Hopefully this helps.

Happy Tweening!