Jump to content
Search Community

Animation stops working after adding 6th html item

redink test
Moderator Tag

Recommended Posts

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

Link to comment
Share on other sites

 

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.

 

 

 

 

 

 

  • Like 4
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...