Is it possible to create 2 animation using expressions on one property?

[Dan Ebberts]

That is certainly possible. The details depend on how you’re doing the in and out animations (expressions? keyframes?). What does the slider do, exactly–does it set the time to start the out animation? More details would be helpful.

[Hiro Ober]

Hi Dan,

Thank you SO much for replying! I still remember the last time you helped me tremendously several years ago! 😀 So here is my set-up. I only use expressions to create the animation, no keyframes are used as it is designed for PR users and PR’s Essential Graphic doesn’t support keyframes. 🙁

I used a custom expoOutease function to write the intro, which is a simple X position animation. Then I plan to set the starting time of the outro referencing a slider, say it’s the second or frames when the outro starts. Outro animation will be another X position animation. e.g. intro is sliding in from the left side and outro is sliding out to the right.

I attached my file if it’s easier to check out what I put in. Your help is greatly appreciated!

Containers_AE2022.aep 119 KB After Effects Project Files - Click to view

• Copy Download Link

[Dan Ebberts]

OK, as a simple example, say you have a slider that defines the outro begin time in seconds, you could structure the whole thing like this:

outroStart = thisComp.layer("CTRL").effect("Outro Begin (seconds)")("Slider");
if (time < outroStart){
  // intro code goes here
}else{
  // outro code goes here
}

[Hiro Ober]

Ahh, I see! It solved the issue beautifully. Thank you so much Dan! I think I understand the structure of it. But now I found the issue is I don’t know how to reference the end position of the intro animation. If I use transform.xPosition or value as the starting value of the outro animation it gives me 0, which is the default value of the xPosition.

[Dan Ebberts]

Ah, OK. You might have to move the calculation of EndPos outside of the time test. So it would be structured more like this:

//Define variables//
a = content("Rectangle Path 1").size[0];
b = content("Rectangle Path 1").size[1];
IAD = thisComp.layer("CTRL").effect("Intro Animation Direction")("Menu");
IEP = thisComp.layer("CTRL").effect("Intro End Position - Horizontal")("Menu");
//Convert from second to frames - Animators don't work in seconds...//
Intro_Anim_Duration = thisComp.layer("CTRL").effect("Intro Anim Duration(frames)")("Slider")
anim_duration_seconds = thisComp.frameDuration * Intro_Anim_Duration;
outroStart = thisComp.layer("CTRL").effect("Outro Begin (seconds)")("Slider");
if (IEP == 1){
	EndPos = thisComp.width *0.05+a/2;
}else if(IEP == 2){
	EndPos = thisComp.width/2;
}else{
	EndPos = thisComp.width *0.95-a/2;
}
//Custom Easing Function Start//
		function easeOutExpo (t, b, c, d) {
		var OUT_EXPO_CORRECTION = 1.000976;
		return (t==d) ? b+c : c * OUT_EXPO_CORRECTION * (-Math.pow(2, -10 * t/(d)) + 1) + b;
	};
		var startDur = 0;
		var endDur = anim_duration_seconds;
		t = time - startDur;
		d = endDur - startDur;
//Custom Easing Function End//
if (time < outroStart){
  if (IAD == 1){
    easeOutExpo(t,-a/2, EndPos - -a/2, d);
  }else if(IAD == 2) {
    easeOutExpo(t, thisComp.width+a/2, EndPos-thisComp.width-a/2, d)
  }else{
    EndPos
  }
}else{
  // outro code goes here
}

[Hiro Ober]

Dear Dan,

I appreciate your response. However, I’ve already implemented the structure you suggested. My main challenge lies in determining how to reference the final position of the intro animation so it stays where it is until the outro is triggered. I tried xPosition and valueAtTime, but they both returned the default value 0 instead of the desired end position of the intro. Apologise for the very amateur question…😂

//Custom Easing Function End//
if (time < Outro_Start){
	if (IAD == 1){
		easeOutExpo(t,-a/2, EndPos - -a/2, d);
	}else if(IAD == 2) {
		easeOutExpo(t, thisComp.width+a/2, EndPos-thisComp.width-a/2, d)
	}else{
		EndPos
}
}else{
	if (OAD == 1){
		easeOutExpo(time - Outro_Start, transform.xPosition,-a/2,  d);
	}else if(OAD == 2) {
		easeOutExpo(time - Outro_Start, transform.xPosition, thisComp.width+a/2, d)
	}else{
		EndPos
}
}

Illustration.png 95 KB Image File - Click to view

• Copy Download Link

[Hiro Ober]

Oh, I feel like a dumbass, it’s just EndPos, isn’t it?