Slider expression

[David Conklin]

You can use linear interpolation to do this. Essentially ‘mapping’ the X-val of your Box to the slider. What this does, basically, is say when Box is at position 0, slider should be 0, when box is at thisComp.width, slider is 11.1111. The beauty of this expression is that it ‘tweens’ all the values between those two states.

The last line of this expression simply makes sure that the slider never exceeds 11.1111 or goes below 0 (which may happen if your box goes into negative or past the width of your comp).

Of course, you can update all of these values to fit your case sepecifically.

Check out the below expression. Happy coding!

//this goes on your slider.

//get the thing we're tracking.
var cntrl = thisComp.layer("BOX").transform.position[0];

var boxStartX = 0 //box starts at 0;
var boxEndX = thisComp.width //box ends at width of comp.

var sliderStart = 0; //slider begins at 0.
var sliderEnd = 11.1111; //slider ends at 11.1111.

//make the interpolation.
var makeSlider = linear(cntrl, boxStartX, boxEndX, sliderStart, sliderEnd);

//clamp the value (don't let it go out of range)
Math.min(Math.max(sliderStart, makeSlider), sliderEnd)

David Conklin
Motion Designer

[Ryan Biercewicz]

Hi David,

Wow this is fantastic, thanks so much! The only problem is that it doesn’t reach 11.1111 at the end of the move, it counts up and then stops at 6.7949 when the box finishes moving.

Am I doing something wrong?

Cheers
Ryan

[Ryan Biercewicz]

To clarify, this is the expression I pasted onto my slider;

var cntrl = thisComp.layer(“box”).transform.position[0];

var boxStartX = 0
var boxEndX = thisComp.width

var sliderStart =0;
var sliderEnd = 11.1111;

var makeSlider = linear(cntrl, boxStartX, boxEndX, sliderStart, sliderEnd);

Math.min(Math.max(0, makeSlider), 11.1111)

[Ryan Biercewicz]

Sorry David, I’ve just figured out why that’s happening – the expression is dependent on the width of the comp.

Unfortunately, the box doesn’t travel all the way across the comp – I still need it to read 11.1111 at it’s final destination, is there a modification I can make to enable this?

Cheers
Ryan

[David Conklin]

Yeah, no problem. The line you’re looking for is this:

var boxEndX = thisComp.width //box ends at width of comp.

Simply change that to your box’s end X position and you should be good! For instance

var boxEndX = 985; //box ends at X=985.

Good luck!

David Conklin
Motion Designer

[David Conklin]

Another trick would be to link the boxEndX variable to the last keyframe of your box’s position value, that way you don’t have to change the expression if you decide to redo the box animation. The expression is a little different, and would look like this:

//this goes on your slider.

//get the thing we're tracking.
var cntrl = thisComp.layer("BOX").transform.position;

//define holders
var boxStartX;
var boxEndX;

//check to make sure there are keyframes
if(cntrl.numKeys > 0){
//get keyframe values.
boxStartX = cntrl.key(1).value[0];
boxEndX = cntrl.key(cntrl.numKeys).value[0];
} else {
//if no keyframes, fall back on these values
//(change them to whatever you need.)
boxStartX = 0;
boxEndX = 500;
}

//slider values
var sliderStart = 0;
var sliderEnd = 11.1111;

//make the interpolation.
var makeSlider = linear(cntrl[0], boxStartX, boxEndX, sliderStart, sliderEnd);

Math.min(Math.max(sliderStart, makeSlider), sliderEnd);

The clamp is only necessary in case you have a/some middle keyframe(s) that go outside of the range set by your first and last keyframes.

Good luck!

David Conklin
Motion Designer

[Ryan Biercewicz]

Hi David,

Ah perfect, thanks!

Just one final thing – do you know if theres a way to ease the counter, so that when the box eases out of the move the counter eases to the final number? There are a few ‘counter-ease’ expressions online but they all seem to be dependent on duration – this one is obviously based on comp width so I was wondering if there’s a solution to this?

Cheers,
Ryan

[David Conklin]

Heya – this expression is getting its data from the X position, yeah, but it’s still using an interpolation function to do so.


var makeSlider = linear(cntrl, boxStartX, boxEndX, sliderStart, sliderEnd);


While the default easing settings for this function are somewhat limited, you can do a regular easy-ease, ease-in or ease-out simply by changing the above line to something like this:


var makeSlider = ease(cntrl, boxStartX, boxEndX, sliderStart, sliderEnd);
var makeSlider = easeOut(cntrl, boxStartX, boxEndX, sliderStart, sliderEnd);
var makeSlider = easeIn(cntrl, boxStartX, boxEndX, sliderStart, sliderEnd);


Keep in mind that the expression is tracking the box’s progress as it moves between two points. This means that the easing applied to your box is already being applied to the slider. You could try to more heavily ease the box animation if you need a more eased slider. Using one of the ease() functions above will strengthen the ease applied to the slider, though.

Good luck!

David Conklin
Motion Designer

[Ryan Biercewicz]

Hi David,

This is great, thanks so much for solving this one! It’s working perfectly now – just a note, I had an error come up with the ease expressions but tried adding a [0] after cntrl as you did before, and that seemed to sort it out.

Cheers,
Ryan

[Ryan Biercewicz]

Hi David,

I’ve run into another problem – I now have a box travelling along the Y axis (from bottom to halfway up the screen), but I can’t figure out the modifications I need to make to the expression. If I change the X to Y values it doesn’t seem to work. What am I missing?

Best,
Ryan