MacOS

Cubic Bezier

Animation timing curves.

Generate animation timing curves for CSS and Swift. Export your code ready transition-timing-function as an animation timing function.

Stacks Image 216

Export for CSS

Export the CSS timing function.

The result is copied to your pasteboard. 

transition-timing-function: cubic-bezier(0.62, -0.44, 0.48, 1.3);

Example usage in your CSS. 

.demo1 {
  width: 200px;
  height: 100px;
  background: #6AC4DC;
  transition: width 1s;
  transition-timing-function: cubic-bezier(0.62, -0.44, 0.48, 1.3);
}

CSS Example

Try the example timing export below.

A simple example using the exported custom CSS timing function. 

.demo1:hover {
  width:500px;
}
Hover to test

Export for Swift

Export the Swift timing function.

The result is copied to your pasteboard. 

Animation.timingCurve(0.42, 0.00, 1.5, 1.51, duration: 2.0)

Example usage in your SwiftUI. 

.onTapGesture {
 animationPosition = 0 // @State variable
  withAnimation(Animation.timingCurve(0.42, 0.00, 1.5, 1.51, duration: 2.0)){
      animationPosition = 360
  }
}

Simplicity by Design.

© Doobox Software

Cubic Bezier App