redink Posted October 7, 2020 Share Posted October 7, 2020 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 More sharing options...
akapowl Posted October 7, 2020 Share Posted October 7, 2020 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. 4 Link to comment Share on other sites More sharing options...
redink Posted October 7, 2020 Author Share Posted October 7, 2020 Hi akapowl That's brilliant, thank you. I would not have got their on my own. Link to comment Share on other sites More sharing options...
redink Posted October 12, 2020 Author Share Posted October 12, 2020 Thanks again - yes that does help and the Migration link is very useful. 1 Link to comment Share on other sites More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now