GSAP ScrollTrigger Cards scroll animation with appearance in advance

[DanielLav]

Hello GSAP Community! I'm working on horizontal scroll animations for cards and text block.

 

Here's my codepen with a minimal demo:

 

What I want to create:
1) So that the .trust-item cards start scrolling “in advance” and from the right edge, and earlier that the position of my container reaches the viewport. And it is necessary that at the moment of the main scroll the cards are in the center of the screen in height.

 

How it works now:
Now the .trust-item cards start scrolling in advance and from the right edge, but .trust-container remains at the very bottom of the viewport and does not occupy a position in the center of the screen.

 

2) I also want to ensure that the text block <div class="section-desc">Advantages</div> is fixed until the .trust-container takes up the middle of the screen in height and then the .section-desc should be pushed to the bottom of .trust-container and horizontal scrolling should be applied to .section-desc in the same flow as for .trust-item cards

 

I tried to implement this using position: sticky, but it didn't work.

 

I hope my explanation is clear. I really hope for the magic of the GSAP community and help.

See the Pen OJGYRWJ by ProjectDCL (@ProjectDCL) on CodePen

[mvaneijgen]

I would get in to the habit of never animating your trigger element, in this case it will probably be fine, but better save then sorry. I've wrapped your .trust-item in an element called .trigger and used that as the trigger element now your trigger and element you animate are separate. 

 

I've restructured your pen a bit, personally if a ScrollTrigger has an animation I like to combine the two, so there is no confusion what code does what. Then because you want things to animate first, but pin later, just add another ScrollTrigger that just does the pinning. I highly recommend reading the ScrollTrigger docs, just once to see what all kinds of awesome features are in there, because I've used a few. I’ve placed some comments in your JS to better explain things, please be sure to read through them! Hope it helps and happy tweening! 

 

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

[DanielLav]

Thank you, sir! It's completely solve my problem. And your explanation was so helpful 😉