Pin multiple element on a section pin

[Djoo]

Hi everyone this is my first post ! I really try hard to find a way to do it properly but i find nothing ... so i'm here for help 😰

I really want to reproduce this animation : https://okcest.cool/


I just want the animation where the section get "pin" and when all the card come 1 by 1 (i don't want the animtion after all of that)

My html is like:

<section>
      <div class="left">
            Random text
      </div>
     <div class="right">
           <div class="card"></div>

           <div class="card"></div>

           <div class="card"></div>

           <div class="card"></div>

           <div class="card"></div>

    </div>
</section>

[Rodrigo]

Hi @Djoo and welcome to the GreenSock forums!

 

Here is a simple example of stacking cards using ScrollTrigger:

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

 

If you search in the forums you'll find several threads with many variations on this subject.

 

Hopefully this helps.

Happy Tweening!

[Djoo]

Is it possible to dont use an empty <div>  ".end-element"  and just calculate the number of card and stop at the last ?

[Djoo]

And with your exemple they are all animate near same time, i want the second card to animate ONLY if the first one is finish

And i want the section to be fixed too

[mvaneijgen]

Hi @Djoo, this is just a starting point @Rodrigo suggested. It is now up to you to get it to a state you're happy with.

 

Everything is possible with GSAP, the only part holding you back is your creativity. Personally I use codepen to try out new ideas, I usually then just keep forking my pen to try out different ideas, either because I think it could be better or my original idea was not working. Usually at version 10 I got something I'm happy with. Creating forks of your pen will allow you to fall back at earlier ideas if something new is not working.

 

If you're suck, just post back here with your minimal demo of what you're stuck on. Hope it helps and happy tweening! 

 

[Djoo]

I understand that... but i already send you an exemple of what i need... if i did that it's because i really try hard to make it and it never work the way i want 

[GSAP Helper]

We love helping with GSAP-related questions, but unfortunately we just don't have the resources to provide free general consulting, logic troubleshooting, or "how do I recreate this cool effect I saw on another site?" tutorials. 

 

You're welcome to post in the "Jobs & Freelance" forum for paid consulting, or contact us directly.