<p>There are some <a href="https://helpx.adobe.com/after-effects/using/expression-language-reference.html#interpolation_methods_expression_reference" rel="nofollow noreferrer">built-in functions</a> just for this purpose. You'll find them in the <strong>interpolation</strong> folder in the expression drop-down. The simplest is the <code>linear()</code> function:</p>

<pre><code>linear(t, value1, value2)
</code></pre>

<p>This function interpolates in a linear fashion between value1 and value2 based on the value of t, where <code>0 ≤ t ≤ 1</code>. So if <code>t=0</code> the function returns <code>value1</code> and if <code>t=1</code> it returns <code>value2</code>. It can also take five parameters, in the form</p>

<pre><code>linear(t, tMin, tMax, value1, value2)
</code></pre>

<p>in this form, instead of using the range 0-1 for <code>t</code> it uses the range <code>tMin</code> to <code>tMax</code>.</p>

<p>Along with <code>linear()</code> there are also <code>ease()</code>, <code>easeIn()</code> and <code>easeOut()</code>. These interpolate with easing - meaning the animation slows down at the beginning or end, or both.</p>

<p>So in your example you could add this before the last line:</p>

<pre><code>startTime = inPoint; //if you want the animation to start at the start of the layer
m = ease(time-startTime, 0, animationLength, 0, m)
</code></pre>

<p>this will smoothly animate from the layer's in-point for <code>animationLength</code> seconds to the calculated position.</p>

<p><strong>Oh, BTW</strong> it's Java<em>script</em> not Java. They are completely different languages. As they say, Java and Javascript are similar in the same way that "car" and "carpet" are similar.</p>

CC BY-SA 4.0
2018-05-16T13:36:57.903Z
I guess everyone's been using that expression for years...  but I think that's AWESOME!  I think I've just fallen in love with AE expressions :)  Thanks a bunch, I haven't tried my original example yet but I just ran a quick test to make sure I understand how it works and I think I know how to work my motion graphic now!  thanks again!
AutoBaker
CC BY-SA 4.0
2018-05-16T14:05:35.790Z
Expressions are the most powerful part of After Effects IMHO
stib
CC BY-SA 4.0
2018-05-16T13:05:56.617Z
2018-05-16T13:11:41.227Z
2018-05-16T13:11:41.227Z
stib
<p>I'm new to using expressions in after effects and I've also hardly touched Java before.  However using some online tutorials and common sense, I managed to create a lower thirds title graphic yesterday, the java is used to change it's position based on how much text is written inside.  The title graphic bleeds off to the left of the screen, so when text is written on it, it moves left or right to match the length of text.  I've included the code below.</p>

<pre><code>s =thisComp.layer("Header title");
x = s.sourceRectAtTime(time-s.inPoint,true).width;

subl =thisComp.layer("Sub title");
subt = subl.sourceRectAtTime(time-subl.inPoint,true).width;

text = Math.max(subt, x) -100;

max = 659.4;
m = Math.min(max, text);

[m, 871]
</code></pre>

<p>So with a little bit of text:
<a href="https://i.sstatic.net/f7fyp.jpg" rel="nofollow noreferrer"><img src="https://i.sstatic.net/f7fyp.jpg" alt="graphic position with less text"></a></p>

<p>With more text:
<a href="https://i.sstatic.net/JSR9G.jpg" rel="nofollow noreferrer"><img src="https://i.sstatic.net/JSR9G.jpg" alt="graphic position with more text"></a></p>

<p>Where I'm struggling is I want to make this into an animated motion graphic, where the graphic just slides in and out at the right time.  However, if there's less text, it's position is further out the frame and it takes longer to slide in - which means that it's out of sync with other parts of the animation.  I'm not worried about consistent speed, I just want it to appear in at the same time as it has to match other animations.  The only way I can see this happening accurately is by further encoding, where it gets a little beyond me!</p>

<p>I tried animating using <code>if</code> expressions dependant on the <code>time</code> function, but this didn't create a transition, the graphic jumped instantly from point to point.  I can't find anything on creating keyframes in java either so not sure the best way to do this.</p>

<p>Really appreciate any help to put me on the right track.</p>

<after-effects><animation><after-effects-expressions><after-effects-scripting><script>
help to animate an lower thirds that's positioned by expressions
AutoBaker
# help to animate an lower thirds that's positioned by expressions

(Asked by: username_0 on 2018-05-16)

I'm new to using expressions in after effects and I've also hardly touched Java before.  However using some online tutorials and common sense, I managed to create a lower thirds title graphic yesterday, the java is used to change it's position based on how much text is written inside.  The title graphic bleeds off to the left of the screen, so when text is written on it, it moves left or right to match the length of text.  I've included the code below.
s =thisComp.layer("Header title");
x = s.sourceRectAtTime(time-s.inPoint,true).width;

subl =thisComp.layer("Sub title");
subt = subl.sourceRectAtTime(time-subl.inPoint,true).width;

text = Math.max(subt, x) -100;

max = 659.4;
m = Math.min(max, text);

[m, 871]

So with a little bit of text:

With more text:

Where I'm struggling is I want to make this into an animated motion graphic, where the graphic just slides in and out at the right time.  However, if there's less text, it's position is further out the frame and it takes longer to slide in - which means that it's out of sync with other parts of the animation.  I'm not worried about consistent speed, I just want it to appear in at the same time as it has to match other animations.  The only way I can see this happening accurately is by further encoding, where it gets a little beyond me!
I tried animating using if expressions dependant on the time function, but this didn't create a transition, the graphic jumped instantly from point to point.  I can't find anything on creating keyframes in java either so not sure the best way to do this.
Really appreciate any help to put me on the right track.

**Tags:** after-effects, animation, after-effects-expressions, after-effects-scripting, script


---

## 1 answers

### Answer by username_1 on 2018-05-16. Score: 1 | Accepted answer

There are some built-in functions just for this purpose. You'll find them in the interpolation folder in the expression drop-down. The simplest is the linear() function:
linear(t, value1, value2)

This function interpolates in a linear fashion between value1 and value2 based on the value of t, where 0 ≤ t ≤ 1. So if t=0 the function returns value1 and if t=1 it returns value2. It can also take five parameters, in the form
linear(t, tMin, tMax, value1, value2)

in this form, instead of using the range 0-1 for t it uses the range tMin to tMax.
Along with linear() there are also ease(), easeIn() and easeOut(). These interpolate with easing - meaning the animation slows down at the beginning or end, or both.
So in your example you could add this before the last line:
startTime = inPoint; //if you want the animation to start at the start of the layer
m = ease(time-startTime, 0, animationLength, 0, m)

this will smoothly animate from the layer's in-point for animationLength seconds to the calculated position.
Oh, BTW it's Javascript not Java. They are completely different languages. As they say, Java and Javascript are similar in the same way that "car" and "carpet" are similar.

> **Comments:**
> **username_0**: I guess everyone's been using that expression for years...  but I think that's AWESOME!  I think I've just fallen in love with AE expressions :)  Thanks a bunch, I haven't tried my original example yet but I just ran a quick test to make sure I understand how it works and I think I know how to work my motion graphic now!  thanks again!  
> **username_1**: Expressions are the most powerful part of After Effects IMHO  

---

