By Rian Fiske 20 Aug 2013. Difficulty: Intermediate Length: Quick Languages: English. Today you'll learn the details of the Linear Function, an expression that could change how you approach animation within After Effects. Don't run away just because we're talking about expressions! The Linear Function is super easy and (even better) super useful. Linear is an interpolation method. The expression lets you represent values in a variety of different ways, which Jake says “is key to making custom controls” in After Effects. Bartlett explains the structure and functionality of the expression and walks through a couple of examples showing how it can work. Ukramedia’s Sergei Prokhnevskiy.
- After Effects Expression Linear Position Test
- After Effects Expression Linear Position Diagram
- After Effects Expression Linear Position Diagram
A new tutorial from Motion Array shows how you can harness the power of After Effects expressions to offset both the time and position of layers. You can choose to create an offset using keyframes, but that might become problematic when working with many layers.
How it Works
The tutorial covers working with an Expression in After Effects that will offset time and position of layers, based on a layer’s original keyframes. If expressions are not your thing don’t worry, Owen walks through what each component of the expression does and why it is there.
The expression is simply:
Value at Time
The expression makes use of valueAtTime which is useful for making layers follow other layers in your scene. The foundation of the stagger effect also relies on valueAtTime which can quickly create a delay. Check out Shinsuke Matsumoto’s post that shows how to build an advanced delay effect using a similar expression.
After Effects (AE) is a great tool for prototyping UI animations, but we’re alwayslooking for ways to speed up our workflow. AE comes with support forexpressions, which create relationships between layer properties or keyframes sothe designer can animate layers without defining each keyframe by hand. We’ll gothrough some basics of using and defining expressions, as well as how to modifythem to best suit your needs. We havea great primer on AEif you want to become more familiar with the terms and tools before jumping intoexpressions.
So, what is an expression
Expressions will look pretty familiar to most of the readers that frequent theGiant Robots blog. They’re very similar to scripts you would use on the web, butrather than acting on the application itself, they define how a property should behave.Adobe based their expression language on JavaScript, so writing and editing thecode should also feel very familiar. Expressions are by no means a requirement forprototyping animations, but I’ve found them very helpful when trying to recreateeffects like inertia or bouncing without specifying a bunch of additionalkeyframes.
Lots of expressions exist already, and have for years, but they aren’t alwayseasy to find if you aren’t sure what you’re looking for. Dan Ebberts has done agreat job explaining expressions and how to use them effectively, laying theground work for what we’ll be going over today. His site,motionscript.com, has a lot of additional resourcesfor those that want to dive even deeper into AE.
After Effects Expression Linear Position Test
We’ll be working with a popular inertia expression today. It works by pluggingvariables for amplitude, frequency, and decay into a sine function thatovershoots its target and “settles” on the final value. All you’ll need to do iscopy and paste the following in the right place and edit the variables to changethe look and feel of the animation.
After Effects Expression Linear Position Diagram
Adding expressions in After Effects
I’ve set up a simple two-keyframe animation where the position is animated,similar to those in ourAccessible After Effects post.Once you’ve created your keyframes, it’s very simple to add an expression. First,right-click on the final keyframe, open the Keyframe Assistant menu, and chooseEasy Ease Out. This last step is optional, but specifying Easy Ease Out willslow the animation down towards the end, which works well with the inertiaexpression we’re working with.
Next, hold ‘alt’ and left click the stop watch icon next to “Position”. Thisshould enable expressions on this layer and open a textarea-style field whereyou’ll put the expression.
Go ahead and copy and paste the above script, replacing what’s already in theexpression input. Playing the animation should look something like the following:
Feel free to add motion blur at this point, too. It’s a toggle on each layer,just click the box below the motion blur icon to enable it for that layer. Itsimply smoothes out the animation and makes it look less jarring.
Now you’re free to jump into the code to change how your animation looks. Belowis a reference for what changing the different variables will do to youranimation, with the other variables left the same.
As you can see, you can add a lot of life to your animations with just twokeyframes and an expression. We also only animated the position property here,but you can add this same expression to other properties as well. With just afew additional keyframes and a few tweaks to the variables for each property,the animation really begins to come to life.
After Effects Expression Linear Position Diagram
How do you use expressions in After Effects? Do you have any favorites? Leave acomment or let me know on twitter.