ease out question

[productionArtistChad]

If I apply a keyframe towards the end of the animation and put a positive value (ease out) the clip speeds up then slows down. How do I get the clip to just slow down at the end and not speed up at the beginning?

here is a 100 frame animation of a box moving across the screen at frame 60 I put a keyframe with 100 easing (classic tween). See how on frame 60 it speeds up then slows down. what i want is at frame 60 for it just to slow down tell it reaches frame 100 and stops without speeding up at frame 60. I assume this cant be done with the classic tween and I need to animate this with code can someone give me the code to animate this so at frame 60 the symbol named "box" slows down to a stop?

http://chaddemoss.com/ease_test/ease_out.html

[ClayUUID · Accepted solution]

Positive easing values do not result in a tween curve that speeds up then slows down. That's called an in-out ease. Just using Animate's classic tweens and the easing field gets you easing out (positive values) and easing in (negative values). The ease-out curve starts fast, then ends slow.

As for your specific problem, you could futz around with the ease strength and duration to try to match the velocity of the tween preceding it, but that's probably Doing It Wrong. I'd start by making the entire thing a single tween, then set a custom easing curve to create the motion you want.

[productionArtistChad]

well i've done this in code that I stole in flash AS3 and it doesn't speed up when it gets to the ease part. how do I write this code in animate html canvass? you can see this code tells the object to go 500 pixels on the x axis and when it's finished doing that Regular.easeOut 50 more pixels over 40 frames. I have no idea how to write this code in html5 canvass. So it can be done.

import fl.transitions.Tween;

import fl.transitions.easing.None;

import fl.transitions.easing.Regular;

import fl.transitions.TweenEvent

var myTween:Tween;

var squarex:Tween;

function squareEnter() :void{

myTween= new Tween(textLineOne, "x", None.easeInOut, textLineOne.x, textLineOne.x+500, 230, false);

myTween.addEventListener(TweenEvent.MOTION_FINISH,finishF);

}

function finishF(e:TweenEvent):void {

squarex = new Tween(textLineOne, "x", Regular.easeOut, textLineOne.x, textLineOne.x+50, 40, false);

}

squareEnter();

[ClayUUID]

Animate uses the TweenJS library for programmatic animation in canvas mode.

CreateJS | A suite of JavaScript libraries and tools designed for working with HTML5