Skip to main content
S
Stefan Walz
Participant
October 4, 2021
Answered

Keyframe-less Position animation. Trying to use multiple Interpolation expressions in one property

  • October 4, 2021
  • 3 replies
  • 787 views

Hi all, i'm not the most familiar with expressions, but am attempting to make a simple, animated lower-thirds title MOGRT and have run into an issue.

 

I have two text ("TITLE" and "SUB-TITLE") elements that are placed over a shape layer.  

I want my animation to have the shape layer extend with the width of the text as it's revealed and i've made an if/else expression to have the shape layer automatically scale with the width of the widest text element.  

The issue i'm running into is it appears to only allow me to use one interpolation

 

ease(t, tMin, tMax, value1, value2)

 

to have the shape layer animate in, but not a second one to close out the animation.

Here is the expression for my shape layer:

 

var TextWidth;
if(thisComp.layer("TITLE").sourceRectAtTime().width>thisComp.layer("SUB-TITLE").sourceRectAtTime().width) TextWidth=thisComp.layer("TITLE").sourceRectAtTime().width
else TextWidth=thisComp.layer("SUB-TITLE").sourceRectAtTime().width;
var BoxWidth;
if(TextWidth<1) BoxWidth=-70
	else BoxWidth=TextWidth;
var xBegin=134;
var y=134;
var Zing = effect("\"Zing\" Slider Control")("Slider")
ease(timeToFrames(t = time + thisComp.displayStartTime, fps = 29.97), 8, 17, [xBegin,y], [xBegin+Zing+BoxWidth,y]);

 

Ideally, I would want to have a second interpolation that looks like this, right after the first (ease).

ease(timeToFrames(t = time + thisComp.displayStartTime, fps = 29.97), 147, 156, [xBegin+Zing+BoxWidth,y], [xBegin,y]);

However, everytime I have more than 1 interpolation, the animation goes wonky and seems to ignore the first ease.

 

I attached a gif showcasing what I want the animation to look like (acheived though keyframes for demonstation) as well as the error that having two interpolation expressions appears to cause.  

 

Any thoughts on how I can achieve this with or withoute interpolation?

This topic has been closed for replies.
Correct answer Rick Gerard

I would suggest that you set your ease (or linear) interpolation based on layer in-point and/or layer out-point and add them together.

 

For example:

 

t = time - thisLayer.inPoint;
tMin = 0;
tMax = .5; // half second
Mov1 = easeIn(t, tMin, tMax, 0, 100);

t2 = t - 1.5; // start of second move
Mov2 = easeOut(t2, 0, .5, 0, 200);

totMove = Mov1 + Mov2; //Total movement

[value[0] + totMove, value[1]]

 

This will increase the value[0] by 100 in the first half second then add another 200 starting at one-and-a-half seconds and taking another half-second to complete. You could keep going based on layer out point and then subtract values from the current value so you end up with a double starting transition and a double ending transition. You would have to set protected areas for start and end that were long enough to cover the transitions and you could tie an expression like this to any property including scale, rotation, position. Basically any value.

 

If you had multiple shapes on a single shape layer you could even use this approach to control anything you can animate on a shape.

 

I don't have time to try your expression, but the idea is to set up two interpolated moves and add them together. You could then add them to any current value. 

3 replies

OussK
Community Expert
OussKCommunity Expert
Community Expert
October 5, 2021

why you don't use some tools that can help you, try https://www.danim.com/danim-box-free-after-effects-script 

    S
    Stefan WalzAuthor
    Participant
    October 5, 2021

    This looks like a great resource, i'll definately take a look into it for future needs. Thanks!

    R
    Community Expert
    Rick GerardCommunity ExpertCorrect answer
    Community Expert
    October 5, 2021

    I would suggest that you set your ease (or linear) interpolation based on layer in-point and/or layer out-point and add them together.

     

    For example:

     

    t = time - thisLayer.inPoint;
tMin = 0;
tMax = .5; // half second
Mov1 = easeIn(t, tMin, tMax, 0, 100);

t2 = t - 1.5; // start of second move
Mov2 = easeOut(t2, 0, .5, 0, 200);

totMove = Mov1 + Mov2; //Total movement

[value[0] + totMove, value[1]]

     

    This will increase the value[0] by 100 in the first half second then add another 200 starting at one-and-a-half seconds and taking another half-second to complete. You could keep going based on layer out point and then subtract values from the current value so you end up with a double starting transition and a double ending transition. You would have to set protected areas for start and end that were long enough to cover the transitions and you could tie an expression like this to any property including scale, rotation, position. Basically any value.

     

    If you had multiple shapes on a single shape layer you could even use this approach to control anything you can animate on a shape.

     

    I don't have time to try your expression, but the idea is to set up two interpolated moves and add them together. You could then add them to any current value. 

      S
      Stefan WalzAuthor
      Participant
      October 20, 2021

      Thank you for the excellent reply and expression comments.  This worked like a charm and could easily be applied to numerous use cases.  Thank you for the lesson!

      Dan Ebberts
      Community Expert
      Dan EbbertsCommunity Expert
      Community Expert
      October 4, 2021

      The general structure to have different in and out eases is to use an if/else based on time, probably structured something like this:

      if (timeToFrames(time) < 17)  // or, it could be half way between end-of-in and start-of-out
  ease(// in ease parameters go here)
else
  ease(// out ease parameters go here);
        Terms & ConditionsAccessibility statement
        Using the community Terms of use Privacy Cookie preferences Do not sell or share my personal information ad choicesAdChoices