How to Build an Expression Library: Reusable Animation Logic for After Effects Templates | Edaqa Mortoray | Skillshare

Playback Speed


  • 0.5x
  • 1x (Normal)
  • 1.25x
  • 1.5x
  • 2x

How to Build an Expression Library: Reusable Animation Logic for After Effects Templates

teacher avatar Edaqa Mortoray, Programmer, Chef, Writer

Watch this class and thousands more

Get unlimited access to every class
Taught by industry leaders & working professionals
Topics include illustration, design, photography, and more

Watch this class and thousands more

Get unlimited access to every class
Taught by industry leaders & working professionals
Topics include illustration, design, photography, and more

Lessons in This Class

14 Lessons (1h 24m)
    • 1. Introduction

      1:19
    • 2. Simple Start - The Expression

      4:03
    • 3. ⤖ Simple Start - The Library

      3:21
    • 4. Prologue & Project

      1:26
    • 5. ⤖ Editing the Text File

      1:55
    • 6. Relative Text Position

      7:45
    • 7. Blink and Pulse

      9:31
    • 8. ⤖ Blink Sequence

      5:46
    • 9. Asset Reminder

      1:26
    • 10. Relative Position Argument

      9:09
    • 11. ⤖ Relative Position Demo

      7:24
    • 12. JavaScript

      17:46
    • 13. Trail Effect

      11:16
    • 14. Conclusion

      1:41
  • --
  • Beginner level
  • Intermediate level
  • Advanced level
  • All levels
  • Beg/Int level
  • Int/Adv level

Community Generated

The level is determined by a majority opinion of students who have reviewed this class. The teacher's recommendation is shown until at least 5 student responses are collected.

120

Students

--

Projects

About This Class

Simplify expression management and focus on your animation again.

Expressions in After Effects are wonderful, yet they aren't without their issues. By building an expression library you can eliminate the headache and spend your time improving the animation, not the code. This class will show you how to make a reusable library, give you practical examples, and build a solid base for you to continue with expressions.

Expression libraries offer these advantages:

  • Easily share expressions between layers and projects
  • Create building blocks for responsive template layout
  • Write code with the comforts of a text editor
  • One central place to tweak animation behaviour

In this class you'll learn how to:

  • Create an expression library
  • Reuse code and values
  • Access your composition from an expression
  • Write some practical functions for dynamic layout

For those that want a deeper technical dive, I include a chapter going into details about the code. You'll better understand what is going on, giving you more flexibility in your expressions.

This class is meant for:

  • Animators working with After Effects
  • Designers of responsive lower thirds
  • Creators of Premier Pro and Adobe stock templates
  • Anybody going crazy with those fidgety tiny expression boxes

If you're new to expressions, you may also find my introduction to expressions class helpful.

For more information about sizing, refer to my class After Effects Size Expressions: Dynamic Text, Scaling, Images and Debugging.

Also, if you're like me, you're getting a bit lost with all those assets, clips, and folders, check out my friend Sonja's class on being efficient in After Effects.

Meet Your Teacher

Teacher Profile Image

Edaqa Mortoray

Programmer, Chef, Writer

Teacher

Hi, I'm Edaqa, a programmer, writer and chef.

For over 20 years, I've been following a diverse and exciting career path. My journey traces through several countries, filled with great people and culture. I've dedicated my time to numerous startups, and an abundance of side projects.

There's so much I'd like to share with all with you -- from programming to cooking, to the unusual creative endeavours.

I want my classes to give you the confidence you need to succeed, and the curiosity required to make the most of life.

Join me in my continuing adventures.

Recently I wrote a book "What is Programming", a dive into the fascinating profession.

I've also taken up the mantle of food stylist, as I started Edaqa's Kitchen last year. Perhaps soon ... See full profile

Class Ratings

Expectations Met?
  • Exceeded!
    0%
  • Yes
    0%
  • Somewhat
    0%
  • Not really
    0%
Reviews Archive

In October 2018, we updated our review system to improve the way we collect feedback. Below are the reviews written before that update.

Why Join Skillshare?

Take award-winning Skillshare Original Classes

Each class has short lessons, hands-on projects

Your membership supports Skillshare teachers

Learn From Anywhere

Take classes on the go with the Skillshare app. Stream or download to watch on the plane, the subway, or wherever you learn best.

Transcripts

