Toggle Looping Cards

[designedaudio]

First post here!

I've read documentation, searched the forums and noodled around quite a bit before posting and I'm still stuck! So here's what I'm trying to accomplish. I'm sure it's super easy solution and I'm probably missing a minor step.

I have a section of cards that are stacked and they're overlaying each other. When you click it the card div it pops up, if there is already an active card the previous one shuffles back into the stack and the new one pulls up.

Here's my code that I have so far. It only shuffles them up and down without previous going back into the stack.

 

const GetCards = document.querySelectorAll(".tools-card");

       

GetCards.forEach(function(cardList, index){

     const cardTL = gsap.timeline({paused: true}).to( cardList, {duration: 0.5, x: "-=10", y: "+=250", scale: 1.05, ease: "expo.inOut"})

     let activeCard = false;

     cardList.addEventListener('click', () => {

         if(activeCard === false){

            cardTL.play();

            activeCard = true;

         }else{

            cardTL.reverse()

            activeCard = false;

         }

     })  

})

 

I've tried several things like adding tags to the timeline and several methods() but I clearly don't know what I'm doing! Some guidance would be stellar.

Thanks in advance.

See the Pen GRwmNBa by designedaudio (@designedaudio) on CodePen

[mvaneijgen]

Hi @designedaudio welcome to the forum!

 

I'm not really sure what it is you're asking and also your pen didn't work (you can't import in Codepen, but you can in the Javascript settings panel load any script you want).

 

Personally I would set all the javascript transforms with GSAP instead of having them in your CSS, it will makes it easier to tweak things with GSAP.

 

When I looked at your pen, my idea was to create the following and it took me some tinkering to get it to work, but it was a fun challenge. I don't think this is what you where looking for exactly, but maybe it gives you inspiration or allows you to rephrase your question, so that we can better help you.

 

See the Pen GRwmWoE?editors=0011 by mvaneijgen (@mvaneijgen) on CodePen

[designedaudio]

On 6/30/2023 at 2:42 AM, mvaneijgen said:

WOW You got it working. This was exactly what I was trying to do!

I'm relativly new to Javascript and am a new user to Codepen. I wasn't able to get Codepen working with my project.

Thank you for the solution, I will study it so I understand.

"I would set all the javascript transforms with GSAP instead of having them in your CSS" Good tip! I will update my project.

Hi @designedaudio welcome to the forum!

 

I'm not really sure what it is you're asking and also your pen didn't work (you can't import in Codepen, but you can in the Javascript settings panel load any script you want).

 

Personally I would set all the javascript transforms with GSAP instead of having them in your CSS, it will makes it easier to tweak things with GSAP.

 

When I looked at your pen, my idea was to create the following and it took me some tinkering to get it to work, but it was a fun challenge. I don't think this is what you where looking for exactly, but maybe it gives you inspiration or allows you to rephrase your question, so that we can better help you.