Jump to content
Search Community

Throwprops and Kinetic.js

kurtbr test
Moderator Tag

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 get the Throwprops plugin to play nicely with a Kinetic.js layer that I'm trying to rotate and am getting the following error:

 

Uncaught ERROR: No velocity was defined in the throwProps tween of [object Object] property: setRotationDeg

 

The relevant part of my code looks like this:

var tl = new TimelineMax();
tl.to(el, 2, 
          { 
            setRotationDeg: (360 * 1), 
            ease:Power1.easeIn, 
            onUpdate:layer.draw, 
            onUpdateScope:layer 
          })
      .to(el, 10, 
        { 
            throwProps: 
            { 
              setRotationDeg: { velocity:'auto', end:end },
              ease:Circ.easeOut,
              onUpdate:layer.draw, 
              onUpdateScope:layer
            }
        });
        });

 

The first to() works, but the second fails with the aforementioned error. This type of timeline works if I'm tweening a regular html element such as an image, but not so with the Kinetic canvas element.

 

Is there a way I can get these to work together?  Thanks in advance.

Link to comment
Share on other sites

Thanks Carl - you were right; I was not tracking getRotationDeg. That was the cause of the problem.

 

I get what you're saying about the second tween needing to begin before the first one ends so there is a velocity. Your pen demonstrates how changing that 0.4 start time affects this perfectly.

 

But what I've put together still works without having to do this, so I guess I'm confused as to why:

 

See the Pen amzGK by kurtschindler (@kurtschindler) on CodePen

 

Any feedback you can give me on this? This is working pretty much exactly as I want it, so I don't have any specific questions other than wondering if there is anything incorrect, or anything that could be improved. Otherwise I'm really happy with the result, and grateful for the support I've gotten on the forums which helped lead me in the right direction!

 

My goal is to have a wheel that, starting with an arbitrary angle, spins with an easeIn, then decelerates to a stop at a specific angle. This ending angle then becomes the starting angle for the next spin so that the wheel can be spun an infinite number of times.

  • Like 1
Link to comment
Share on other sites

Well, velocity by its very nature implies the passing of some amount of time, so in order to effectively measure it, one must correlate recorded values to the passing of time. For example, if rotation is 0 at a time of 0, and then rotation is 90 one second later, you can say that the velocity is 90 degrees per second. Of course that may not be entirely accurate, because what if there was some easing during its progression from 0 to 90? If an easeOut was used, the velocity at the very end would be less than at the beginning. To measure that you could capture the values at shorter increments of time, like every 0.1 seconds. And so on...

 

That's essentially what ThrowPropsPlugin is doing - it has an algorithm it uses to keep recording the last value at a certain increment (typically about 30 times per second) and then when you ask for the velocity, it does the math saying "okay, the time right now is ___ and the rotation is ___; when I checked _____ms ago, rotation was _____, so that means the velocity is ____." 

 

So if you start a throwProps tween IMMEDIATELY after another one finishes (which was affecting the same property), no time has elapsed for it to record new data to determine that the velocity is zero. See why? That's not a bug or a problem - it's just the nature of determining velocity. Some time must pass for the comparison to be meaningful and the math to work. 

 

So yes, your example is perfectly fine. I'm glad it's working well for you. I just wanted to chime in and explain the "why" :)

  • Like 3
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.
×
×
  • Create New...