1. Introduction: I met him ordering today. I want to show you how to create an Adobe Aftereffects expression library. This is a great way to reuse all those expressions. You have no more copying and pasting doing a whole bunch of layers. No, we're fixing up in that small window. You can use this library for everything. I'm gonna work through a whole bunch of practical examples to show you all the aspects of an expression library. How you create one, what goes in there with sin taxes for it, And how do you use it inside? Aftereffects for those that are interested also go into a little bit of discussion about the JavaScript, the coup behind expression, what it's all about. Let's get that if you want. This class is meant for anybody doing animation in adobe aftereffects. It's actually people in each expressions, creating responsive templates or advanced animations. I do expect, you know, a little bit of after effects. You don't have to know much about expressions. I'll keep it simple. Does he need an extra introduction that I've got one of those to check out the notes. So shut up after a fix full along and let's get into this expression library 2. Simple Start - The Expression: start by creating a small example to show the motivation for using expression libraries. The first part of this is just standard a doobie aftereffects set up. Feel free to skip over. If you don't want to see the entire set up and just want to go right into the part of a criminal library, that's the next chapter after this one. Or go past that to the prologue in the setting up of the environment, where I get into the longer examples and the full class. But now we're to start by creating a very basic animation and after effects and showing how to translate that into an expression library. We'll go over to aftereffects, and I'll create a new composition. We will create a simple start here to save the projects. I don't forget later. Okay, so start with the animations. We're gonna start with something really quick just to expose you to the expressions. If you've not done expressions before, go check out my course on that. Otherwise we'll try to keep it easy enough so this is accessible to everybody. Scripts now. Anyway, the resources and I would take this one here. It's a nice little circle. It's huge. You make it smaller. We might want to make this wrote it at a constant rate. So rather than to find a key frame for rotation, we want to say this rotates at a very constant rate. So we want to make this rotate at a constant speed. We're gonna go all click on rotation. And now you say we want to rotate once per second, and once per second, it means I'm gonna have to involve the time and time is expressed in seconds. So that should work. And one rotation is 360 degrees in after effects. That says 360. So times times three under 60 degrees. And that is fairly fast. So what we want to say is, Well, actually, let's not do that. So let's say only every five seconds to divide via five every five seconds, it'll do one rotation, and you can watch one of the items on it to see you could watch this red one here and watch it go. It was gonna go all the way around there when it hits five seconds barrier. A little bit of zone if life there, so that's a constant rotation once. Okay, that's how fast it rotates. So now this is the basic expression it's typed in here. What we don't say? Well, this is kind of annoying. I don't really understand this. I see time divided by five times 3 60 It's hard to fall what that is. And now what if I want to put a second item in here and open a second file and I want to put another object in the middle of that? And so we also want that one to rotate and we wanted to rotate at the same speed. So we're gonna copy this code over the other item, go to rotation and paste it again. We want to rotate in the opposite direction. So we put minus 3 60 instead. Now we go. You can see they rotate in opposite directions. Now, of course, the problem is you think why one rotate them a little bit slower. Still sewing over here and say time divided by eight. And I click goats. I have to go over here in time. Divide of it. Eight. This isn't really that great. If I have to modify this often, it's like all that was too slow. Not gonna go modify both of them again. Now the editors a bit weird. It's off here is like, Let's just put this somewhere else Could not have a common definition for this. 3. ⤖ Simple Start - The Library: So let's start with that and then go through there. Let's put this expression in what's called a library in an external file. For this, you're going to need a text editor and I'll get back to that in a little bit. In the tech center, you're gonna have to type in expression. It's going to create this compression to say the file first in the place. I want it. Call library J S X. This is a file extension that's Adobe requires our aftereffects. Requires what I'm gonna do, something that you just gonna have to go with four bit. I'll get back to this and explain it later. But let's just do for now, the new class. And then we're gonna put this at the end and it inside of it. We're gonna create what's called a function, and we can call this one. Rotate. This is expression in the library. What I want with this I don't want to take this 1st 1 the one for the outer circle and copy that code and put it in here. And I have to do something called Return with this. Unlike in after effects, I have to say specifically what value I want to give back here and I'll talk a little bit more about this later. And this is that expression. Now, how am I going to use that in the composition? The first thing I have to do. So I have to import that file, import that library. I'm also gonna drag it into the composition. We're gonna need that there. I'll talk about that later as well. Now I have to say, Well, how do I use it here? How do I get it inside this expression here? So I want to load the library. I do. Library equals footage. Is the standard for dish Command to refer to footage and say the library, GS X. And now I have to get to its source data. You would have seen me calling. Now, this is that library in our library. This is where I created a function called rotate. And they make us the last thing in the expression. First thing you see is that time is not defined. And so there are a few differences in the library. Things like timing. HEPA say this layer dot time slayers A global time is not so now we have that footage in that library Now if I go to libraries, say I wanted to rotate faster again, I can change that value and now it goes a bit faster. What we could redo now is to say what I want, the other one to go the same speed. So let's copy this code over to the other rotation, go for seconds and now they rotate the same direction and this one will make a slight modification. Say, let's go the opposite direction. Now they're going at the same speed. So now we can go back here. If we change the value, make it really slow. Now you immediately see that they both yet corrected and they both go at the same speed. So we have the one central location for this expression, and they can both use it now. As we go into this class, I want to show you bunch more examples of how to do this and how to get variables into them , how to pass them and how to make more structure this and how to reuse this kid into a lot of interesting things with expressions 4. Prologue & Project: this class of a lot of information to it. I structured it so you can kind of skip through the parts you may not be interested in. I really encourage you to fall on. Make a practice example. Make this working aftereffects because there are a lot of small details here. The more you work with this, the better you're going. Acquaint yourself with the small details, so I highly encourage you to make something while watching this course. Make it a bit creative. And if you do have something injury that comes out posted, or if you have a question, you want a post it, post it and I'll try to get you back. An answer. We're gonna work through a whole series. Examples. Starting off with something relatively simple, then moving right into text. Positioning something. It could be very tricky to do without expressions and something where you have to repeat the same code over and over and over, and you'll see how an expression library helps that they will move on to the blinking of Paulson, which lets me show a variety of other aspects of how to use the library to pass parameters and reused the code even further. And then we'll come back to that text pushing again because it comes up so much when making a template that you really need how to do it. So I'm gonna go from, or examples of how to use that, particularly based on the library, how to reuse the code and how to move stuff around the text. Then to finish it all off, we're gonna create a trailing effect, a really simple way using an expression library, how you could duplicate those layers. No extra effort, and then you haven't trailing graphic. 5. ⤖ Editing the Text File : Where do I edit these external files? This is what's known as a source code files or a text mile. So I'm using a text editor if you've done any HTML work or Web work. If you work with data animation, you're probably familiar with text editors. If not, that's fine as well. But for working with code, you probably don't just want any old text editor. You'll notice that all my code has nice syntax, highlighting like it does in after effects. And so you'll want kind of a code editor. I am using a product called Sublime. I do a lot more programming. This just this. So it has a lot more features. For me, it's an OK text editor. I'm happy with it. There's another one you might want to use. Cold note pad plus plus on Windows, no pad plus plus in the windows of the free one. There's also called something called Visual Studio code, but that's probably over doing it for this type of thing. There's a lot of text editors out there, so you just have to look around for one. Sublime is available on MCA's Well, that's one reason why using its on both. When I used linens for program that you use another texted or called Kate, every programmer has their opinion about what's the greatest text editor, and they'll are argue about it for doing expressions using a single file. It's not vital which one you use, but you do want something that has this highlighting the different colors because it makes it easier to spot the air's a quick note about the file name. I've called this library Js X. You can use any name libraries around the name, but it has to end in jazz X. So when you important here, it has to be called thought JSX. If it's something else, it will not recognizes the JavaScript library. If this ignore it. So it has to be a dot jsx file, so make sure you have that in the file name. 6. Relative Text Position: So let's create another example of where expression libraries kind, helpful and will use an expression of relatively positioning. Some text, the say. First of all, we have a rectangle which make this one fairly big. I don't like that stroke colors, so let's just make it somewhat more subdued. I want to be able to see it, though. Suspected Dark, you know? So we have this rectangle and I want to put text inside of it. So let's go put some Texas side of it. We're gonna make it this size here. I'm going to position it centered. Enter text. I want this at the bottom off this box. So the first thing that was going to say, Well, let's put the anchor point to the bottom and then let's move it to the bottom of the box right about Dick. So it's It's at the bottom of the box now. The problem, of course, is when I go when I take this and they modify the character of it, we make this small. It jumps up. It's no longer the bottom of the box if I make it a lot bigger as well. 150 forever and it jumps below the bottom. The books one of the problems affects is that the anchor point is not relative that size that specified kind of absolute value. The anchor points position for the top left of this element. Well, we wanted to say we won't say it's always on the bottom of that so we can do this in a reusable way, and we're gonna create an expression for that. So the first thing we're gonna use when go over to our library again and we're going to create a function, let's call this motion called anchor bottom. We'll use it on this layer. First of all, I'll get back to what that is in a second. For now, we'll just return some value and values with the return of values that come out of the function. Say return. This is the function called anchor bottom. We're gonna call this function. I'm gonna return some value. Let's say 100 common 50 for now. Is that two values for the anchor point? Just so we have something to start with, you mean go this text. We're gonna find its transform and its anchor points and we have that library from the expression before and when you copy and paste that quite a bit. So what I'm going to do is I'm gonna put a reference here at the bottom the file and we could make comments in here who type a slash star slash star. These air now comments in this file If we say live equals footage, library urges extra source of data. Now we can copy this to wherever we need it. We're gonna go down to this anchor point. We're going to copy it. So we have this lived there and now we can call functions on live we could say now lived for what do we call it? The anchor bottom? Liam, not anchor bottom. And you know what's that move? Because it's always 150. You can see that 100 common 50 now. That's of course not where we want it. We want it at the wrote the bottom off the size off the text. In this library, we can call functions just like we wouldn't expression the first thing we want to do. If we want to figure out Well, what is the size off that text type this first explain it. So this let This is the way of saying that this is going to have a value inside the expression libraries. We wanted your something like a lot to say. Let rec equals. Give it a value. This is JavaScript and we need to say what these names are. We can't just start using wrecked here. In some case you can, but you really shouldn't. We'll see the let let says, Look, this is a new variable, creating directors of variable. Let's create a new one. It's gonna equal this value over here. This is something should be useful already. And when you say this layer because we still have this layer available to us in here, it's the layer in which we're calling it from. A source wrecked at time is the one that says, What is the rectangle? It specifies the contents of this, And so now we need to calculate, Well, where is it in the middle of this thing? So let's say the X is going to be the width of the thing. Divided by two was wanted half way, but we also have to count with left side of it and the why It's going to be the rip that height, which is the full height we want right at the bottom plus wreck dot top. So it's right all the way left and halfway down the bottom and we return X y. It's now it's centered in that text. Now the anchor point is dynamic. You'll see it's positioned in the place. We want it right in the center, all across. So now if we go to this text and we change the size of it, it stays aligned to the bottom, which is exactly what we want. Well, we've done is we created a relative anchor point at the bottom. We've said all rights, this is always anchored at the bottom. So this is one of the ways that you can use function to do that. Let's go to the JavaScript and explain that a bit. So this code, this isn't a language called Java script. What we did is we created an anchor bottom function. This is a function we can call not so we called here. These little brackets here say, in this case, we're calling that function on a library called Lib Over here. Inside this definition, those front to see Say we're defining a function and this happens to do with the place writ were inside the sinkhole new class which I haven't explained yet And so where to find this functional anchor bottom In this function anchor bottom we use a set brackets to note this is all the part of the functional belongs to this one function we use let to define a new variable In this case let wrecked equal This value over here for this layer is like in a normal expression We refer to this layer and we want the value source wrecked at time. They were to say let X equal some value and let y Eagleson value. And here is just a calculation of how we get to that centre bottom part. The courses again focused too much on these calculations. But Maurin, the structure of this code. One thing you will notice here, compared to the code written directly and aftereffects is I don't put semi colons at the end. You can, but you don't have to. If you're concerned about not having in there, go ahead and put them on. But I generally don't because I find it looks cleaner without. There are very few weird instances where it won't work. But generally you won't encounter them in a library in after effects itself. You might. So just remember for during an expression in after effects put little Sammy cooling on. Otherwise, you don't have to. You might be looking at this code and thinking, Well, I'm just calling one thing. Is there a short cut to it? The story really have to define this live here where live is just another variable. And it said inside aftereffects We don't have to say let live but you can say Let lib and the last one and aftereffect doesn't have a semi colon. This is the one that you knew is the value that's being returned from it. So is there a shortcut? I'm just gonna do this. Can I just call anchor bottom directly? And the answer is yes. You could just do footage that source data doctor, anchor bottom. This is the same expression, and it simplifies it. The value of this simplification is that you have a whole bunch of expressions in after effects that are now just this one line and they call just a function inside that file, so you don't have to deal with much code and after effects, everything's just pushed off and you can create all sorts these names and reuse them. 7. Blink and Pulse: So let's give another example now with another thing you might want to do. You might want to create something blinking, create new composition. We'll call this one blinking, and we want to put a circle in here that blinks career lips. Now I want to make this one blink. And so this is an expression on opacity. So the first thing we're gonna do Well, let's say not blink. First of all, let's say we want to make this impulse and this will give us an option. Do something Its way to call something called Pulse and Pulses gonna before the opacity. So how do we want pulse? This one thing that comes up a lot in animation are cycles. Any time you have a cycle you can look towards a function called site is the mathematical sine function. And so we're gonna let something called Wave just just the name that says what value the sine function, How this produces a wave. Sweet, go away value math, Thought site. So a lot of mathematical functions are on what's called a package or a module, and the package we want is called math and math dot signed the dot says. We want a function inside that module just like we said lib dot anger boughtem Before we could say math outside, These are both packages. In our case, it's a class, but it's also part of life. And so we want this to be related to time and say this layer dot time, it would go with this this layer dot time. This is the wave sign goes between the eyes of between one and negative one. We have to convert to capacity. There is going to do that conversion here when I say our range has to be wave plus one, and this will now convert toe a range of 0 to 2 and then divide by two to say OK, now it's a range of 0 to 1, which is good enough for opacity. And now we're returned the range times 100 because after effects expresses partial amounts as percentages and not fractions, you will see a lot that inside the code we prefer to deal with the fractional values and so it convert in and out times 100 is one of the common ones. We also had times 3 60 for the rotate and if you're uncertain of what time 100 is This is because of Avery from normalize 2% value. If you need more information about that, please go watch my course on sizes where I talk at length about the conversion rate, ratios, percentages and normalized values. This is really important to understand in after effects. So I highly recommend you watch that course if you're uncertain of why I'm multiplying my 100 here. So we're gonna go and create that footage from before. Now, I'm just gonna copy part of this one, and we're gonna go to the shape layer to transform. I'm gonna all click again to modify the A passage e and type in that bit our source library . And then I'm gonna call thought pole signs. Now, when I play it, you'll see it pulses in and out. Sign has a very low frequency. It's related to a value of pie. I won't get too much into that right now, But the main thing that says if you want to speed this up, you can multiply time by value, so it's multiply time by 10. We go back, we immediately see that is pulsing faster. And that's one of the uses of science sign creates these wave forms. We can use it for a pastie for rotation for position as well. Here we did it for pulsing. And this is the code. Here we create its function called pulse again in this syntax. And we said, What, this way? Well, maybe just some random name and some random value we used because sign produced away from to call the wave. And it has value mouth outside this sign from the math library taking our time times 10 just just speeded up. The times 10 and the range this range is converting the natural range of sign from minus one toe. 12 range of 0 to 1 and then we return this times 100 to pulse through the opacity values. Now we want to create a duplicate of this one. Put it over here. We have a duplicate, inherits the expression of they both pulse, so the value of the expressions. Now, if we go change the speed you saw before, they'll both still pulse at the same rate. You don't have to go on modify individual cold in after effects. You can do it directly in the library. Let's say we don't want pulse. We want a blink. And blink is another thing you might want to do often to something's blink, as opposed to pulse is a very subtle difference. So we're gonna go to the so pass it e going to say, Instead of pulse, we're going to blink and it's gonna complain to us it's gonna give us this little triangle and it's going to say, Oh, we click on there That says, Blink is not a function and it says this because we haven't defined it yet. So let's go over and define the blank function. Blink. This is our blink function. Now we know we're gonna have a similar wave. So let Wade was math, not sign this layer. Got time we wanted the same speed. Is the other one you can already notice is a bit of a problem. What if we want to change it? Let's get back to that now. We don't want a range. We know that the wave goes between nine. It's one on one. So we're gonna simplify this. We're going to say if the wave is less than zero, we want to return a value of zero. Otherwise, the value 100. So let me get to this Intacs here. Wave is less since your question, Colin, this is a way of doing a conditional value. This is similar to saying if wave is less than zero return, zero else returned 100. These aren't the same expressions, but they end up being very similar. This one says, if way with lessons, your return zero else returned 100. We can do this an expression form and say we'll just return if wave is less than zero. And this is what this question cool and mean. It says, Take this condition. If true, uses first value if false, use that second value. So I'll just leave that here for reference that that's the question cooling. And so what we're now saying With waves, items returned. Zero or 100 so blinks, and she now knows that blinks at the same rate. It's the other one. That's a one effective use of expression. So we have a blinking pulse. Now we go back to say what we want to make it blink faster so you could go through. We can make them both multiplied by eight. Now they both blinking pulse faster. But I wasn't so happy with this. Why do they have to modify it to places I don't really want to modify in two places? There's a couple options here. We can do this. And when you get to the expression, you're gonna see this all sorts of options here. The first thing you see is that this whole expression math off sign is duplicated. We may not want that. So one way we could do is we could make a common function that's called or we could simply move out this eight. So let's take the basic one first. This eight is the variable bits, and it's the value we like to share. So we're running over the top of the class now and create a new function called Constructor . This is a special one. This one is called always when this library is first created. This is a special name in programming called Constructor relates to this class. For now, you could just say if I need to define variables that are used throughout this killing here , we can define it in the constructor and to define a variable here we're gonna say, Give it a name and we prefix it with this dot and we're going to see this is pulse speed and equals eight. This is a special term which refers to this class, which in our case, is this library. You don't have to fully understand this, but if you need a value, you can say this, Doc. Poll speed equals eight. And so now we have this value to find out. We can use this down here. We to say this thought call speed. So the key thing to notice that lines up, it has the same syntax. This, doc, pulse speed, this dot pulse speed. And we're gonna stick it down here as well. Times this thought, Pulse speed. Oops, as it has the same speed. Now, if we want to change the speed, we can change that one place at the top. But I could double Steve there, and now they both changed. And this is one way of using what's known as a member Variable. You may see this name, a member field, a class field, these air, all names for it. But for you, all you need to know is that it's a variable defined for the whole library, and you can use this throughout the library in digital functions by referring to this dot pull speed. You can create any name here you wants. I called sports because it seemed to make the most sense, relates the pulse, and blink can use that value as well. 8. ⤖ Blink Sequence: right now, I want to work. In another example, I want to do another blinking example. When were you multiple objects blinking in sequence? Or rather, let's say pulsing in sequence. And this will show us how to pass values into the library. It's going to create another composition in your composition. Call it cereal. Blink and I go back to the blinking Wanted Copy one of shapes first just to save me some work. Okay, so we have the blink there and you could see it blames Still as well as a fairly fast blink . I'm gonna slow that down for a second now, anyways. Now I want to have a bunch of them across the screen that blink at different speeds are not endeavor speeds the different time they don't. They don't all blink at the exact same time. So we create duplicates off that you'd line them up, but before Okay, duplicates. I want to say what's changed. The starting point for this blink. I'm gonna change the name of first just so we have a distinctive me, and this will allow me to change it without affecting the other blinks here, or the other pulses and I'm gonna create something called Offset Pulse. And here in the offset pulse, I just get some value and see this one. We're started. One. Whatever one happens to me and it's gonna complain because it doesn't know what that is. So let's go back here and create an offset pulse function. First of all, I need a copy, and this one was one of basic do the same thing. But now you saw I gave it a value of one here. What does that mean? When I give it this value of one, it means a passing, an argument to dysfunction. And it means this function. Get this. And right here we can just say, Well, what is that office it Give it a name. It now his name called Upset. Save that. And now you know, it's it blinks. But we haven't done anything with that offset. So the first thing we want is I want to duplicate the shape layer and then stick it over here and now in this duplicated later, I want to say, Let's give it a different offset. Let's give it offset of to let just start it somewhere else. But they both went cause we haven't done anything with that offset yet. So in the library I could go and say, Well, we have this parameter. That's arguments sometimes called parameters. I prefer arguments. We have two different values now. Now we can distinguish between them the easiest way we say this time plus offset, and this will offset them. Now they blink at different rates. Who's cool? We have two different ones. The one is kind of random. One and two. Let's see a few more of how we can do that. Put this one over a bit more here. That's me of this one over here. And let's create another one and one more. This one here and chase offset to three. You know, it's it has a different frequency. Then we're done Different frequency, but a difference phase. And this one, we're gonna say four. This is it. Offset. Four. So now they all kind of blinking sequence. This sequence isn't 100%. It's factory, but they all use the same code. And again, if we want to change the speed of this, we can change it up in the all blink faster in sequence. But it's not really a sequence that we want. What's gonna come up a lot when you sign of something called Pie as well? And so now we know we have four items. So we're gonna see how many items do we have? We're going to see it. Let's number items equals four, and we're just gonna know this for now. I don't have a way of counting this. You're just gonna know this and you want to know the relative offset of that? Now we have a value between zero and one for that relative offset. And so we could control hall Far It goes now. Math works with something called Hi, So really wave offset Now and it's better term. Something called phase. Don't worry about the names. And this is just relative offset times Math high. So now we have this phase. Which is how much are we offset from a relative of the totem of items expressing something that sign? Understand? You don't have to fully understand the separatist her Senate, it has a cycle related to pie. Don't actually have to use part. You just added to it. And so this shouldn't be actually here. We should take this remove this year. So we're gonna keep the regular cycle time. This multiplication says the frequency, the cycle. Now we can add the phase offset. And if we go back to the code, you could see them blinking sequence to that. They're not quite fully there. So if you took map times pi times two, they would actually be in sequence that you go around. This would be easier to see with a circle. You go through that If you create more items, you just have to create increase in number of items. So that was a way that you could pass a value in. You could say different pulse. It owns 4321 and you use that offsetting here to change its They have sequence. Pulsing main thing I want to show here is not initially how to create the pulse function, but how to pass a value in cold offset 9. Asset Reminder: when I worked on simple starts, you'll notice that I dragged the library into the composition, but you may have noticed that on the other ones I did not do that. It's not in there, and it still works. But here's a quirk. It works inside aftereffect cause it could still referred its expression. But if you attempt to export this or actually even render this, you're going to get an air because this composition no longer knows where library Asset JSX is. So make sure you always drags down into there. Nothing will change while running here, but that's absolutely acquired. To export this file, you need to include that lie before us is also just gonna go into Premiere Pro for the motion graphics templates. The central graphics needs to be in there just like any of the images. You have have to be in there as well, even if not visible in your reasons have to be there. Just make sure you do that step, and if something's going really weird, exports broken, it's not working. Premier Check to make sure it's there. There's tripped me up for a long time before I figured out that I have to do that, and it can be really confusing the heirs of just going to like, random stuff, just not working, but some of it will. 10. Relative Position Argument: Now I'd like to go back in play with the text against issue another relative position example. It'll show us another aspect of how the code works. I promise to get back a bit to the code again later. But I want to show another example your first. So we have this center text now. For whatever reason, we might want to add a start to it. We wanted to start up to the right top corner here, just like this. Recruited somewhere around the corner here. I want to set the anchor point of this star. Do you see that daughter? The start. That right about there now? Ideally, I want the star position always to the top, right of this text here. I want to say it's always sort of about their the top. Right now, this is a kind of a problem because as the text changes, what if we actually change? The text on the star will move. We change. The size of the text star also won't move. I said we want we want to start to move with it. They're soft. Let's make the star bit small. Are so we want to start always be on the top right of the text. Well, we found we knew we could put the anchor point to the bottom middle here before, So we should be with the right and you function. Let's create a function called top right off. So we knew the center text. We had an anchor point, which was the anchor bottom. So let's go to the star and radio a couple things here we create this first. When you say the position, the position has to be bigger. Now we're gonna create this is a library. First, go back to library because a bit longer And now we want to say top right off. We're going to see the top right of what we're going to see. The Pickwick would say, What of this? Center texts top right of this. Now this function doesn't exist at top. Right up, we said. We want the position of you talk right or wherever this happens to be. Now we just have to define that function, and we go to a library and create a new function for it. 28 Anchor bottoms. Not going to do top right up, which is related to it. I think you says, Well, we're gonna need We need that layer First of all, in like offset polls We passed it off, set in this top right of we can pass a Larian and now an anger ball And we said This slayer . But now here we have an explicit layers, a layer dot service wrecked at time, and this is just the default size of it. Now I want to do something very similar calculation before, let's say, Rex, we wanted to be the far right. So it's wrecked out with not rectal with divided by two. And we still think you wrecked out left because it could not be positioned pulley there. And we just say, What is the why? Well, we don't want the height. We just want the top of it wrecked dot top so we can return X com a wide and you notice that throws it in the middle of nowhere, which is a problem. That's because that relative position was expressed here, so it's moved it somewhere up here on the view. So when you use another function, when you create a point out of this called the composition point, we're going to take that layer and call vertical to comp and take a position X comma y and creating new point from it. Now, in this case, here I created explain why, Just like here, it's a point in this returns a point, and I could do pomp to cop means. Take this point and it's local to this layer or the Slayer and give me the coordinates of that in the composition itself. So what? And then we return comp, and now we see it's stuck in the right place. So if I got more modify this text size back to something really big, it ends up, you see them and what size it is. It always ends up at the top, right? We can also modify this text centered, bought a fight text. So now always goes to the top, right? You know something else that happened when I type the F it moved up. This is something you may or may not want. That's because the anchor position has changed. Is the height of the Texas changed? Your anchor point moves it up its mind until you probably want. That's the f doesn't go to the bottom makes your reasonable The new case. This is fully changed. So we have the center text. We can put it back. We know this side's Concetta and the star changes with it. And because we're doing everything relatively, we can also change the scale, the text. And so that always works there as well, because we've relatively to find the top right. You could also even rotate the text and the stars say that top right, the star won't rotate with the star keeps its own orientation, but it does rotate that does a position does go with the rotation. So that's a layout aspect. Now that wasn't the point of this thing we saw is like what? We have this code here, and it looks very similar to this code here, and I want to show another way. You can make use of the library to say, Well, we can make common code and so I want to call something called relative position and it's gonna take a layer. Ende points, and what we want to say is, we want to say this function. We can call this from within here. This function see on this layer given this relative point expressed during the value of zero and 100% 1 is 100%. Tell me where in that object that is so we could basically start from this point. Rectus layer source Correct at time. Now, if you look at anchor bottom, you can effectively say, Well, let's convert this. This wasn't divided by two. This was time 0.5 and this was hyped times one. And down here this wreck was West Times one, and this was actually rectal height. Times zero plus record dot top have expressed it this way, so you can see the pattern. And this is where our point iss 0.0 point one it's now just say let X equals wrecked up with times point 0.0 gives the first part of the points plus wrecked up left Let why be the height of the thing relative to the desired point we want And this point is now a relative point. The point is, you know, value of zero in one. So we're on this box. A relative point is Euro zero would be up here. The role of point top right would be over there. But let's get back to explain it away. And now you could return this value X com A wide area packet together in a single array object. This is common and aftereffects. How they represent points is an array of two items. Now we can see this anchor bottom. We're going like, Well, G, this is just the 0.0 point five comma. What? So we can go to in return this stop relative position and we want this layer because we're on our own layer and we want the 0.0 point five comma one. And this replaces always your 0.5 once a halfway across and one down and so we can reuse that code. Did you go here and see it didn't change Great since same place. Now, this one here we have a similar situation. Well, to start with, let points equal this the relative position and not of this layer. But if layer passed in and we want the top right, So the excess one at 100% and the Y 00% you know, we have a point and we could take the This was the ex wife. For now, we can to calm the points because we need to convert to the composition layer. And now it's there so you can share this coats. If you have a calculation, it has to be done multiple times. You can share the code and past arguments to it, and this is very similar to when you call it right here. We called anger bottom anchor bottom calls, this function and then not function calls the relative position. I know this could be a lot to digest if you're new to expressions, if you're new to programming, so some of this year's gonna have except for it, and then I'm going to get back to a little bit more of what this all actually means. 11. ⤖ Relative Position Demo: things. Relative position functions, something you're probably going to use a lot. And you have to understand a lot of this size and where it can use, but you can put it everywhere. So if you want to see a bit more about how to use it, let's create another object. Let's create an ellipse. This time I created you Shape layer first, you shape layer and it creates a circle on it. And I reduced the opacity. See through that now one set the anchor point to the middle of the circle. If you want a position it onto this other box, I could show another way of how that works with the library. So we knew the shape layer here. This was using top right off. So you something similar. We take the library, go to the position, I'm gonna copy that in, and now I want to see well, that was relative the layer. So let's make one more function that does that. That's two composition of layer come a point. And this is the relative one. It was a let points equal this dot relative position off the layer come appoints. They were returned layer dot to Cop point. This is the same code down here, and you converge this as well, if you want it and just create composition now and here I'm going to say, lived a composition and I wanted to a pick quipped the other layer shape layer and these two values we start in the top left, right? I mean, a small mistake in there. I already to find points. So you have to stay. You can give you any names that just call R P for now, all good points and now it's in the top left there. And so this is relative position works. I want to put it right in the centre, 0.5 0.5 and it goes right to the presenter. Now you might want to say, Well, let's just put sliders so you can see how this works. So let's go on this one. Let's create an effect. Expression control, a slider control And this slider we're gonna make the 1st 1 He was one name exposition, an angle between zero and 100. So now we want the exposition to come from that it is where you still have to do a little bit of work inside aftereffects, but you could also move us all into the expression Leiber if you want, if you don't want to do that. So here's where you could do the Pickwick and say, Well, I need the value of that slider effect Exposition slider Going to say X equals effect traditions Slider will be divided by 100 because the ranges over 100 say x good. So now we just the slider. The position goes back and forth means your own 100%. You could do the same thing for why, if you wanted. I just want to show the relationship between X and Y. And so this relative position another way. This is one of ways you can pass it. You hear this code is starting to get a little bit too, too much. So if we had a second slider being issues so we can actually take all of this now as well, we could create a function called highlight position. We compact all that code into one location, and if we copy variables or religiously now I have to say, Let X equals. We no longer say the lives we know, say this stuck composition because we're already in the library. We want refer that specifically, which is fine. You do this content layer that still works perfectly fine here. And, Serena, go back here when? Just just simplify this code to say dot Highlights position. Remove this. Remove this and I made a mistake. Not this has effect. Now has to be this layer dot effect because effect was relative. This player announced not, and I forgot to put the returns will make sure you put the return and it's tied to that slider. You can move it and it's just it's just inside the library. Now, in this no, makes a little bit easier to add a 2nd 1 Expression control another slider. We're to call this one y position. We're going here, and this is now y position the slider of its and we put that Why Over here it's now we can adjust the y slider as well. And so this goes from 0 to 1 with 100% across of it. Now, when you put these inside here, one of the dangers off this is is that the names were now fixed. So you cannot rename this easily. So if you go here and specify a new name, like why, that's just for clarity. You suddenly get an air because this doesn't have that name. Here it a doobie. Aftereffects cannot do the order. Remain into that file, so there's positives and negatives to that. So generally what I do is things that require names from here. I'll put the names parameters in here to the function, and this is what we did with the top right off the top, right of took the layer. So is it this compound layers so it didn't actually knew where it waas? You can pass values in like that. You can pass the layers in, but you can also, just for a simplicity. You could say I could do the whole script over here externally and just understand. If I change the name, I'll have to change the names. And changing the names isn't so hard. You can also use the variables at the top to refer to the name. For example. This is we can call something called Slider X, and we're going to give it a name exposition and down here. Instead, we could say this dot slider X. Now we do change the name. We know we can just change it up here. So we do change the name here to x dash position. We know I'm gonna change it up here to extract position, and this allows you to change name. Just don't remember the variables up there. It's back. Though. You may have noticed I use single quotes here. You can use single or double quotes. Aftereffects tends to double quotes more. So I gotta change that back to double quotes. They both creates dream valued string value being a small section of text which can refer to something. 12. JavaScript: Now I want to talk a little bit more about the actual code itself because you may be interested in what all of this is actually doing. So this is something called JavaScript. This is a programming language that's used throughout the Web. You probably already seen if you worked in HTML or you may not have a not done HTML or Web work before. It's fairly popular language as its advantages and disadvantages. What the values of its nice scripting language could be integrated well into products like after effects with a use JavaScript inside aftereffect itself. This is JavaScript, and they change the ending at one point. That's why something's changed, and this is slightly different syntax. It's a bit more lenient. Inside the actual external file, you have to use proper JavaScript syntax that not as lenient as after effects itself. In this coat, we did a few things to create the library. We started with this new class, but that's not actually where it starts. The most important thing here is this class, and in Javascript. This actually defines a new class different do. It defines a type, and often these have names. In this case, here are class doesn't have a name because we don't need the nick. That's the only class in the library. This is something special. It happens, and aftereffects is because it's a library. It could only loathe one class, so we only have one class. We don't need to give it a name, But this class, maybe it's a little bit tricky in JavaScript. This class, it doesn't create this class. It just says this is what it looks like. If you want to use it, you actually have to create the class. And this is where the new comes in. New says. Let's create that class. And that's where these parentheses at the bottom or for this could be a bit hard to understand This way. So I'm gonna do something that's you don't actually need here in JavaScript. You could also create a class this way, class named and that creates a named class. And so this is a typical javascript way of creating a class. You give it a name, and then you can create a new named class, and that produces that class. So this is the classic JavaScript approach. Now what after effects doesn't something a little bit special. Those that you can't. These you're like two statements. Declaration's statement. You can't really do that in the external files, so I have to find a way to convince it. Well, what can you do? You're allowed a single expression in these libraries, so you're only allowed a single expression. And this comes from the data animation approach where you'd have a Jason file where this file would be adjacent instead. Need to have a bunch of values like name, value, value. This would be the Jason approach. And this is where you'd importance files before. And so that's how aftereffects imports is. A single compound value is allowed, so I can't give the class and name, But JavaScript has his ability of all these anonymous objects and create them. So this is rice is anonymous object. And you can create that director. So I'm saying new off this whole class. This is what I want to create a new one off. And then the parentheses to in Stan. She ate that class. This is not a sin tax. You'll see in a lot of javascript project. Don't be thinking this is normal. This is something I had to sort of come up with so that after effects, I could define a class this way. This has a lot of advantages and that you could refer to this. You'd have a constructor saying What happens when you first create this library? You could refer to other functions inside of this library. You can use this very simple function names in text. That's why I did class that way. So let's go through a few more of these points about saying, What? What chance, Chris, Maybe you didn't understand the middle class fully. Don't worry about that. You can just treat. This is boilerplate. You need to do new class of the top, and then at the very bottom you need to close it off with the closing set. Bracken the parentheses. Just follow this copy and paste that. That's a simple boilerplate. It's super small, and you don't have to understand it. To know how to use the rest of the library. At the bottom is libraries. I always like to reference. How do I use this library? I prefer to live footage that way. You also saw how weaken directly refer to things she had lived out for you, then you can do lived up, which highly position to call that function in a script. The alternative to that's is you may want to directly call it. If you have a simplified function, you could just directly call it highlight position. You notice In this second form, I don't have a semi cool because in the aftereffects code, the last item without the semi cool is the value actually given out of the expression. So it's important to track it inside. He's expression live himself. I don't use any cold all over because you don't need them in JavaScript, and I find it looks better without There are some few wear cases where may cause a problem , but they don't typically come up in code. So what is this stuff in here? Me and I said to get back to it a little while. Let's skip over the constructor for bits and go down to the first function. Rotate rotate was the first function we used. This isn't a simple start. We had a rotate function, and we call it in two places to make these things rotate back and forth, and they both called rotate this one to the minus. Lib rotate and the other one did lib rotate so they rotate in different directions. Rotate is what's known as a function in her library, and the key witness says we had function notation and JavaScript and give it a name and fall by two parentheses. There's nothing in between these because it takes no arguments later, issue the arguments and then use an open set. Bracing close separates defined that function. In this case, we want to give it. We want to prove the value of this layer time divided by 16 by 3 60 If you were in after effects itself, you would just have the expression like this time to buy six years. Since we have JavaScript, we have to say specifically what we want to return. This return means this function evaluates to whatever comes after returns. And so we return this value because this side is calling the function. This is what's called a function called It's calling it and asking it for a value. And so in this side, it calls it returned. The return says this is the value to give back to it. Okay, And this is a normal after expression time divide by 16 times 3 60 We have to use this layer here because time is not of little value inside after effects. So many's the values that shortcuts to like time and stuff on. Mostly, you're gonna have to put this layer in front. This compass also defined, so your media reaction is if you have something like time or some other very well, it doesn't work. Try sticking at this layer in front of it if you're migrating from after effects to an external file, because a lot of things that defined in this layer so rotate returns to this fight. Rotate is the function it's behind from these blocks, and the return says, What are we returning from it? The next one we had is an argument. You know, don't we had a simpler arguments. We had the offset pulse and that was used in the serial blink. We use an offset pulse between 90 and four, and that's what we said. We a number of items four and we divided. This is just a bunch of math year. The key point is there's a function called math thought sign which we use a lot math thought science in a package called Mac Offset Pulse takes an argument called Offset. This argument is exactly this value. Here it's a four. We passed it up 4 to 1 argument and has this name offset and it gets this value here. So we use it inside dysfunction. It's offset Here. Is this four value from here? It's in the lower one down. It's this three value from here. This is how you pass argument into this function and use that value in there. And we just do this calculation. All of these, let's hear these. Let's introduce new variable names in strict JavaScript. You're not allowed to just say no. My items equals four anymore. You have to say, Look, I'm defining a variable and I'm gonna call Let let this very well equal that value. You may see in some code something called Const. And this is another option. I prefer not to use constant javascript. This is a personal choice because I don't believe that word means what it says. It does another context. So I stick with the value of let and you can stick with the value of Let's you may have seen a value called var before 12 are, and this is old JavaScript and I don't want to get too deeply into this now. But as your code gets more complex, Var doesn't quite do the same thing as lead and can create some confusing code. So in general used let's usually disco, you do what you think it does. Let is pretty much equivalent to what equals was before and just say, Let isn't used very well in the moment. I say let Nah, Mabel's four means I can use this named item This number items later in another calculation , and against here, I see use a combination of Let. I like using a lot of let's with names so I can identify all these bits, the code. Not that I just have one massive expression lumped together. I understand all of us. At the very end of this month, can you see a return again? And this is the classic times 100 because in the code everything tends to be normalized between values of zero in one, but in after effects. Since we have a capacity here, we need a value between zero and 100%. That's why we multiply by 100 to convert. Evaluated 0 100%. If you need more information about that, check out my course on the class on sizing, where I talk more about these normalized values. Normally, that was extremely important aftereffects to understand. So I highly recommend you watch that course. You don't understand where this times 100 comes from. This function offset pulse did something else. It referred to this thought. Pulse speed, because we have is an offset pulse. We have this impulse and we have this in blink. We have the same value. We wanted them all to share the same speed This Paul Speed visit, the fine with dysfunction. It's not here anywhere. It's not in the arguments. We define it instead up at the top of the class and something called the constructor. We said this thought Paul, speed equals it. If we change it here, the value will change, Wrote the coat. Ah, constructor in JavaScript is something that's called so it's executed any time this class is created. So this class has this constructor, and when you do new class on it, it calls this constructor, you can guarantee this is always calling this code, and this is executed for everything. You always this pulse beat in this slider position. You don't want to put too much in here, but if it's just a bunch of basic values, that's fine. You could put 10 20 of them, but you don't want to do extended calculations, loops and stuff. Just keep it simple. This stuff Paul's vehicles ate this stuff. Slider executes position. These are variables than it can use throughout the rest off this code, and it's a great way to share variables as well. And what's interesting about that? If these values were actually exposed to the code as well? If I go back here and I want to say, Well, what is my pulse beat? So I'm gonna create a text layer. Just put a placeholder value one in for now and now we want to see with that is so I can take this library code again. Go to the text and text values, gonna have expressions as well. All click to create the text value in source data. And this is the library. And I said we had a pulse speed and that's the value of eight. So you can use text to kind of debug tonight to see what values in there you just put it into text. So this is also helpful. If you just want to actually have export values that are shared throughout your code, you can also stick them in the constructors. Just use them that way and to their shared through outs. Using Texas Way gives you another important thing is that you can use this to further debug the code. Remember, we had this pulse function offset polls. What if he wants you in the art? You could always see the expression values here, like capacity has a value 0 to 5%. And that's great. And you can also actually stick it here. You can actually say offset pulse. Now let's take the value, too, and this text will stick it up there. Well, what is the value? That's the exact value. We've all fast pulse of here, you know, since around it to 95 with the values action 95.27 Using text, you can actually deep of what value is coming out of the library without having to rely on visuals or any rounding if you want. If you want respect a few values, let's do live equals footage. Source data and you say you want respect to values, so that's the one value. But now you want to speak to the one that's the other value. Okay, what if I want to show a whole bunch of the values you could do something called String and Captain Nation. So when you start with the same values and you use a plus to do that plus live doves one. And when you put like a comma cost lived off set pulse to lived a pulse, too. Now, my text size is probably not big enough, so he's gonna increase the value. Here we go. Now you notice that had these really tricky ranges, there's just make it really big. If you're trying to debug, that's just one minute about those. They're very complex. Value is if you're doing the debugging you're probably going after decrease. The font size is something where you can see it's smaller and this plus doesn't can't nation make sure you always start with a string? It's going to do the plus. It has to start with the string. Otherwise, you mind it during the America Addition. It's weird, so just start with a string and at it and you can dip of those values at the top. That was how we saw how you can get these values that pull speed, and you can debug those values as well. What else that I use in here that might be of interest. This Paul speed returns to a constructor value. You can also refer to another function, and this is what we did in composition. We defined this relative position function, which takes a layer and a point relative to that layer and gives back what it is in the content size. So it takes a value between 01 and expresses it instead in the content size of the Slayer, which really useful many cases in terms of sizing, you can put things off right in terms of anchor points, is really useful, re useful function in your line of happiness, a lot of code, and we did that in the anchor bottom cause anger bottom. We just said. All we need to do is convert a relative position to a content position because after effects uses that as anchoring as content positions, not the relative position. And we use this thought relative position to call that function. And this this thought syntax. This as it didn't pull speed refers to this library, this class, everything inside of here. We can call from these other functions, whether it's this dot pulse speed or this dot relative position, and we pass it arguments much like we did from after effects. We pass it arguments in here, and we get a value back and we'll return and top right off. We used the exact same function, and then we used the layer conversion function to comp to convert that position inside that object to one in the composition, and we return that I'll make another point about sign again. Sign is a function usual lot creates away form. You may want to look it up. It creates a curved way form, and things move. According that is very useful for creating cycles. If you need to create cycles of specific times, you're going to have to relearn how to use the pie and multiply a bit. I can create another class and timing eventually, just let me know what you'd like to know in it. And I could go off and Creed that similarly, with these anchoring functions, I'm gonna do another class just on positioning and we'll go over all this stuff again. So this is how you create a library of expressions in after effects. You create this new class, you define functions in its you can use the constructor to declare variables and available throughout the rest of function, and you can call their phone. If you need more functions, just add them to my end to the end. My function. You can define a new one and don't forget to return a value of some kind. It's in my function now. We go back to the text layer, you can see that my function is there gets the value of 123 13. Trail Effect: Now let's do one last expression. Ah, practical examples. Well, that's gonna create trail effective. Something moves to the screen. The first thing I want to do is go over to my favorite websites over my favorite websites and get an image. And so I want something that circular. This is picks obey dot com. I would get something that circular and actually want some sort of illustrations. So it's circular illustration. A lot of nice ones here, but I'd have to extract them. So let's see if there's something separated all its own. This one looks lovely, So let's grab that one from the artists on a cool Chuck. So that's her page there were gonna download this one here. Lets download this year. Give me small. We don't need the massively large one. It's complete page. Let's take a smaller one. I say this when you go save it into the resources directory. The mandala. They didn't create a way imported over here and for the file affects resources. You already go. There's our mandala there now because I have black. It works out. Chances are you'd want transparent one, so I want to create a new composition as well. A new composition. Well, this called trails and then I'll take that mandolin or third in here, reduce the size of it a bit. And so let's just animate the path that goes through here. Bits go down to the position, and over five seconds, which is at a key frame and third over, a sheer five seconds will dispatch a key frame and move it over here. That's quite so high, and then another 15 seconds will put it at the ends and move it down to over here. And this is actually quite a lot slower than I wanted. So let's actually speed that up quite a bit, because remember a time line. I'm used to be exhumed in a bit more, so I think I just made a really tight there. It's moving all closer together. The whole thing takes about three seconds. So I want to create a duplicate effect, trail behind it and create many layers to create that trail. And this is where code duplication become a big issue. I want to make it very simple, so we're gonna create ah, function that does this. Now there's two things the trail has to do it has to modify its opacity, and it has to modify its position. So we know that we need to expressions one for the position and one for the opacity. So let's go over and create those default ones right now. When you go to the bottom, there's a trail position. We want to make this dynamic. We want to take in the layer that were taking the position off. And right now we can simply say layer dot transformed off position. Let's take whatever position it has just used that and trail opacity. Now pass. It is gonna be a bit of an issue. First of all, for now, let's just return 75 75% which is your 750.75 times 100. I got a duplicate that, but I don't want the timeline. So duplicates another the new one and take the transforming and remove the animation, and I'm going to rename this one to trail. Now the Army has that same position to move it out of the way first were convinced that it's some sort of copy. OK, so when I just moved this, I realized I actually do need something transparent because they're gonna overlap on top of each other. Let's go back to pick Savannah. Scroll through a bit. Let's find something that is transparent. This one looks nice from Hannah Louise. It's a nice nether mandala and it transparency. We use that one. Let's download the small. One of that game will save. That's then we'll go back to after effects and will replace the footage of that with that file with the other mandala. Now these air properly transparent. That's what we want. And it's offset this once. We know that's a different object that rename it trail because we're gonna be trailing. So now we want to make sure that our functions work. We always change the position of capacity. We set up the basic function trail position to return layer transfer position that will attach it directly to it and trail passage E. We're gonna take basic coach, import that library on position and say dot trail position. We want to pick with to the other layers saying, trailing this position and you know, as it moves it right on top, we can't see it, which is what we were expecting, and I want all click capacity. Create expression for that one, and this one is trail pass ity and I also passed in the other layer and you'll see why in a moment why we still need that other layer. And this goes a 75%. But we can't see anything yet wanted was actually have this trail trail behind the other one. So let's go to trail position, and we want to say, Well, it has to go behind a bit So let's say are offset is your 10.25 and this is in time. A time offsets your 0.25 seconds behind the other one. And so later. Tremendous opposition has a special function called value at time, and we want it in the past. We're gonna take the current time, this layered up time minus the offset, and you won't see that cause they're both of the start. But as you move it, you could see its behind. Well, actually, it's it's in front. So training this movement actually behind. So now it's behind that one of the trails behind it. That's great. We have the 1st 1 that trails behind, so let's just duplicate and create a 2nd 1 Oh, it's in the exact same place because we haven't offset. That is fixed. It's your 0.25 Now you could you could if you wanted to make this trail position taking index or offset parameters, saying how far behind it should be. Or we could make this automatic. And there's a way to do this using an index parameter. So these have indexes 12 and three. We could make use of that because they were easier further behind. So what is the index? Let's say the relative index is going to be this layer dot index minus the target layer, which is called layer here dot index. This is how many layers we are a we from the one that we're trailing and now, in a multiplier offset by the relative index, it's received this. You notice it pushes it further behind because it's further behind it, and so it trails its days further behind. So let's do the same thing. Betrayal, passing. Let's take a relative in next. And now I'm gonna do something a little bit weird to pass the onion. Say, let relative opacity. This is a normalized Acosta, so let's normalize opacity instead. Normal capacity is math of powers and exponents function, and this is there's like an exponential gain. But because we have a value less than one, it's going to smooth it off. You can look up what that does, but it works well for trailing. We take that base value and raise it to the relative index. We made around raise too much. That works, and we take the normalize. The fastening converted back to a percentage 100%. Now you could see the one further back is lower capacity and that's based index. These two layers are otherwise the same. If I create another one, it goes further back and another and another and another. Actually, this one is now the one in the back. As I create these, it's always the one in the front, but I can create a few more until I can't see them. Now these look like they're a bit further apart. I may want to put them a bit closer together cause I have a few more of them right now, and I think you're passes a bit too much. Let's put that so now they tree a little bit closer together and you have a trailing effect , you might want to say, Well, I want to have a different trailing effect. I want to have the back ones lag even further And this is where you can use just math. Even a little bit more can stay. Well, let's have just using index. We can play around with a map our function again, a time you want any type of DK or expert known it. You're always going to use the power function. There was a writer relative index times, the relative index, and you'll see that pushes them closer together. But we want them pushed further apart. So as it goes further away, they get pushed further and further apart. So the trail, that one it was really far behind. If you notice that's really they get dragged further and further apart makes it very subtle difference. And so there's so far part. Now I can probably increase the capacity, and here I want to decrease that slightly. So now you see, as it goes out, the trail corrects around it, it goes even further, and this is one of the great things about using an expression library here is that if you didn't have a library, you type that code and directly in here, opacity and position every time you wanted to modify, you have to modify and always place or create new duplicates were in the library. We have one place to change that completely changed all of these. So if we want to make them brighter, change it here and all the layers get brighter. Now it's too much. Three. Put it back to 75 and we want to be able to barely see last month's Let's Go 70. That's too much so and see how easy it is. Just play around and get these values converted to what you want. And same with the speed. You can change this, too. If you want to pack them closer together or spread them further part, you can modify these ones. This value here increases the increasing spread between, and this is the overall spread from the 1st 1 that creates are trailing effect. And that's how we use an expression likely to do that trail position and trail opacity 14. Conclusion: That was a lot, wasn't it? But you've made it to the end. Great work. Now take this information. You can start using it in your projects. We've looked at a lot of things here. We've looked at the most important bit of how to create an expression library. This lets you share code between compositions between layers in between projects, makes it easier to edit. It makes it easier to me, played it, and it lets you combine code together to use it. New and interesting ways give you a big edge and creating animations and especially making responsive templates for use in premier. We've looked at how to create the library, what all the javascript means, how the functions work, how to declare very bulls, how to get the size of things and how to align things to it. I'm gonna create another class on Maura about alignments because there's a lot to do with alignment. Still, if you're uncertain about the sizing aspect to with like 100% thing and how sizes for go, check out my class on sizes. If you do something fun with the training animation, please post it changed. A graphic posted change the path, add more things to it. You make some blinking and stuff. Let's see what you're doing. This makes it all a lot more interesting to see what you're doing and see how you're using this information in your own animations. Thank you very much for taking my class. I'm medical, More Caray. I do a lot of other classes on after effects, some creative ones and the broken one. Please follow me to see all of my classes and until next time, enjoy your animation.