Squash and Stretch in After Effects
In this video tutorial we cover the animation of squash and stretch, and how it applies to animation in After Effects.
Want to go to the next level? Check out our courses at www.schoolofmotion.com
---------------------------------------------------------------------
Partial, Auto-Generated Transcript Below 👇
Joey Korenman (00:11): Hey there, Joey here for school of motion. And today we are going to talk about one of the principles of animation squash and stretch. If you're not sure what animation principles are, they're kind of the secret sauce that makes your work feel good. Squash and stretch is just one of the principles. And there's many more that we can't cover in this lesson. If you really want some in-depth animation training that will give you the foundation you need to create truly outstanding work. You're going to want to check out our animation bootcamp course. It's several weeks of intense animation training. You also get access to class only podcast PDs and actual critiques on your work from our experienced teaching assistants. Also, don't forget, you can sign up for a free student account so that you can grab the project files from this lesson, as well as assets from any other lesson on the site.
Joey Korenman (00:58): So let's go into after effects and take a look. All right. So here is the animation we built in the previous tutorial. Um, and I'm going to kind of walk through, um, where this started from and how it developed now. Um, whenever, you know, I do an expression like this, or like, uh, this is actually multiple expressions. Whenever I build something like this and after effects, it's not a process that's linear and goes from a to B and I know every step along the way, um, I'm basically experimenting and tweaking and thinking up new things and then having to go back and revise. Um, so I want to try to give you guys a little bit of the sense of that, because if you ever decide to try something like this, um, it can be very frustrating, but I want you to know that it should be frustrating.
Joey Korenman (01:48): That's just how this is. It's, it's, it's programming and it's animation and it's all wrapped into one and it's, and it can be very complicated when you get into stuff like this. But, um, if you just keep bashing your head against the keyboard, eventually you can get something really, really useful, hopefully that you can share with other people. Um, so let's make a new comp, all right. And, um, let's add a circle and by the way, just so you guys, if you didn't know this, if you want to add a new shape layer, um, you can select, you know, one of these options here, I pick the ellipse tool. If you double click it, it creates a shape that fills your comp. All right. So now if I hit you, you and you just double tap you, it brings up all of the, uh, options for a layer that are, that have been changed or are not the default settings. So it's bringing up the size of this layer. So now I can just set this to, let's say 50 by 50, get a nice little ball here. We're good to go. Okay. So first, why don't we just create a simple motion path just to try this out. All right. So we're going to start the ball here, position, and then we're going to go forward one second and move it up to the top right corner.
Joey Korenman (03:06): We are going to easy, ease those quickly coming to the curve editor. Um, and of course I am going to need to, uh, actually I'm going to use the shortcut method here, which, uh, I normally don't do, but just to save time, I'm going to use the speed graph editor. And I'm just going to pull these handles out, which is basically the same as creating a really strong S curve in the value graph editor. So if I do a Ram preview, you'll see that I still get that slow acceleration, quick movement in the middle, slow deceleration at the end. Okay. So now if we wanted to be able to just simply with one control, figure out the squash and stretch of this, how would we do that? Okay. So here's the problem I was having. Um, and I'm just going to make a quick little example here.
Joey Korenman (03:54): So here's another, uh, another circle for us. Now, if I set the anchor point of that right in the middle, and we just adjust the scale. All right. So if this circle was moving side to side like this, it would be easy to stretch it. Okay. You could stretch, stretch it on X squash on Y. Okay. Um, if it was moving up and down, same thing, you could stretch it on why squash it on X and get the shape you're looking for. Now, our circle is moving diagonally. It's moving, you know, like a 30 degree angle or something. So how do you stretch something at an angle and after effects? Well, um, as I showed you guys in the previous tutorial, you can go to a fact, grab a transform effect, set the anchor point and position to the center of your layer and then skew it.
Пікірлер: 48
So this is where those trigonometry classes from high school would come in handy, great video.
Joey! You have obviously taken this to another level and have undoubtedly been doing this for longer than I can imagine,you must sleep in a blanket of code! Thank you so so much
Good overview. Math a little wrong at 29:00 seconds. Squash/stretch is based on volume (area), so if you reduce one dimension by 50%, you need to *double* the other dimension (200%), not add 50% like you did. Easy example is think of a 10x10 square (area =100). If you decrease one side to 5, your expression increases the other side to 15, which makes the square 5x15 and shrinks the area to 75. Instead, divide by the scale width to keep the area constant. Cheers.
can't believe I've watched the whole video...thank you so much, what an amazing tutorial
Amazing tutorial, thank you so much.
Great stuff Joey! Thank you Subscribed
I completed this tutorial in 2021. I must say that as little as I understood and as wonky as it seems to control all the sliders. I managed to have a nice ball bounce effect using the controls you outlined. Thanks Joey!
Thank me later: fps=thisComp.frameDuration; p1=thisLayer.position.valueAtTime(time-fps); p2=thisLayer.position.valueAtTime(time+fps); delta=sub(p1, p2); angle=Math.atan2(delta[1], delta[0]); ang = radians_to_degrees(angle); -(ang)%360
@andrewleonidas1721
3 жыл бұрын
i know Im kinda off topic but does anybody know of a good site to stream new tv shows online?
@averyiker9137
3 жыл бұрын
@Andrew Leonidas I use flixzone. You can find it on google :)
@matthiasdamon9545
3 жыл бұрын
@Andrew Leonidas i watch on Flixzone. Just google for it =)
@stanleyriley8396
3 жыл бұрын
@Andrew Leonidas try FlixZone. You can find it on google =)
@RealPaPanda
2 жыл бұрын
I think that's their odd ways of thanking you
Great tutorial!
This is awesome. I could only keep up because I have a little knowledge on coding. But it's nice either way.
Obrigado por compartilhar esse conhecimento, muito boa a instrução.
Brilliant. Kudos !!!
@schoolofmotion
5 жыл бұрын
Cheers!
thanks!
thanks.. this tutorial, i learn a lot about after effect expression code.. ^_^
Thanks! It's good
@ADARANAKIOfficial
6 жыл бұрын
wait, I think Warp effect can do all of it easy
Thank you for this tutorial, it was useful to get me thinking about this in a different way. I found that parenting the layer with all of the expressions to another layer will break the values unfortunately
Thanks a lot, i couldn't get the last bits of code working. (the parts where you are setting up the Y offset) but ill give it another shot later on. Thanks again for the Tutorial. c:
Great tut! Went to the page (I am a member) but don't see the project files. Were they taken down?
I'm having trouble with the expression part too. I made the update from " radians_to_degrees" as shown in the video to "radiansToDegrees" as some have already suggested and it still won't follow the angle of the path. So is there a reason the following doesn't work? fps=thisComp.frameDuration; p1=thisLayer.position.valueAtTime(time-fps); p2=thisLayer.position.valueAtTime(time+fps); delta=sub(p1, p2); angle=Math.atan2(delta[1], delta[0]); ang = radiansToDegrees(angle); (ang)%360
@mxegal
2 жыл бұрын
same problem
i'm a little bit confused about Un_rotate effect. Could anyone explain to me please! Many thanks.
@JaredGauthier
6 жыл бұрын
Huy Ngô Minh Un-rotate basically cancels out the original rotate.
13:02 I write this expression p1=thisLayer.position.valueAtTime(time-(1/24)) . AE gives me this error "expression result must be of dimension 1, not 2". Anybody has had the same/knows the solution? Cheers
@speedmetaljesus
3 жыл бұрын
I sorted it out. If anyone has the same issue as me, this is the expression that worked for me: fps=thisComp.frameDuration; p1=thisLayer.position.valueAtTime(time-fps); [p1[0]] p2=thisLayer.position.valueAtTime(time+fps); [p2[0]] delta=sub(p1, p2); angle=Math.atan2(delta[1], delta[0]); angle=radiansToDegrees(angle);
Thanks for this tutorial. I tried but when I write the expression fps=thisComp.frameDuration; p1=thisLayer.position.valueAtTime(time-fps); p2=thisLayer.position.valueAtTime(time+fps); in rotation line it says "error at line 0 in property 'rotation' of layer 1 (shape layer) in comp 'comp 1' expression result must be dimension 1, not 2." There is no project file at the link I create own file maybe because of that? Will appreciate if can help.
@emilypoppa3892
5 жыл бұрын
Same here! I was also unable to figure it out.
@doziefranklin2490
5 жыл бұрын
Had the same problem..
@ColinBrain
5 жыл бұрын
Just keep following along and it'll correct itself with the next lines that come in
@alexrossed
5 жыл бұрын
This is really late, but its because after effects updatded the way that expression is written; it should read radiansToDegrees Worked for me.
Excuse me, where's the project file for this project?
(15:15) if you want velocity sir, why not simply ask ae to measure layer's velocity? ^_^ velocity = thisLayer.transform.position.velocity; // just like position has x: position[0] and y: position[1] component, velocity has them as well: velocity[0] and velocity[1] respectively. angleInRadians = Math.atan2( velocity[1], velocity[0] ); angleInDegrees = 180 * angleInRadians / Math.PI; // Math.atan2 (converted to degrees as done above) returns angle values between -180 degrees and 180 degrees. whenever layer moves (even so slightly) down these angles are positive, and whenever layer moves (even so slightly) up these angles are negative. -0/0 degrees both mean that the layer moves to the right, 90 degrees means that the layer moves down, -90 degrees means that the layer moves up, -180/180 degrees both mean that the layer moves to the left. // if one doesn't like this positive negative business and likes to work with angles between 0 and 360 degrees this can be fixed as follows: angleInDegrees = (angleInDegrees > 0) ? angleInDegrees : angleInDegrees + 360; // which in plain english means, that if the angle is positive then we leave it be, but if it's not then we add 360 to it.
OK... And now, the UI script link... Thank you
holy-molly ...
HI, on the script I get this Eror --> Error : ReferenceError: ang = radians_to_degrees(angle);
@BeDiscacciati
6 ай бұрын
Change it to ang=radiansToDegrees(angle);
@komako4624
3 ай бұрын
you are a legend! thank you so much@@BeDiscacciati
(17:28) nope. the line -(ang)%360; doesn't do anything useful to you except flipping the sign of your angle for no reason other than confusion. if anything this could only cause you some difficult to catch problems down the road. so please sir don't teach others to mindlessly follow you with this practice. as i've written before, the atan2 function (after the conversion to degrees) returns values between -180degrees and 180degrees, which can be cumbersome to work with because in after effects this scale goes like this: 0deg meaning hour 3 on the clock, 30deg meaning hour 4 on the clock, ..., 150deg meaning hour 8 on the clock, 180deg = -180deg meaning hour 9 on the clock, -150deg meaning hour 10 on the clock, ..., -30deg meaning hour 2 on the clock, -0deg = 0deg meaning hour 3 on the clock, whereas what we usually like to think in is the scale that goes like this: 0deg meaning hour 3 on the clock, 30deg meaning hour 4 on the clock, ..., 150deg meaning hour 8 on the clock, 180deg meaning hour 9 on the clock, 210deg meaning hour 10 on the clock, ..., 330deg meaning hour 2 on the clock, 360deg = 0deg meaning hour 3 on the clock, which is what you tried to accomplish with the said -(ang)%360; line. use (ang > 0) ? ang : ang + 360; instead.
Didnt understood anything from those expressions.They are very complicated.