Easing Functions Visualizer

Click any card to copy the CSS cubic-bezier() value or TypeScript function code to your clipboard. Hover to preview the animation.

easeInSine

easeOutSine

easeInOutSine

easeInQuad

easeOutQuad

easeInOutQuad

easeInCubic

easeOutCubic

easeInOutCubic

easeInQuart

easeOutQuart

easeInOutQuart

easeInQuint

easeOutQuint

easeInOutQuint

easeInExpo

easeOutExpo

easeInOutExpo

easeInCirc

easeOutCirc

easeInOutCirc

easeInBack

easeOutBack

easeInOutBack

easeInElastic

easeOutElastic

easeInOutElastic

easeInBounce

easeOutBounce

easeInOutBounce

About & FAQ

About: Visualize and compare 30 easing functions — interactive curves, hover animation, one-click copy of CSS cubic-bezier() or TypeScript code. All processing happens locally in your browser using native JavaScript — no data is uploaded to any server. Works fully offline as a Progressive Web App (PWA).

Frequently Asked Questions

What easing functions are included?

This tool visualises 30 standard easing functions across 10 categories: Sine, Quad, Cubic, Quart, Quint, Expo, Circ, Back, Elastic, and Bounce. Each category has three variants: easeIn (slow start), easeOut (slow end), and easeInOut (slow start and end).

Can I copy the CSS cubic-bezier() value?

Yes. Click any card to copy the CSS cubic-bezier() value to your clipboard. For Elastic and Bounce functions — which cannot be represented as cubic-bezier — the TypeScript function code is copied instead.

Does this tool work offline?

2Kit is a Progressive Web App (PWA). After your first visit it is cached and works fully offline.

Is any data sent to a server?

No. All curve rendering and animation runs entirely in your browser using the HTML Canvas API. Nothing is uploaded or transmitted.

Technical Implementation

All processing runs entirely in your browser — no data is ever sent to any server. This tool works fully offline as a Progressive Web App (PWA): after the first visit, all pages and assets are cached by a Service Worker and remain available without an internet connection. Your input data never leaves your device, making it safe for sensitive content including API keys, passwords, private configuration, and confidential documents.

▸ Site Index

English json-formatter html-formatter css-formatter base64 url-codec password-gen hash-generator text-diff text-transform color-converter easing-functions

Deutsch json-formatter html-formatter css-formatter base64 url-codec password-gen hash-generator text-diff text-transform color-converter easing-functions

Español json-formatter html-formatter css-formatter base64 url-codec password-gen hash-generator text-diff text-transform color-converter easing-functions

Français json-formatter html-formatter css-formatter base64 url-codec password-gen hash-generator text-diff text-transform color-converter easing-functions

Indonesia json-formatter html-formatter css-formatter base64 url-codec password-gen hash-generator text-diff text-transform color-converter easing-functions

Italiano json-formatter html-formatter css-formatter base64 url-codec password-gen hash-generator text-diff text-transform color-converter easing-functions

日本語 json-formatter html-formatter css-formatter base64 url-codec password-gen hash-generator text-diff text-transform color-converter easing-functions

한국어 json-formatter html-formatter css-formatter base64 url-codec password-gen hash-generator text-diff text-transform color-converter easing-functions

Nederlands json-formatter html-formatter css-formatter base64 url-codec password-gen hash-generator text-diff text-transform color-converter easing-functions

Polski json-formatter html-formatter css-formatter base64 url-codec password-gen hash-generator text-diff text-transform color-converter easing-functions

Português json-formatter html-formatter css-formatter base64 url-codec password-gen hash-generator text-diff text-transform color-converter easing-functions

Русский json-formatter html-formatter css-formatter base64 url-codec password-gen hash-generator text-diff text-transform color-converter easing-functions

Türkçe json-formatter html-formatter css-formatter base64 url-codec password-gen hash-generator text-diff text-transform color-converter easing-functions

Tiếng Việt json-formatter html-formatter css-formatter base64 url-codec password-gen hash-generator text-diff text-transform color-converter easing-functions

中文 json-formatter html-formatter css-formatter base64 url-codec password-gen hash-generator text-diff text-transform color-converter easing-functions