Why won't the last coin flip??

[misterjworth]

I'm trying to create an interactive illustration that requires a bunch of coins to be flipped when a button is clicked. I managed to hack together something that works and builds a new timeline every click, but I can't figure out why the very last coin in the series won't animate. I'm new to GSAP and a javascript novice, so it could easily be something very simple. Any insights would be appreciated.

 

 

See the Pen EjGrGL?editors=001 by misterjworth (@misterjworth) on CodePen

[OSUblake]

You're off to a good start for being new to JavaScript and GSAP.

 

Everything is getting messed up because you are creating new elements every time you build your timeline. You don't need to create an element just to get it's instance or index number. Here are some jQuery methods that you should lookup: each, find, children, parent.

 

I setup your example to create coin objects, which contain all the properties you need to create the different timelines. 

 

See the Pen XbOpeP by osublake (@osublake) on CodePen

[misterjworth]

Wow! Thanks so much for taking the time to help.  I had a feeling I was taking the long way around the problem. I'll spend some time studying what you did there. What a great lesson!

[OSUblake]

We've all taken the long road, but you'll get there in time.

 

When I'm working with something that has behaviors and properties that don't exist on an element, I like to create some type of object to group everything together. I try to think of things as being more of a component than an element. The element is just what you see, but there's more to it.

 

So on your coin object you could add more properties to it, like the value of the coin. You could also add more methods to it, like one that moves it to new position. Here's an example of how that might look.

// Reduced example
var coin = {
  box: clone,
  moveTo: function(x, y) {
    TweenLite.to(this.box, 1, { x: x, y: y });
  }
};

// Move your coin
coin.moveTo(100, 200);