Jump to content
Search Community

Reverse stacking cards

Dennyno test
Moderator Tag

Go to solution Solved by mvaneijgen,

Recommended Posts

Hi all,

I'm blocked to achieve the opposite animation of this pen 

See the Pen dyeYdRK by davedublin (@davedublin) on CodePen

 : 

Need to start each card smaller from the above one, (like a reverse trapeze / cone to give you the idea of the overall shape), then scale a card below, when its previous sibling one has gone (gonna handle values latelly.. actually just need to understand).

Tried all day with no luck...

I guess I can go for 4 custom animations for each card, but I bet there may be a loop solution for a stupid thing like this.

Actually exactly the opposite  of many demo I've seen... and sadly I'm using position sticky (maybe making the solution harder).

Thanks for any help here.

See the Pen oNPqbvy by DedaloD (@DedaloD) on CodePen

Link to comment
Share on other sites

Indeed the position: sticky is not helping. When working with GSAP/ScrollTrigger I like to have those handle everything, that way I know it all works. Personally I would start by laying everything out with CSS before starting with GSAP, so layout your reverse trapeze shape and then try animating them. 

 

Remove ScrollTrigger all together and just focus on the animation. A loop is always possible, but not always the best place to start, it happens to me also some times, that I'm stuck at trying to optimize things, before I even have a working version. I would focus on creating a working animation at first and focus on optimising/creating a loop later. 

 

I thought the first pen was yours, but later saw there was more to the post, so I changed the first pens logic, but that one is much easier, because it has just one ScrollTrigger with a animation on it. That would be my advise to create these kinds of animations. A timeline that gets controlled by ScrollTrigger. 

 

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

Link to comment
Share on other sites

Hi @mvaneijgen, this pen may render better the idea 

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

, exactly the opposite effect of this current pen...

Im blocked also with the positioning values. 

Need to show the red part a little, then "swipe" one card at time via scrolltrigger. I can remove the sticky position and pin the cards, but... where to pin them to achieve the result? Bottom? (I thinking like reversing the demo pen which works pinning on top). This can we easily achieved using something like Swiperslider o any slider framework, but I prefer bangin my head and trying a GSAP solution

Yep the red part si the trapeze I meant, lol... 😂 

Thanks a lot :)

 

stacking-from-bottom.jpg

  • Like 1
Link to comment
Share on other sites

  • Solution

It has all to do with your starting CSS. You have to layout your elements from where you want them to start animating and then animate them with GSAP. Again it is just an animation, so remove ScrollTrigger until you're happy with the animation.

 

The properties you want to animate with GSAP I set up via a .set() instead of CSS it is also a lot  easier to calculate things when you know how many there are or know the index of the element. Hope it helps and happy tweening! 

 

See the Pen GRXxxGB?editors=1010 by mvaneijgen (@mvaneijgen) on CodePen

  • Like 3
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...