Creative Communities of the World Forums

The peer to peer support community for media production professionals.

Forums Adobe After Effects Expressions Checkbox Controlled Opacity Easing… But With Easing Before The Other Keyframe?

  • Checkbox Controlled Opacity Easing… But With Easing Before The Other Keyframe?

  • Josh Aceret

    March 21, 2020 at 9:44 am

    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

  • Andrei Popa

    March 22, 2020 at 8:08 am

    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.

  • Josh Aceret

    March 22, 2020 at 9:39 am

    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.

  • Andrei Popa

    March 22, 2020 at 12:02 pm

    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.

  • Josh Aceret

    March 22, 2020 at 6:42 pm

    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!

Viewing 1 - 5 of 5 posts

Log in to reply.

We use anonymous cookies to give you the best experience we can.
Our Privacy policy | GDPR Policy