Easing Graph

An editor for CSS animations using an Graph and some buttons/sliders.

Features

• Graph - Vidualize easing curves with an interactive Graph
• Preview - An animated Ball matching to the Graph/Curve
• Adjustable Duration - The Animation is controlable from 500ms to 3000ms
• Code export - For every Easing, there is according CSS Code

How to Use

Open the GitHub Page

or

1. Clone the Project
2. Open index.html in your browser

Animations

List of all animations/transitions

Linear

Sine
Ease in Sine
Ease Out Sine
Ease In Out Sine

Quad
Ease In Quad
Ease Out Quad
Ease In Out Quad

Cubic
Ease In Cubic
Ease Out Cubic
Ease In Out Cubic

Back
Ease in Back
Ease Out Back
Ease In Out Back

Bounce
Ease Out Bounce

Code

project is made with HTML, CSS and JavaScript

---

Note from me

I hope you like this project. For me this is a fun way to learn cureves and cube-bezier in CSS :)

Created with ❤️