-
Checkbox Controlled Opacity Easing… But With Easing Before The Other Keyframe?
Hi, this is my first time posting here. I have been looking over many of the posts on this blog and would like to pose my own question.
I saw a post by the amazing Dan Ebberts about “Checkbox Controlled Opacity Easing” from 2014 and I thought the code provided a great solution to my project but here’s the thing.
I would like help with figuring easing before/into the keyframe as well as easing after/out of the keyframe.
My current attempt looks like this:
fadeTime = .5;
cb = thisComp.layer("Controller").effect("Timer ON")("Checkbox");if (cb.numKeys > 0)
{
n = cb.nearestKey(time).index;
if (cb.key(n).time > time ) n--;
if (n >0)
{
t = time - cb.key(n).time;
if (cb.key(n).value > 0)
ease(t,0,fadeTime,-100,0);
else if (time - cb.key(n).time <= fadeTime)
{
ease(t,0,fadeTime,0,-100);
}
}
else
{
0
}
}
else
if (cb.value > 0) 100 else 0 -
4 Replies
-
I just want to understand better what you are after. Why do you need easing before and after keyframe? Wouldn’t it be enough to ease after the keyframe like this: after checkbox off, ease to zero. After checkbox on, ease to one. That way, you can get both in and out animations. You must be careful not to put consequent keyframes with the same value. When this expression finds a “ON” keyframes, goes from 0 to 100 even if the value was 100 before the keyframe.
If that suits your case, this could be the expression:
fadeTime = 0.5;
cb = thisComp.layer("Controller").effect("Timer ON")("Checkbox");if (cb.numKeys > 0) {
n = cb.nearestKey(time).index;
if (cb.key(n).time > time) n--;if (n > 0) {
t = time - cb.key(n).time;
if (cb.key(n).value > 0) ease(t, 0, fadeTime, 0, 100);
else ease(t, 0, fadeTime, 100, 0);} else {
cb.key(1).value == 1 ? 0 : 100;
}} else cb.value > 0 ? 100 : 0;
Andrei
My Envato portfolio. -
I guess I was not clear in my original post. I am creating a background for a timer that also runs on the checkbox.
I want the background to ease into full color when the timer is running (clock runs when the checkbox is ON), but to ease out of color before the next keyframe (clock stops with checkbox is OFF). With the current code and the code you provided, the easing out of color occurs after the clock is stopped.
So I like that the first ease happens after the first keyframe but would like the second ease (easing out of color) to happen before the clock stops (second keyframe).
I guess my question is, is there even a way to code it such that the easing out of color happens before the second keyframe. Would it be simpler to hand-edit such a task? I was hoping to make it more automatic.
-
Check if this works. I tested it with simple on, off,on,off keyframes and worked
fadeTime = 0.5;
cb = thisComp.layer("Controller").effect("Timer ON")("Checkbox");if (cb.numKeys > 0) {
n = cb.nearestKey(time).index;
t = cb.key(n).value == 1 ? time - cb.key(n).time : cb.key(n).time - time;
ease(t, 0, fadeTime, 0, 100);
} else cb.value > 0 ? 100 : 0;Andrei
My Envato portfolio. -
OMG.
This is exactly what I was looking for! Thank you so much. I spent a good week trying to figure it out myself!
Thank you so much again Andrei!
Reply to this Discussion! Login or Sign Up