Interpolation Expressions (linear & ease) - Adobe After Effects

[@BenMarriott]

awwww yeah! I love learning more about these expressions. :) Please keep them coming

[@LucasEduardoRibas]

U guys could make a collaboration video! it would be awesome!

[@ECAbrams]

Ben Marriott in the house! I love what you're doing on your channel. Your stuff is so succinct but packed with knowledge. So you keep them coming too!

[@skiblink]

Coming from one of the best AE/animation tutorial-ists!

[@서울에서의위시리스트]

I love you guys two. You both are brilliant and helpful for us.

[@zackbell8284]

Thank you Evan, as always, for this wonderful tutorial. The fly in the box was way above my head. I didn’t understand a friggin word of it. But when I get some time I’ll sit down at my machine and follow along with you. Over the years I have learned so much from you. You were the first AE tutorial I ever watched so many years ago, and I’m still learning from you today. Just want to say a heartfelt “thanks”!

[@ankursalunke5974]

This guy goes into details man great!!!!

[@benjamino5]

This instantly solved a problem I didn't know how to handle. Thank you!

[@AnimatedVish]

Awesome tutorial!! This is how I learnt Linear Interp[olation. For the fly stuck in the box case, is it possible to modify the expression for a circle? I tried changing the expression for a circle never got it to work.

[@consortium5170]

Thank you so much for offering this invaluable piece of information sir! You are awesome!

[@ECAbrams]

Glad it was helpful!

[@andrewbredlan417]

Thank you for this explanation, it's so well done!! Reminded me of the graphical elegance of 3 Blue 1 Brown's videos

[@ECAbrams]

I think I know about them. They're talking Math a lot right?

[@CatalinGulan]

What else can I say..awesome tutorial as usually..❤ I am following your channel Evan, for at least 3 years and I will be with you till the end! I am struggling with Ae Expressions for a while..start, stop because my lack of time, start again, stop again..maybe I also have a fear against them..I do not know..All I am saying is that every time I am with your tutorials I swear to myself to start again with more determination..anyhow big congrats and thank you very much for sharing! Lovely and interesting channel! I will never miss it!❤

[@ECAbrams]

I'm glad the tutorials keep you coming back! Expressions can be hard stuff. It's like learning a whole new language, but we can only practice it with a computer that is not always great at helping us practice. Keep at it! You can do it!

[@LoganPinney]

I think you mean interpolate MAGIC!!! The best expression I ever learnt! Awesome beats and typogrqohy animation for explanations Evan 😎👌

[@ECAbrams]

Magic is real! And it is found in expressions. Glad you're digging the approach around here.

[@GamingJello]

Been wanting to try and understand expressions a little better and haven't found a good video on it. You explain things very clearly and in a way that I actually understood what was happening! (The explanation in the beginning of the video helped a LOT!) Thanks for this! Looking forward to seeing more!

[@ECAbrams]

That's great to hear! They're my favourite pieces to make for this channel so far :)

[@petermead8229]

Thank you! Was just learning about JS lerp yesterday, so great timing here - though a very different beast (fly)

[@ECAbrams]

Going deep with those lerps! That can be some heady stuff for sure.

[@adeomole]

Such a fun tool, been using it for a while! 2 questions.. I notice you're using var' syntax? why is that as I have always used expressions without it (please if you could explain the pros/cons). Secondly is it possible to control easing bezier with expressions? (like 10% in 90% out... or .1,0,.1,1) Thanks, you're awesome!

[@ECAbrams]

In tutorials, I try to remember to write the whole thing. It can help clarify what the lines mean to new viewers. I often omit the var when I'm working quicker nad no one else will need to read this stuff. And we can indeed have easing of all kinds in the expressions. It is a little complex. BUT if you use the plugin 'flow' we can actually make it generate the code for us.

[@AlexAnder-mq1by]

I want to bind ROTATION to POSITION using LINEAR example : x = transform.position[1] p1 = 900; p2 = 300; r1 = 0; r2 = 90; linear(x, p1, p2, r1, r2,) when the value of p1 goes through the path to p2, r1 should go through the path from 0 to 90 degrees and back to 0 again, but i can't add the third argument, how can i solve this problem? please, help

[@ECAbrams]

As it's written current as the horizontal movement of something changes from 900 to 300 the output value will run from 0 to 90. If you wanted that output value to run from 0 to 90 and back to 0 as the input changes from 900 to 300 you're describing an oscillating relationship and not a linear one. There are many ways to accomplish this. Here are two ideas: 1. using an if/else to have two relationships, one that happens as the inputs are 900 to 600, then another when we're dealing with the 600 to 300 range. Which might look something like this: x = transform.position[1]; p1 = 900; p2 = 300; if (x>600) { o1 = 0; o2 = 90; } else { o1 = 90; o2 = 0; } linear(x,p1,p2,o1,o2) 2. using math.cos() to introduce oscillation. Instead of mapping directly to 0 and 90 as your outputs, remap to an output from -1 to 1, which would be remapped to an oscillation. It's a little more complex but it could look something like this: x = transform.position[1]; p1 = 900; p2 = 300; o1 = -1; o2 = 1; 45+Math.cos(linear(x,p1,p2,o1,o2)*Math.PI)*45 I hope that helps. Copy pasting the code may not work as expected from youtube as it often changes the formatting of some punctuation.

[@Ben-u1e9e]

What if I'm using SourceRecatTime and I want a box to dynamically change its shape between 2 keyframes as text animates in and out? I can't seem to figure out what expression I need to use to get the box to dynamically change, but also ease as it changes. Right now the box changes suddenly and I'm not sure how to proceed.

