Ease presets for classic and shape tweens

- [Josh] Animate now comes with a set of easing presets for both classic and shape tweens, which are very similar to those available when using motion tweens. Let's lock down our Cup layer and unlock the Carafe layer. We can see if we scrub the timeline, the Carafe kinda comes down and goes back up, but there isn't any tweening going on here. Let's go ahead and select a number of these frames, and then, right-click, and choose to create a Classic Tween on our Carafe.

As you can see, we have a Classic tween from key frame to key frame, and we can also preview this by hitting Play and watching our tween. So, let's go ahead and choose one of these tweens by clicking anywhere between the two key frames. And we can see in the tweening area, how, right now, we have no Ease. Now this is the new bit, because we can click on that and select from a number of different Ease styles.

So, Linear, Ease In, Ease Out, In Out and even Custom Eases. So if we click something like Ease In, we can choose from Quad, Cubic, Quart, Quin, Sine, Back, Circ, Bounce and Elastic. I'm gonna go ahead and choose Ease In, Sine and just double-click to apply that. And on this final tween here, let's go ahead and apply an Ease to that as well.

And this will be an Ease In Out, again, of type Sine, so double-click to apply. Let's go ahead and preview this now. If I go back to frame one, and click the little preview button, we can see it has much more natural easing to these tweens. Note that the Ease presets when published for HTML5 Canvas, use the native easing functions of tween.js.