Use CSS cubic-bezier for keyframes in After Effects?

Question

I'm really new to After Effects, and I am used to creating CSS animations. I want to animate something in After Effects, and I know how to set the animation except for the timing function.

I've used the "Easy Ease" to create an okay looking transition, but I would like to use this timing function (from CSS):

cubic-bezier(0.65, 0, 0.35, 1)

Is it possible to take this Cubic Bezier and input it into After Effects keyframes?

Answer 1

Sort of. The animation model is a bit different so this means you have several ways to attack the problem. Generally it's not a good idea to think, "Hey, I know CSS. I'll approach it the same way." This makes you extremely inefficient in the long run.

The first approach is to just use the graph editor, set the mode to value handles, then drag your handles. Only this does not really work well for positional animation (except for cases where you move orthogonally) as you would need to adjust 3 handles and ensuring you do it same way in different scales does not work out too well. Secondly you can not go beyond your keyframed values like CSS allows you.

The second option is to precompose your animation and key the time warp effects source frame. Again you cant go beyond values.

The third option is to write your own interpolator.

Answer 2

There is a plugin called FLOW in AE scripts, you can copy your cubic-bezier and put it there.

https://aescripts.com/flow/

Answer 3

I took some time to learn about cubic-bezier curves and how to read them because I noticed that a lot of brand design systems include cubic-bezier curve values and After Effects velocity values in their motion design specs section. I really wanted to understand the relationship between the two and learn how to translate the cubic-bezier values to AE values. Here is what I learned so far.

The x1 and x2 (Horizontal) coordinates translate to the After Effects velocity influence values. The y1 and y2 (vertical) coordinates translate to the pixels/second (speed) values. It's easy to notice the velocity values pattern once you understand how to translate it.

So for your example cubic-bezier(0.65, 0, 0.35, 1) translates to:

• x1: 0.65 = Outgoing Velocity 65% influence value
• x2: 0.35 = Incoming Velocity 65% influence value

Now I do not quite understand how the "pixels/second" parameter works so I will leave that for someone else to dive in and explain as I need some help understanding it as well. But essentially the X axis reads from left to right starting at 0 and ending at 1, outgoing handles drag from the left and incoming handles drag from the right. I hope this helps

Answer 4

Use Animation Composer 3 for after effect It has all the curves presets in it:

https://misterhorse.com/animation-composer

Answer 5

Yes you can, it will take a bit more work by adding it to the keyframes but it would look something like this:

@keyframes ae-to-css {
  0% {
    animation-timing-function:ease-out;
  }
  23% {
    animation-timing-function:ease-in;
  }
  50% {
    animation-timing-function:cubic-bezier(.5,0,.5,1.5);
  }
  76% {
    animation-timing-function:cubic-bezier(0,0,0,1);
  }
  100% {
  }
} 

Here's a good article to read about making the transition from CSS to AfterEffects.