Animation stops working after adding 6th html item

[redink]

Hi. This is my first time using Greensock on a project and I am loving it so far. But I am very much finding my way as I go along. I have two questions about my codepen.

 

I have adapted a 'card flip' codepen and all seemed fine - however if I add a 6th card item to the html, the animation stops working.  The codepen shows the basic page with 5 card flips that work, but if you edit the code pen and add another card (copy and pasting from <!--CARD--> to <!--end CARD-->), it stops! I apologise in advance if I am not seeing something basic, but any help is much appreciated.

 

My other query is when it working, I have an issue with the play/reverse code. If one card is showing blue and another green, it takes two clicks to get the animation working again. I understand it is something to do with the current state of the play - but just can't figure out a solution.

 

Thanks so much.

See the Pen jOrOBrM by rcopestake (@rcopestake) on CodePen.

[akapowl]

 

Hey @redink - welcome to the forums

 

Edit for correction:

What I wrote before was actually not entirely true.

 

One Problem you are having, is that your click-function adresses every element with the class of .card-container, when it actually should only be adressing this one that is being clicked on - so you change the neccessary variable for one element whenever clicking another.

 

I changed the logic for your click-function to this

 

           var forward = false;

           $(this).click(function() {
            if(forward)
            {
              this.animation.reverse();
            }
            else
            {
              this.animation.play(); 
            }
             
            forward = !forward;
             
        });

 

and it seems to resolve any problem you were having with adding more elements.

 

Does this help?

 

See the Pen ffa518875b0746985490da37c5e10bcf by akapowl (@akapowl) on CodePen.

 

 

 

Also, you are using a recent GSAP version, but are still using the old syntax for the most part.

Try migrating your syntax to the new one - it might save you some trouble further down the road.

 

 

 

 

 

 

[redink]

Hi akapowl

 

That's brilliant, thank you. I would not have got their on my own.

[redink]

Thanks again - yes that does help and the Migration link is very useful.