Edit Easing

Name

Also known as (comma separated)

Brief definition Rate-of-change curve of an animation.

Notes

Tier Core Useful Reference Deleted

Controls schema (JSON array) [ { "id": "curve", "type": "select", "label": "Curve", "default": "ease-in-out", "options": [ "linear", "ease-in", "ease-out", "ease-in-out" ] }, { "id": "duration", "type": "number", "label": "Duration (ms)", "default": 1400, "min": 400, "max": 3000, "step": 100 }, { "id": "loop", "type": "toggle", "label": "Loop", "default": true }, { "id": "accent", "type": "color", "label": "Colour", "default": "#D9C8F0", "presets": [ "#A8E6C1", "#F5C2E0", "#BFD9F2", "#D9C8F0", "#E8A020", "#241430" ] } ]

Templates (JSON object keyed by format) { "html": "<div class=\"mot-ease-stage\" data-curve=\"{{curve}}\">\n <svg class=\"mot-ease-svg\" viewBox=\"0 0 60 60\" width=\"60\" height=\"60\" aria-hidden=\"true\">\n <path class=\"mot-ease-axis\" d=\"M4,4 L4,56 L56,56\" fill=\"none\" stroke=\"#24143033\" stroke-width=\"1.5\"/>\n <path class=\"mot-ease-curve mot-ease-curve--linear\" d=\"M4,56 L56,4\" fill=\"none\" stroke=\"{{accent}}\" stroke-width=\"3\"/>\n <path class=\"mot-ease-curve mot-ease-curve--ease-in\" d=\"M4,56 C30,56 40,20 56,4\" fill=\"none\" stroke=\"{{accent}}\" stroke-width=\"3\"/>\n <path class=\"mot-ease-curve mot-ease-curve--ease-out\" d=\"M4,56 C4,20 30,4 56,4\" fill=\"none\" stroke=\"{{accent}}\" stroke-width=\"3\"/>\n <path class=\"mot-ease-curve mot-ease-curve--ease-in-out\" d=\"M4,56 C24,56 36,4 56,4\" fill=\"none\" stroke=\"{{accent}}\" stroke-width=\"3\"/>\n </svg>\n <div class=\"mot-ease-track\">\n <span class=\"mot-ease-dot{{#if loop}} mot-ease-dot--loop{{/if}}\" style=\"background:{{accent}};\"></span>\n </div>\n <p class=\"mot-ease-caption\">{{curve}}</p>\n</div>\n<style>\n.mot-ease-stage { width: 100%; max-width: 320px; padding: 16px; background: #FAF7F2; border: 1px solid #24143022; border-radius: 12px; font: 13px system-ui, sans-serif; color: #241430aa; }\n.mot-ease-curve { display: none; }\n[data-curve=\"linear\"] .mot-ease-curve--linear,\n[data-curve=\"ease-in\"] .mot-ease-curve--ease-in,\n[data-curve=\"ease-out\"] .mot-ease-curve--ease-out,\n[data-curve=\"ease-in-out\"] .mot-ease-curve--ease-in-out { display: block; }\n.mot-ease-track { position: relative; height: 24px; background: #24143014; border-radius: 999px; margin-top: 10px; }\n.mot-ease-dot { position: absolute; top: 1px; left: 1px; width: 22px; height: 22px; border-radius: 999px; }\n.mot-ease-caption { margin: 8px 0 0; text-transform: capitalize; }\n@media (prefers-reduced-motion: no-preference) {\n .mot-ease-dot { animation-duration: {{duration}}ms; animation-name: mot-ease-slide; }\n [data-curve=\"linear\"] .mot-ease-dot { animation-timing-function: linear; }\n [data-curve=\"ease-in\"] .mot-ease-dot { animation-timing-function: ease-in; }\n [data-curve=\"ease-out\"] .mot-ease-dot { animation-timing-function: ease-out; }\n [data-curve=\"ease-in-out\"] .mot-ease-dot { animation-timing-function: ease-in-out; }\n .mot-ease-dot--loop { animation-iteration-count: infinite; }\n @keyframes mot-ease-slide { 0%,100% { left: 1px; } 50% { left: calc(100% - 23px); } }\n}\n</style>", "tailwind": "<div class=\"w-full max-w-[320px] p-4 bg-[#FAF7F2] border border-[#24143022] rounded-xl font-sans text-sm text-[#241430]/70\" data-curve=\"{{curve}}\">\n <svg viewBox=\"0 0 60 60\" width=\"60\" height=\"60\" aria-hidden=\"true\">\n <path d=\"M4,4 L4,56 L56,56\" fill=\"none\" stroke=\"#24143033\" stroke-width=\"1.5\"/>\n <path class=\"tw-curve tw-curve--linear\" d=\"M4,56 L56,4\" fill=\"none\" stroke=\"{{accent}}\" stroke-width=\"3\"/>\n <path class=\"tw-curve tw-curve--ease-in\" d=\"M4,56 C30,56 40,20 56,4\" fill=\"none\" stroke=\"{{accent}}\" stroke-width=\"3\"/>\n <path class=\"tw-curve tw-curve--ease-out\" d=\"M4,56 C4,20 30,4 56,4\" fill=\"none\" stroke=\"{{accent}}\" stroke-width=\"3\"/>\n <path class=\"tw-curve tw-curve--ease-in-out\" d=\"M4,56 C24,56 36,4 56,4\" fill=\"none\" stroke=\"{{accent}}\" stroke-width=\"3\"/>\n </svg>\n <div class=\"relative h-6 bg-[#24143014] rounded-full mt-2.5\">\n <span class=\"absolute top-px left-px w-[22px] h-[22px] rounded-full{{#if loop}} tw-ease-loop{{/if}}\" style=\"background:{{accent}};\"></span>\n </div>\n <p class=\"mt-2 capitalize\">{{curve}}</p>\n</div>\n<style>\n.tw-curve { display: none; }\n[data-curve=\"linear\"] .tw-curve--linear,\n[data-curve=\"ease-in\"] .tw-curve--ease-in,\n[data-curve=\"ease-out\"] .tw-curve--ease-out,\n[data-curve=\"ease-in-out\"] .tw-curve--ease-in-out { display: block; }\n@media (prefers-reduced-motion: no-preference) {\n [data-curve=\"linear\"] span { animation-timing-function: linear; }\n [data-curve=\"ease-in\"] span { animation-timing-function: ease-in; }\n [data-curve=\"ease-out\"] span { animation-timing-function: ease-out; }\n [data-curve=\"ease-in-out\"] span { animation-timing-function: ease-in-out; }\n span { animation-name: mot-ease-tw-slide; animation-duration: {{duration}}ms; }\n .tw-ease-loop { animation-iteration-count: infinite; }\n @keyframes mot-ease-tw-slide { 0%,100% { left: 1px; } 50% { left: calc(100% - 23px); } }\n}\n</style>", "react": "export function Easing({\n curve = \"{{curve}}\",\n duration = {{duration}},\n loop = {{loop}},\n accent = \"{{accent}}\",\n}) {\n const paths = {\n linear: \"M4,56 L56,4\",\n \"ease-in\": \"M4,56 C30,56 40,20 56,4\",\n \"ease-out\": \"M4,56 C4,20 30,4 56,4\",\n \"ease-in-out\": \"M4,56 C24,56 36,4 56,4\",\n };\n return (\n <div data-curve={curve} style={{ width: \"100%\", maxWidth: 320, padding: 16, background: \"#FAF7F2\", border: \"1px solid #24143022\", borderRadius: 12, fontFamily: \"system-ui, sans-serif\", fontSize: 13, color: \"#241430aa\" }}>\n <svg viewBox=\"0 0 60 60\" width=\"60\" height=\"60\" aria-hidden=\"true\">\n <path d=\"M4,4 L4,56 L56,56\" fill=\"none\" stroke=\"#24143033\" strokeWidth=\"1.5\" />\n <path d={paths[curve]} fill=\"none\" stroke={accent} strokeWidth=\"3\" />\n </svg>\n <div style={{ position: \"relative\", height: 24, background: \"#24143014\", borderRadius: 999, marginTop: 10 }}>\n <span className={loop ? \"dot dot--loop\" : \"dot\"} style={{ position: \"absolute\", top: 1, left: 1, width: 22, height: 22, borderRadius: 999, background: accent }} />\n </div>\n <p style={{ margin: \"8px 0 0\", textTransform: \"capitalize\" }}>{curve}</p>\n <style>{`\n @media (prefers-reduced-motion: no-preference) {\n .dot { animation: mot-ease-slide ${duration}ms ${curve} 1; }\n .dot--loop { animation-iteration-count: infinite; }\n @keyframes mot-ease-slide { 0%,100% { left: 1px; } 50% { left: calc(100% - 23px); } }\n }\n `}</style>\n </div>\n );\n}" }