Custom input (numbers) for Cubic-Bezier timing function

Feature Requests
1

Would love to be able to input values for the cubic-bezier timing function. I have a set of cubic-bezier curves that I use and want to match it exactly. I can only drag the handles to approximately where it should be right now.

3 Likes
2
1 Like
3

Just an FYI that this will be available soon (Spring 2018) as it’s currently in Beta testing.

4

Thanks guys. Great to know that its coming. Is there a list of what to look forward to in Hype 4?

5

The vid that Michael posted above should cover most of it :wink: other than that no definite list of exactly what will be in the new release.

6

Thanks for the request! You’d be able to reproduce this with the math timing functions if you also had a function that would solve the cubic bezier equation. I think it’d also be nice to provide a way to input values (like those going into the CSS Animation/Transitions).

1 Like
7

Just looked at the video and it seems a bit different than what I was talking about. I was looking for something more like this site. http://cubic-bezier.com/#.17,.67,.83,.67. Jonathan, is there a function to translate the cb equation?

8

There is within Hype, but it is not exposed as public API. As a feature request I’m not opposed to allowing entering the values as you’d like!

But if you wanted to work with the v4 math functions (say this doesn’t make the cut for v4), you’d need to bring over your own cubic bezier solver. There’s one here: https://github.com/arian/cubic-bezier

9

@jonathan any update on this? We are creating a design system, and have the animation values already spec’d out. I want to come up with some presets for the team to use. I am looking to manually input the values instead of dragging them.

Example: Animation Timing 1 – cubic-bezier(0.175, 0.885, 0.32, 1.275)

10

The ability to manually enter cubic bezier values will not be a part Hype v4.0.0, however it does have a new Math Timing Function where you can enter javascript code that gets supplied a time, start, and duration. Theoretically you could add code to solve the cubic bezier function with those values within this new timing function type.