Jump to content
GreenSock

misterjworth

Why won't the last coin flip??

Go to solution Solved by OSUblake,

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

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 comment
Share on other sites

  • Solution

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 comment
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 comment
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 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.
×