Skip to main content
Known Participant
March 8, 2022
Answered

Triggering animation with multiple markers

  • March 8, 2022
  • 1 reply
  • 898 views

Need some help with expressions 🙂

 

I want to animate the position of a layer triggered by 3 different markers.
Each marker gives a different position value.
Until now all I have found on the internet are guides to trigger animation with markers using only ״In״ and ״Out״ markers or using keyframes..

 

I have a layer with 3 dropdown menus. which contain the same objects. (about 10 objects in each)
In the position property I wrote an array of different positions of the layer and another array of dropdown menus.
So now, each marker triggers the position of the layer to jump straight the position provided by the dropdown menu. it works fine, but I don't know how to animate it.


I thought of using the linear() method but don't know how to combine it with the expression I have already wrote...

 

This is the expression:

 

var menus = [
	thisComp.layer("Sky CAT controller").effect(1)("Menu").value, // 0
	thisComp.layer("Sky CAT controller").effect(2)("Menu").value, // 1
	thisComp.layer("Sky CAT controller").effect(3)("Menu").value  // 2
];


const markers = thisComp.layer("Sky CAT controller").marker;
let latestMarkerIndex = 0;


if (markers.numKeys > 0) {
 latestMarkerIndex = markers.nearestKey(time).index;


 if (markers.key(latestMarkerIndex).time > time) {
latestMarkerIndex--;
 }
}
let outputText = "";


if (latestMarkerIndex > 0) {
 const latestMarker = markers.key(latestMarkerIndex);
 outputText = latestMarker.comment;
};

m = outputText-1;

var x = 540;
var allResults = [
	[x,3287],
	[x,3024],
	[x,2763],
	[x,2501],
	[x,2239],
	[x,1978],
	[x,1715],
	[x,1454],
	[x,1192],
	[x,928],
	[x,664],
	[x,406],
	[x,141],
	[x,-120],
	[x,-379]
];

allResults [menus[m]-1];

 

 

 

Thanks in advance

This topic has been closed for replies.
Correct answer Dan Ebberts

I think it will look something like this:

menus = [thisComp.layer("Sky CAT controller").effect(1)("Menu").value,
	thisComp.layer("Sky CAT controller").effect(2)("Menu").value,
	thisComp.layer("Sky CAT controller").effect(3)("Menu").value];
yVals = [3287,3024,2763,2501,2239,1978,1715,1454,1192,928,664,406,141,-120,-379];
x = 540;
m = thisComp.layer("Sky CAT controller").marker;
val = value;
if (m.numKeys > 0){
  n = m.nearestKey(time).index;
  if (time < m.key(n).time) n--;
  if (n > 0){
      menuIdx = parseInt(m.key(n).comment,10)-1;
      y = yVals[menus[menuIdx]-1];
      v2 = [x,y];
    if (n == 1){
      v1 = value;
    }else{
      menuIdx = parseInt(m.key(n-1).comment,10)-1;
      y = yVals[menus[menuIdx]-1];
      v1 = [x,y];
    }
    t = time - m.key(n).time;
    val = linear (t,0,framesToTime(10),v1,v2);
  }
}
val

I wasn't sure what to do before the first marker, so it just ramps from wherever the layer is poisitioned to the first marker/menu selection. It's not thoroughly tested, so there may be bugs, but you should be able to decipher the approach.

 

 

 

1 reply

Dan Ebberts
Community Expert
Community Expert
March 8, 2022

I'm not sure exactly what you're after, but if you want to slide from one value to the next, over some defined amount of time (or over the duration between markers), you need to get the values from your allResults array for both the most recent marker and also the next marker. Then you could use linear() or ease() to move between those two values.

talwagAuthor
Known Participant
March 9, 2022

Thanks Dan!!

 

Yeah, I want to slide from one value to the next, starting at a marker and ends 10 frames later.

 

This is what I'm trying to do:

ease(t, the marker i am currently on , 10 frames later , the previous position , the position provided by this marker )