CSS Easing Wizard

CSS Easing Wizard

🧙 Create and customize CSS easing functions with ease.

5 followers

The ultimate CSS easing editor with support for bézier, spring, bounce, wiggle, and overshoot curves! Easing Wizard has a large collection of presets, 10 preview modes, CSS and Tailwind CSS code generation, uses the new 'linear()' timing function and more!
CSS Easing Wizard gallery image
CSS Easing Wizard gallery image
CSS Easing Wizard gallery image
CSS Easing Wizard gallery image
CSS Easing Wizard gallery image
CSS Easing Wizard gallery image
CSS Easing Wizard gallery image
Free
Launch tags:Developer Tools
Launch Team / Built With
Wispr Flow: Dictation That Works Everywhere
Wispr Flow: Dictation That Works Everywhere
Stop typing. Start speaking. 4x faster.
Promoted

What do you think? …

Matthias Martin
Hey Product Hunt! 👋 I’m thrilled to introduce Easing Wizard — a powerful CSS easing editor that brings your animations to life with support for bézier, spring, bounce, wiggle, and overshoot effects! 🚀 🔗 https://easingwizard.com What is Easing Wizard? Easing Wizard is a tool designed to simplify the process of creating smooth and engaging CSS animations. Whether you’re a seasoned developer or just starting out, Easing Wizard helps you craft the perfect motion for your web projects. Key Features: ⚡ Uses linear timing function instead of keyframes: With the 'linear()' feature (introduced 2023 in all major browser) you can use all curves for CSS transitions. 🎢 Multiple curve types: Choose from bézier, spring, bounce, wiggle, and overshoot to create unique easing effects. ⏸️ Pause between animation previews: In the infinite play mode, the preview will pause between each loop, this way it is easier to desired motion. 📚 Extensive collection of presets: Jumpstart your animation with a rich library of preset easing functions. 📊 Linear comparison: Compare your custom easing with linear timing to see the difference. 🎥 Ten preview modes: Visualize your animations in various ways like move, size, scale, rotate or opacity. 📝 CSS and Tailwind CSS code generation: Export ready-to-use code snippets to integrate directly into your projects. 🎯 Multiple accuracy levels: Adjust the precision of 'linear()' easing functions to suit your needs. ➕ Optional extra space for bezier curves: Get more control over your bezier adjustments with additional workspace. Why I Built Easing Wizard? As a developer, I often found creating custom easing functions to be a tedious and time-consuming process. I wanted a tool that made it easy and even fun to craft perfect animations without the hassle. That’s why I created Easing Wizard — to help others bring their web animations to the next level with ease. 🎥 Check out the demo video and the website! I’d love to hear your thoughts, feedback, or any feature suggestions you might have. P.S. Can you find the hidden easter egg?
Daniel Stewart
Does the tool work offline, or is it fully browser-based?