About Easing Function Generator

Generate easing functions in C#, GLSL, JS with visual curve preview. Part of the DevTools Surf developer suite. Browse more tools in the Game Dev collection.

Use Cases

• Game developers implementing smooth camera and UI transitions
• Animation programmers choosing easing curves for character movement
• Frontend developers generating easing functions for web animations
• Technical artists tuning interpolation curves for visual effects

Tips

• Preview the curve shape before copying the easing function
• Choose ease-out for UI elements entering the screen naturally
• Export to your target language — C#, GLSL, or JavaScript

Fun Facts

• Robert Penner published his famous easing equations in 2001 in his book 'Programming Macromedia Flash MX' — these 30+ functions remain the foundation of animation easing across all platforms.
• The word 'tween' comes from 'in-betweening,' a term from traditional animation where junior artists drew the frames between key poses — Disney formalized this workflow in the 1930s.
• Easing functions are mathematically just polynomial curves — ease-in-cubic is simply t^3, while ease-in-out-cubic splices two cubic curves together at the midpoint.

FAQ

Which languages does it output?

JavaScript (CSS bezier + JS function), C# (Unity-compatible), HLSL/GLSL (shader code). Plus a visual curve preview.

What's the difference from CSS cubic-bezier?

Same concept — 4-control-point curves. Gaming adds elastic, bounce, and back easings that CSS doesn't support natively.

Can I make custom easings?

Yes — drag control points or enter values directly. Preview shows the curve and the animation runs visibly.

Is it Penner's easing?

Yes — Robert Penner's equations are the standard, implemented in most game libraries. The tool shows Penner form alongside cubic-bezier where both exist.