Jump to content

Search In
  • More options...
Find results that contain...
Find results in...

Animation stops working after adding 6th html item

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 post
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() {
            forward = !forward;


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


Does this help?


See the Pen RwRwVbr 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 post
Share on other sites

Hi akapowl


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

Link to post
Share on other sites

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

  • Like 1
Link to post
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.