<p>I used After Effects recently to design easing for objects in an interactive graphic I'll be programming. For example, I animated a square's position and mask using the standard eases in the graph editor. Below shows the mask's speed graph which I'm interested in reproducing.</p>

<p><a href="https://i.sstatic.net/fpFrx.gif" rel="nofollow noreferrer"><img src="https://i.sstatic.net/fpFrx.gif" alt="enter image description here"></a></p>

<p>I'm fairly confident that eases on value graphs are standard <a href="http://cubic-bezier.com/" rel="nofollow noreferrer">cubic Bezier curves</a>, so position is a piece of cake. However, speed graphs behave differently: pushing both keyframes to zero makes a <a href="https://i.sstatic.net/84VTM.png" rel="nofollow noreferrer"><em>bell-shaped speed curve</em></a>, not zero. It needs to do this preserve the total amount of change (the integral), which means that it is not a cubic Bezier curve, not directly anyways.</p>

<p>Does anyone know how speed curves work mathematically?</p>

CC BY-SA 3.0
2018-01-15T22:09:18.867Z
It dawned on me that it's probably the derivative of a position cubic Bezier, and with some testing it looks like the influence translates to the horizontal influence in position, and the speed at each keyframes corresponds to the slope of the position influence handle.
concat
CC BY-SA 3.0
2018-01-17T12:45:34.363Z
You can see a numeric representation of the influence and speed by selecting a keyframe using the keyboard shortcut shift-cmd/ctrl-k. The handles are indeed cubic Béziers, so the derivative should give you the speed. You can access the speed of a property with expressions, so you could actually animate something to follow the speed of that property.
stib
<after-effects><motion-graphics>
Reproducing speed graph curve outside of After Effects
concat
# Reproducing speed graph curve outside of After Effects

(Asked by: username_0 on 2018-01-15)

I used After Effects recently to design easing for objects in an interactive graphic I'll be programming. For example, I animated a square's position and mask using the standard eases in the graph editor. Below shows the mask's speed graph which I'm interested in reproducing.

[![enter image description here](https://i.sstatic.net/fpFrx.gif)](https://i.sstatic.net/fpFrx.gif)

I'm fairly confident that eases on value graphs are standard [cubic Bezier curves](http://cubic-bezier.com/), so position is a piece of cake. However, speed graphs behave differently: pushing both keyframes to zero makes a [*bell-shaped speed curve*](https://i.sstatic.net/84VTM.png), not zero. It needs to do this preserve the total amount of change (the integral), which means that it is not a cubic Bezier curve, not directly anyways.

Does anyone know how speed curves work mathematically?

**Tags:** after-effects, motion-graphics

> **Comments:**
> **username_0**: It dawned on me that it's probably the derivative of a position cubic Bezier, and with some testing it looks like the influence translates to the horizontal influence in position, and the speed at each keyframes corresponds to the slope of the position influence handle.  
> **username_1**: You can see a numeric representation of the influence and speed by selecting a keyframe using the keyboard shortcut shift-cmd/ctrl-k. The handles are indeed cubic Béziers, so the derivative should give you the speed. You can access the speed of a property with expressions, so you could actually animate something to follow the speed of that property.  

---

## 0 answers

