Simple scale animation in classic tween is skewing?

[defaultvh6i3j5xtp9d]

I have a very simple animation I am trying to do, and I am not extremely experienced in Animate so I feel like I must be missing something very basic, but cannot find any explanation or figure it out myself.

I simply want to take this shape and do a classic tween to animate the y scale from 100% to -100%  so the top of this envelope can appear to close, and I've moved the transform point to the bottom so it will scale around that. (I made sure the transform point was moved and is in the same place on all keyframes before adding any animation.)

The rectangle is a drawing object within a graphic symbol on it's own layer. I simply insert a keyframe on frame 10, change the scale to what I want the final position to be, then right click between the keyframes on the timeline to create a classic tween, but instead of simply scaling it seems to also animate the skew?

Why is this happening? I've tried doing the exact same thing with a motion tween, and this doesn't happen, but I would prefer to use a classic tween for performance purposes.

[kglad]

a classic tween is bound to fail.  ie, the tween engine has no idea you want to tween on the y-scale as opposed to rotating to achieve the desired end-state.

you can use a motion tween (on an object) or a shape tween (on a shape).

[_keyframer]

It's totally possible! Just don't rely on the tween span to do it all for you. I'll create a quick video tutorial as that will be easier to explain....Gimme time.

[_keyframer · Accepted solution]

This should only take you 1-2 min if you follow the attached video tutorial I made for you. Cheers.

ENVELOPE ANIMATION TUTORIAL 

[defaultvh6i3j5xtp9d]

Thank you! That was extremely helpful and a little flattering that you went through the effort to make a whole video about it. 🙂 After more trial and error I assumed it had something to do with the fact that the object was technically being flipped, but as I'm used to animating in After Effects, the way the scaling and animation tools work for classic tweens is somewhat unintuitive for me.

I assume that motion tweens are designed in a way that is more similar to Adobe's other animation/keyframing programs (such as After Effects), which is why they don't reproduce this problem. But I supposed classic tweens are 'classic' for a reason, haha.

[kglad]

@_keyframer  yes, thanks for that tutorial.

but after as3 testing, there was no performance benefit over a motion tween.  maybe with previous versions of animate there was a performance benefit of classic over mothion tweens.

[_keyframer]

Good to know. I should add a disclaimer that I almost always export my content to video these days.

[kglad]

i was going to post that i'd only tested with as3 and found no difference and that @Colin Holgate mentioned a difference with canvas projects.

but that made me wonder and so i tested for canvas, and again found no difference.  now, this was just one test:

2 files set at 120 fps, both canvas, one with a 50 frame classic tween and one with a 50 frame motion tween

both tweens were tweening the y-scale of a triangle from 100% to -100% (same as op's)

every 100th loop of the 50 frames i would use console.log to print the average fps

exactly the same code in both:

frame 0, initializing code*,

frame 49, store fps and output average every 100 loops**

both started at ~113.4 and approached 114 fps.

here's the fps output after 600 loops of the classic tween (ie, 600 classic tweens of 50 frames length):

113.46794346613162

113.64077392510339

113.70367192208876

113.7539584391525

113.77168228283782

113.91331824330042

here's the fps output after 600 loops of the motion tween (ie, 600 motion tweens of 50 frames length):

113.40623951596177

13.66628953521266

113.71534280727425

113.79319892915943

113.8082540270947

113.89985522267757

* frame 0 code:

if(!this.alreadyExecuted){
this.alreadyExecuted = true;
this.fpsA = [];
this.loop = 0;
}
this.startTime = (new Date()).getTime();

** frame 49 code:

this.fpsA.push( 1000*(this.currentFrame+1)/( (new Date()).getTime()-this.startTime) );

this.loop++;
if(this.loop%100==0){
this.ave = 0;
for(var i=0;i<this.fpsA.length;i++){
this.ave += this.fpsA[i];
}
console.log(this.ave/this.loop);
}

[Colin Holgate]

I see that Animate now includes the release version of CreateJS 1.0.0. That was released five years ago, but it can take a while for the libraries to be updated in Animate. Not sure when it started to be included.

It does look like the performace issue with Motion tweens is fixed. The tweens are still made up from a lot of single wait tweens, like this:

	this.timeline.addTween(cjs.Tween.get(this.instance).wait(1).to({x:38.45},0).wait(1).to({x:76.9},0).wait(1).to({x:115.25},0).wait(1).to({x:153.7},0).wait(1).to({x:192.1},0).wait(1).to({x:230.55},0).wait(1).to({x:269},0).wait(1).to({x:307.4},0).wait(1).to({x:345.85},0).wait(1).to({x:384.25},0).wait(1).to({x:422.7},0).wait(1).to({x:461.15},0).wait(1).to({x:499.55},0).wait(1).to({x:538},0).wait(1).to({x:576.4},0).wait(1).to({x:614.85},0).wait(1).to({x:653.25},0).wait(1).to({x:691.7},0).wait(1).to({x:730.15},0).wait(1).to({x:768.55},0).wait(1).to({x:807},0).wait(1).to({x:845.4},0).wait(1).to({x:883.85},0).wait(1).to({x:922.3},0).wait(1).to({x:960.7},0).wait(1).to({x:999.15},0).wait(1).to({x:1037.55},0).wait(1).to({x:1076},0).wait(1).to({x:1114.45},0).wait(1).to({x:1077.3},0).wait(1).to({x:1040.15},0).wait(1).to({x:1003},0).wait(1).to({x:965.85},0).wait(1).to({x:928.7},0).wait(1).to({x:891.55},0).wait(1).to({x:854.4},0).wait(1).to({x:817.25},0).wait(1).to({x:780.1},0).wait(1).to({x:742.95},0).wait(1).to({x:705.8},0).wait(1).to({x:668.65},0).wait(1).to({x:631.5},0).wait(1).to({x:594.35},0).wait(1).to({x:557.2},0).wait(1).to({x:520.05},0).wait(1).to({x:482.9},0).wait(1).to({x:445.75},0).wait(1).to({x:408.6},0).wait(1).to({x:371.45},0).wait(1).to({x:334.3},0).wait(1).to({x:297.15},0).wait(1).to({x:260},0).wait(1).to({x:222.85},0).wait(1).to({x:185.7},0).wait(1).to({x:148.55},0).wait(1).to({x:111.4},0).wait(1).to({x:74.3},0).wait(1).to({x:37.15},0).wait(1));

but that seems not to matter for performance, only file size.

[Colin Holgate]

Motion tweens were added in 2008, by which time animators may have had over 10 years of doing things with Classic tweens, and may still not need to use motion tweens.

Motion tweens do let you tween different parameters over different durations very easily, and the performance is perfect if you are doing ActionScript 3 documents, whether that is to export as SWF, AIR, or to video.

The problem case is HTML5 Canvas. Every frame of a motion tween is exported as a single frame EaselJS tween, which leads to a huge amount of code, and very poor performance. You get the same issue if you use a custom ease classic tween.

So, if you are animating for HTML5 Canvas, do everything using the presets in a classic tween. Then the performance will be good. If you're animating for video export, or to play back in an AIR app, motion tweens would be easier to use.