A couple of questions regarding draggable.

[styke]

Hi, 

 

I'm making a small HTML5 roulette game. Draggable has so far proved very useful, but I'm running into some problems with performance while the roulette is spinning after it has been let go. 

 

I have done everything possible to optimize the animation, and while it is smooth, as soon as I add in effects elsewhere it starts to lag.

 

I have an idea to see if I can increase the performance even further: use draggable to gauge the velocity and duration of the animation, and then set a CSS transition to smoothly spin the roulette to a final state. 

 

First off, I need a way to disable the tween initiated by GSAP when the user spins the wheel. I have not been able to find anything that would let me do this in Draggable's documentation yet. 

 

I've found that calling this creates an effect of animation stopping:

onDragEnd : function(){
    this.disable();
    this.enable();
    // or 
    this.pause();
    this.start();
}

This stops the animation, but my current program uses the velocity tracker to work - I was wondering if there's a different way that wouldn't require me to reprogram other parts of my script. 

 

Also, is there a way to find out the end rotation degrees/how many degrees the wheel is planning on turning for? This would make my code much cleaner and simpler when feeding in the CSS transition.

 

Missed the endRotation property first time round, my bad

 

Thanks

[Carl]

Each Draggable instance (that has throwProps:true) has a tween property as described in the docs:

 

tween: The TweenLite instance that gets created as soon as the mouse (or touch) is released (when throwProps is true) - this allows you to check its duration or pause/resume or change its timeScale or whatever you want. Keep in mind that a new tween is created each time the element is "thrown". You can easily get it when the user releases the mouse (or touch) by referencing this.tween inside the onDragEnd callback.

 

http://api.greensock.com/js/com/greensock/utils/Draggable.html#tween

 

The pen below illustrates killing the tween and getting its duration onDragEnd:

http://codepen.io/GreenSock/pen/96452e2e1b51e29aa2534d959cfbabd6

function processAndKillTween() {  
console.log(this.tween.duration())
  this.tween.kill();
}


//create the knob Draggable
Draggable.create(knob, {
  type:"rotation",
  throwProps:true,
  edgeResistance:0.85,
  maxDuration:20,
  onDragEnd: processAndKillTween
});

Does that help?

 

Also, curious to know how your CSS transition approach works out.

[styke]

Each Draggable instance (that has throwProps:true) has a tween property as described in the docs:

 

tween: The TweenLite instance that gets created as soon as the mouse (or touch) is released (when throwProps is true) - this allows you to check its duration or pause/resume or change its timeScale or whatever you want. Keep in mind that a new tween is created each time the element is "thrown". You can easily get it when the user releases the mouse (or touch) by referencing this.tween inside the onDragEnd callback.

 

http://api.greensock.com/js/com/greensock/utils/Draggable.html#tween

 

The pen below illustrates killing the tween and getting its duration onDragEnd:

See the Pen 96452e2e1b51e29aa2534d959cfbabd6 by GreenSock (@GreenSock) on CodePen

 

Does that help?

 

Also, curious to know how your CSS transition approach works out.

 

Elsewhere in my program I use `ThrowPropsPlugin.getVelocity(this.target, "rotation")` to get velocity and switch the numbers as the roulette spins, getting progressively slower until the animation stops. I have the math skills of a hammer and would not be able to write something similar with just the time and initial velocity

 

The problem with kill is that it kills the whole tween - even the behind the scenes stuff mentioned above. 

 

Ideally a solution would kill the animation, but leave the tween working in the background.

 

I'll post a seperate thread if this idea works out. 

[GreenSock]

A few questions:

1. What do you mean by "kill the animation but leave the tween working" - isn't the tween the thing doing the animation? I'm confused about what you want stopped and what you want to continue. Do mean the velocity tracking? 
2. Are you only pursuing CSS Transitions because you think they'll perform better? If so, please make sure you read http://css-tricks.com/myth-busting-css-animations-vs-javascript/. They're often slower. Have you tried setting force3D:true on the elements that you're animating? That may help. 

[styke]

 

A few questions:

1. What do you mean by "kill the animation but leave the tween working" - isn't the tween the thing doing the animation? I'm confused about what you want stopped and what you want to continue. Do mean the velocity tracking? 
2. Are you only pursuing CSS Transitions because you think they'll perform better? If so, please make sure you read http://css-tricks.com/myth-busting-css-animations-vs-javascript/. They're often slower. Have you tried setting force3D:true on the elements that you're animating? That may help. 

 

 

I'm sorry, I'm finding it hard to find the right terminology for my problem. Put simply, I need just the velocity tracking to continue as normal. 

 

In regards to the transitions, I want to see how it works with other effects on the page. Otherwise any other animation effects on the page cause the throwprops animation to lag on mobile devices... 

[GreenSock]

For the record, the biggest bottleneck BY FAR in most animation projects is graphics rendering in the browser which has absolutely nothing to do with GSAP. So I suspect you'll find that it doesn't really help to do the CSS transitions thing because you're still asking the browser to render graphics and repaint the same pixels regardless of whether you have GSAP request the changes or CSS Transitions. And on some mobile devices, I found CSS transitions to be significantly slower (literally half the speed or less). Then again, maybe in your situation they'll be faster. I'm just offering you a warning before you burn a lot of time expecting CSS transitions to work miracles performance-wise. 

 

Make sure you're using 3D transforms to get the compositor layer, and minimize the area of change in the browser (pixel repaints) and use transforms instead of top/left to animate position. Those tweaks make the biggest difference, especially minimizing the area of change.

 

Good luck! Let us know what you discover.