kurtbr

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: http://codepen.io/kurtschindler/pen/amzGK 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.

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.

+1 Forgive me for hijacking your post but I also wanted to add that it would be nice if there was a bit more documentation/examples on the use of multiple plugins. Specifically, can the ThrowProps plugin work with the Kinetic plugin? What would the usage look like? ....ThrowProps: { Kinetic: {....} } or Kinetic: { ThrowProps: {...} }? I assume it would be the former, but unless I made a mistake it didn't seem to work when I tried. thanks

Jack - not to worry, it does work. I should have clarified - I was using the trackpad on my macbook, and it's really hard to properly simulate the click, drag, let go gesture. If you use a 3-finger scroll you can move the wheel, but it just stops as soon as you pull off. With a little practice and using true click + drags, I got the action to work as expected. It works GREAT on a mouse and on a touch device. It's just the nature of the trackpad that makes it a bit challenging (or impossible if you try just a single 3-finger drag style gesture).

Awesome, Jack! Yes, I had not read your previous post at the time I was writing my last one. I'm looking forward to the final demo! I really appreciate the support and attention you and others have given (not just to me - I've read several threads that have helped greatly). Yes, it looks like this demo is exactly what I'm looking for, only as you noted I'll need to set a specific ending angle (and in my case, the starting velocity will be a static value - not based on user input). FYI - the demo as is isn't really working on a non-touch device. I couldn't get the thing to spin, it always stopped as soon as the mouse picked up. It works fantastically on my iPhone though! thanks again

Thanks Rodrigo, I appreciate the help! I had tinkered with the ThrowProps plugin but didn't get the result I wanted at the time - I'll try again and post back if I have any specific issues. One question right off the bat: your example is perfect as far as the general rotational deceleration animation goes, but I can't directly control the exact angle that the rotation comes to a stop on. This "Wheel of Fortune" example in KineticJS is identical to the scenario I'm trying to achieve. This sample is using Kinetic's animation API where the animation code is hand-written and run frame-by-frame. Is it possible to reproduce this exact same demo using GASP and with all the benefits it brings (less code, more flexibility, better performance)? thanks again for your help!

I'm struggling to find a way to use the GSAP to achieve what I didn't expect to be so hard: a spinning wheel with an initial acceleration and then a deceleration to stop (at a predefined angle). I'm specifically trying to make a roulette wheel for a game, but this would apply to any spinning wheel type scenario. I've played around and looked at several of the Club GS plugins and couldn't find a way to use them for my needs. Just using a series of timeline events out of the box gets me close... here's an example of initial acceleration going into a longer spinning segment. tl.to(el, 2, { rotation: 360 * .5, ease:Power1.easeIn }) .to(el, 4, { rotation: 360 * 1, ease:Power1.linear }) ...I had hoped with several timeline events at specific "speeds" I could simulate the acceleration/deceleration effect I was going for, but unfortunately it's near impossible to have the one tween end at the exact same rotational velocity as the next one is starting at. What I would like to do is to set a specific ending angle (eg. 360*10 + 45 = spin ten times, plus another 45deg) and then have the velocity of the rotation vary based on some custom bezier curve. Can anybody help me out with this? This must be possible.

I'm using the KineticPlugin and DirectionalRotationPlugin with a Timeline, and I noticed that the first timeline rotation works, but the subsequent one did not. Debugging the KineticPlugin.js source, I noticed that _directionalRotationExp.test(val) would evaluate to true on the first timeline 'to' action, and then false on the second one, even for the exact same value. This is what was causing the second action to fail to rotate. I'm not Regex expert, but it appears to be due to the the global flag on the regex. See: http://stackoverflow.com/questions/1520800/why-regexp-with-global-flag-in-javascript-give-wrong-results When I remove the 'g' from the regex definition, or recreate the regex inside the plugin definition, the test passes as expected, and everything works as expected. Have I indeed found a 'bug', or is there something I'm doing wrong to cause this to happen? My code looks something like this: var tl = new TimelineMax(); tl.to(obj, 2, { kinetic: { rotationDeg: 270 + '_cw' }, }); tl.to(obj, 2, { kinetic: { rotationDeg: 290 + '_cw' }, }); tl.play(); thanks!