1

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?

5 Answers 5

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.

0

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

https://aescripts.com/flow/

0

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. cubic-bezier curve to After Effects translation

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

0

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

https://misterhorse.com/animation-composer

-2

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.

3
  • This does not describe how its done. It relys on external link.
    – joojaa
    Aug 16, 2018 at 4:43
  • It does, you add it to the key frames and it shows an example of how it would look. Then there is a supplementary reading link to further understand how CSS knowledge can be used in After Effects Aug 17, 2018 at 7:07
  • @ovaraptor Yes but the OP is asking how to makthe timing function he as CSS into AE. Not AE to easy ease to CSS, and the answer does not provide how its done, just some more css, no info on how he would go about converting that css to AE animation. Now the link may or may not provide that answer but then this is a link only answer. Whicsh is not allowed you would need to explain atleast somewhat how it would be done.
    – joojaa
    Aug 17, 2018 at 9:02

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.