0

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?

0

Sort of. The animation model is a bit different so this means you have several ways to attack the problem. Generally ist not a good idea to think hey ii know css ill approach it the same way thsi makes you extremely inefficient in the long run

First 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 other 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

-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.

  • This does not describe how its done. It relys on external link. – joojaa Aug 16 '18 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 – Ovaryraptor Aug 17 '18 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 '18 at 9:02

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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