[@ECAbrams]

If sourceRectAtTime is looking at values from a text layer, it's the "time" part that says when it checks. So you might keyframe between two times? Like now look at the size it was at 1 second, and now look at the size is was at 2 seconds? You could fade between them with an ease expression and some sliders perhaps?

[@angelvazquez5538]

Awesome as usual, I´m been working with expressions the last 3 years by my own and its a little bit painful jaja, but your tutorials made my life much more easy! You are like my JavaScript mentor. Thank you so much!

[@ECAbrams]

I'm happy to hear these help. Always looking for inspiration for more expressions video that people want. Are there any other expressions you're curious about or having trouble with?

[@angelvazquez5538]

@@ECAbrams Yeah! I have a few expressions. delay = .02; myDelay = delay*textIndex; t = (time - inPoint) - myDelay; if (t >= 0){ freq =1; amplitude = 100; decay = 8.0; s = amplitude*Math.cos(freq*t*2*Math.PI)/Math.exp(decay*t); [s,s] }else{ value } This expression make a dynamic animation on a layer text, but start from the left character to right, I want the text animation begin from the right to left, is that possible? And another one, I found this expression, and the thing is, If you paste that in a position property the object, that object move randomly to the array coordinates about .5 seconds, but I cat figure out how it works, because I want to bounce a object inside another, like a pinball. segDur = .5; pArray = [[960, 300], [862, 460], [666, 300], [960, 540], [1058, 460], [1254, 300], [1254, 780], [666, 780]]; seed = Math.floor(time/segDur); segStart = seed*segDur; seedRandom(seed,true); startVal = pArray[Math.floor(random(pArray.length))]; seedRandom(seed+1,true); endVal = pArray[Math.floor(random(pArray.length))]; ease(time,segStart,segStart + segDur, startVal, endVal); and again thank you so much!!

[@sirkarmart]

Great tutorial , Thank yo so much

[@ECAbrams]

And thank you for checking it out. I love making these videos on expressions so I am thrilled when people appreciate them.

[@babylilacforever]

Ah this is fantastic !!!

[@ECAbrams]

Thanks!

[@stevedoetsch]

What about "back easing" in which the value extends beyond the highest/lowest value? For example, the fly in your example is not rigidly stuck in the box but springs in/out of the box bounds?

[@evanabrams2735]

That would mimic something like a spring constraint, right? Is that the idea?

[@WilliamLage]

I'm trying to apply Flow to the inPoint and outPoint of a shape layer simple slide in and out animation, but I'm stuck between the lines of code. Can you help me? I have already managed to apply it on the inPoint, but I don't know how to do it in both ways.

[@TheStranger1337]

evan you are a piece of gold. with a face. pls make more videos again. love you bye

[@ECAbrams]

That's why they call me Evan "24 Karat" Abrams ;)

[@svohljott2806]

Thank you so much for the great tutorial!

[@ECAbrams]

you are very welcome.

[@TertioFilmDesign]

Thanks for this. I managed to follow everything, except for where you got the values /-2+20,/2-20 on the rectangular size for the fly. Is that to get the max X/Y in both directions minus the size of the fly? Would a variable for fly.size be better if you avoiding hard coding and lastly, was this used instead of the clamp expression for it's easing capabilities? When you said clamp, i expected the clamp expression.

[@ECAbrams]

Certainly, one might use variables for just about anything. Those values are indeed in there to account for the fly. And that's correct, ease was used instead of the clamp for easing reasons.

[@SalvatoreCostasowegot]

Hi. How you are cropping the text? Is there any mask or matte mode? Thanks.

[@ECAbrams]

I believe so, yes. It's been a while since I made the video but a mask sounds right to me.

[@sonofally]

First to watch again am number one 😊 from belgium 🇧🇪

[@ECAbrams]

Haha! That's awesome. I've only been to Belgium one time, but it was a very beautiful journey.

[@hanif72muhammad]

thanks mate

[@fuoser]

evan. are you living in ottawa? my girlfriend might move there for a job. i was wondering if there are any motion studios. didnt find anything via google...

[@ECAbrams]

I do indeed live in the Ottawa area. Ottawa is home to more full-service agencies, traditional animation studios, some smaller boutique places. But I don't know if any brand themselves as a Motion Design Studio. If you are considering a move to Ottawa, we do have a lovely Mograph Meetup on the last Monday of every month that I highly encourage everyone in the field to attend to get a feel for the local scene. Get at me on twitter or shoot me an email if you would like to chat about local Ottawa things more.

[@fuoser]

evan, youre too nice! will do when the plan gets a little bit more concrete...

[@Aleksandr_Alex]

очень интересно и полезно.

[@Pradeepkumar-gl3li]

Hello Sir! I submitted your goggle form given by you on your video links for tutorial request. Hope you'll make tutorial very soon for that.

[@ECAbrams]

Thanks! I was thinking I need to revamp that whole form situation and get a better way of collecting and categorizing requests. I'll give it a look when I can!

[@andershattne]

When you make a word joke, I have a shot of tequila. 1 so far. Hope there'll be more!

[@ECAbrams]

You might be safe in this one. However, some are very pun dense, especially the live shows.

[@andershattne]

@@ECAbrams Do live shows Fridays @ 20 GMT please! The last epxression clamping the wiggle is damn sweet! Thanks!

[@MahdiMadani-bx2bh]

👍👍👍

[@funtoos23]

Wow.... Research stuff

[@poiuy7775]

no subtitle LOL :< I can improve listening skill as well XD

[@AlbertNaro]

Great tutorial! Thank you!