Jump to content
GreenSock

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

Why won't the last coin flip??

Recommended Posts

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

Link to post
Share on other sites

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

  • Like 4
Link to post
Share on other sites

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!

Link to post
Share on other sites

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);
  • 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.

×