Ease Visualizer
cubic-bezier to GSAP
Paste a CSS cubic-bezier() and get the identical GSAP CustomEase. GSAP reads the same curve as an SVG path, so nothing is approximated.
Every ease at a glance
FAQ
- What does a GSAP ease actually control?
- An ease maps linear time to progress - the curve's shape decides whether motion starts fast and settles (out), builds up (in), or does both. This visualizer draws the curve and plays it on real UI, so you can feel how a curve lands before you commit to it.
- How do I convert a CSS cubic-bezier() to GSAP?
- Paste the cubic-bezier() into the converter on this page. GSAP reads the identical curve as an SVG path via CustomEase.create, so nothing is approximated.
- Can CSS reproduce bounce or elastic eases?
- Yes, with linear(). cubic-bezier() cannot express them, but the CSS linear() function approximates any curve from sampled points - the CSS twin on this page generates it for the selected ease.
- Are the Annnimate Drift and Punch eases free to use?
- Yes. Both are CustomEase curves shown with their exact create() strings - copy them into any GSAP project.
