Tokens

Motion tokens

The 64 motion tokens with their values in the current look.

Filter tokens

64 of 64 tokens

Motion tokens
Token	Value in this look	Varies by	In code	Description
`--mk-ease-pop`ease.pop	`cubic-bezier(0.34, 1.56, 0.64, 1)`	volume	Tailwind `ease-pop` TS `EASES["pop"]` Swift `MakrTokens.Eases.pop`	The pop curve.
`--mk-ease-out`ease.out	`cubic-bezier(0.16, 1, 0.3, 1)`	volume	Tailwind `ease-out` TS `EASES["out"]` Swift `MakrTokens.Eases.out`	The out curve.
`--mk-ease-in-out`ease.in.out	`cubic-bezier(0.7, 0, 0.2, 1)`	volume	Tailwind `ease-in-out` TS `EASES["in-out"]` Swift `MakrTokens.Eases.inOut`	The in out curve.
`--mk-ease-stamp`ease.stamp	`cubic-bezier(0.2, 0.8, 0.2, 1)`	volume	Tailwind `ease-stamp` TS `EASES["stamp"]` Swift `MakrTokens.Eases.stamp`	The stamp curve.
`--mk-ease-drop`ease.drop	`cubic-bezier(0.2, 0.9, 0.3, 1.1)`	volume	Tailwind `ease-drop` TS `EASES["drop"]` Swift `MakrTokens.Eases.drop`	The drop curve.
`--mk-ease-land`ease.land	`cubic-bezier(0.2, 0.9, 0.3, 1.2)`	volume	Tailwind `ease-land` TS `EASES["land"]` Swift `MakrTokens.Eases.land`	The land curve.
`--mk-ease-title`ease.title	`cubic-bezier(0.2, 0.8, 0.3, 1)`	volume	Tailwind `ease-title` TS `EASES["title"]` Swift `MakrTokens.Eases.title`	The title curve.
`--mk-ease-squeegee`ease.squeegee	`cubic-bezier(0.45, 0, 0.35, 1)`	volume	Tailwind `ease-squeegee` TS `EASES["squeegee"]` Swift `MakrTokens.Eases.squeegee`	The squeegee curve.
`--mk-ease-fold`ease.fold	`cubic-bezier(0.6, 0, 0.3, 1)`	volume	Tailwind `ease-fold` TS `EASES["fold"]` Swift `MakrTokens.Eases.fold`	The fold curve.
`--mk-ease-fly`ease.fly	`cubic-bezier(0.5, 0, 0.3, 1)`	volume	Tailwind `ease-fly` TS `EASES["fly"]` Swift `MakrTokens.Eases.fly`	The fly curve.
`--mk-ease-split`ease.split	`cubic-bezier(0.55, 0, 0.8, 0.2)`	volume	Tailwind `ease-split` TS `EASES["split"]` Swift `MakrTokens.Eases.split`	The split curve.
`--mk-ease-snap`ease.snap	`cubic-bezier(0.3, 0, 0.3, 1.6)`	volume	Tailwind `ease-snap` TS `EASES["snap"]` Swift `MakrTokens.Eases.snap`	The snap curve.
`--mk-ease-register`ease.register	`cubic-bezier(0.5, 0, 0.2, 1)`	volume	Tailwind `ease-register` TS `EASES["register"]` Swift `MakrTokens.Eases.register`	The register curve.
`--mk-ease-slap`ease.slap	`cubic-bezier(0.2, 0.8, 0.3, 1.3)`	volume	Tailwind `ease-slap` TS `EASES["slap"]` Swift `MakrTokens.Eases.slap`	The slap curve.
`--mk-ease-squash`ease.squash	`cubic-bezier(0.5, 0, 0.6, 1)`	volume	Tailwind `ease-squash` TS `EASES["squash"]` Swift `MakrTokens.Eases.squash`	The squash curve.
`--mk-ease-wipe`ease.wipe	`cubic-bezier(0.25, 0.1, 0.2, 1)`	volume	Tailwind `ease-wipe` TS `EASES["wipe"]` Swift `MakrTokens.Eases.wipe`	The wipe curve.
`--mk-ease-wipe-hold`ease.wipe.hold	`cubic-bezier(0.75, 0, 0.25, 1)`	volume	Tailwind `ease-wipe-hold` TS `EASES["wipe-hold"]` Swift `MakrTokens.Eases.wipeHold`	The wipe hold curve.
`--mk-ease-wipe-exit`ease.wipe.exit	`cubic-bezier(0.6, 0, 0.35, 1)`	volume	Tailwind `ease-wipe-exit` TS `EASES["wipe-exit"]` Swift `MakrTokens.Eases.wipeExit`	The wipe exit curve.
`--mk-ease-hop`ease.hop	`cubic-bezier(0.25, 1, 0.5, 1)`	volume	Tailwind `ease-hop` TS `EASES["hop"]` Swift `MakrTokens.Eases.hop`	The hop curve.
`--mk-ease-fall`ease.fall	`cubic-bezier(0.3, 0.7, 0.3, 1)`	volume	Tailwind `ease-fall` TS `EASES["fall"]` Swift `MakrTokens.Eases.fall`	The fall curve.
`--mk-dur-hover`dur.hover	`200 ms at Studio (200 / 200 / 200 / 200 from Quiet to Rave)`	volume	Tailwind none TS `dur("hover", volume)` Swift `MakrTokens.Durations.hover`	How long the hover motion takes, by volume.
`--mk-dur-press`dur.press	`220 ms at Studio (220 / 220 / 220 / 220 from Quiet to Rave)`	volume	Tailwind none TS `dur("press", volume)` Swift `MakrTokens.Durations.press`	How long the press motion takes, by volume.
`--mk-dur-key-sink`dur.key.sink	`120 ms at Studio (120 / 120 / 120 / 120 from Quiet to Rave)`	volume	Tailwind none TS `dur("key-sink", volume)` Swift `MakrTokens.Durations.keySink`	How long the key sink motion takes, by volume.
`--mk-dur-menu`dur.menu	`140 ms at Studio (140 / 140 / 140 / 140 from Quiet to Rave)`	volume	Tailwind none TS `dur("menu", volume)` Swift `MakrTokens.Durations.menu`	How long the menu motion takes, by volume.
`--mk-dur-overlay-in`dur.overlay.in	`240 ms at Studio (240 / 240 / 240 / 240 from Quiet to Rave)`	volume	Tailwind none TS `dur("overlay-in", volume)` Swift `MakrTokens.Durations.overlayIn`	How long the overlay in motion takes, by volume.
`--mk-dur-overlay-out`dur.overlay.out	`160 ms at Studio (160 / 160 / 160 / 160 from Quiet to Rave)`	volume	Tailwind none TS `dur("overlay-out", volume)` Swift `MakrTokens.Durations.overlayOut`	How long the overlay out motion takes, by volume.
`--mk-dur-drawer-in`dur.drawer.in	`280 ms at Studio (280 / 280 / 280 / 280 from Quiet to Rave)`	volume	Tailwind none TS `dur("drawer-in", volume)` Swift `MakrTokens.Durations.drawerIn`	How long the drawer in motion takes, by volume.
`--mk-dur-drawer-out`dur.drawer.out	`200 ms at Studio (200 / 200 / 200 / 200 from Quiet to Rave)`	volume	Tailwind none TS `dur("drawer-out", volume)` Swift `MakrTokens.Durations.drawerOut`	How long the drawer out motion takes, by volume.
`--mk-dur-disclosure`dur.disclosure	`180 ms at Studio (180 / 180 / 180 / 180 from Quiet to Rave)`	volume	Tailwind none TS `dur("disclosure", volume)` Swift `MakrTokens.Durations.disclosure`	How long the disclosure motion takes, by volume.
`--mk-dur-gauge`dur.gauge	`900 ms at Studio (900 / 900 / 900 / 900 from Quiet to Rave)`	volume	Tailwind none TS `dur("gauge", volume)` Swift `MakrTokens.Durations.gauge`	How long the gauge motion takes, by volume.
`--mk-dur-toast-in`dur.toast.in	`380 ms at Studio (380 / 380 / 380 / 380 from Quiet to Rave)`	volume	Tailwind none TS `dur("toast-in", volume)` Swift `MakrTokens.Durations.toastIn`	How long the toast in motion takes, by volume.
`--mk-dur-toast-out`dur.toast.out	`260 ms at Studio (260 / 260 / 260 / 260 from Quiet to Rave)`	volume	Tailwind none TS `dur("toast-out", volume)` Swift `MakrTokens.Durations.toastOut`	How long the toast out motion takes, by volume.
`--mk-dur-toast-life`dur.toast.life	`5200 ms at Studio (5200 / 5200 / 5200 / 5200 from Quiet to Rave)`	volume	Tailwind none TS `dur("toast-life", volume)` Swift `MakrTokens.Durations.toastLife`	How long the toast life motion takes, by volume.
`--mk-dur-sticker-pop`dur.sticker.pop	`480 ms at Studio (0 / 480 / 480 / 480 from Quiet to Rave)`	volume	Tailwind none TS `dur("sticker-pop", volume)` Swift `MakrTokens.Durations.stickerPop`	How long the sticker pop motion takes, by volume.
`--mk-dur-sticker-pop-delay`dur.sticker.pop.delay	`200 ms at Studio (0 / 200 / 200 / 200 from Quiet to Rave)`	volume	Tailwind none TS `dur("sticker-pop-delay", volume)` Swift `MakrTokens.Durations.stickerPopDelay`	How long the sticker pop delay motion takes, by volume.
`--mk-dur-peel`dur.peel	`300 ms at Studio (240 / 300 / 300 / 300 from Quiet to Rave)`	volume	Tailwind none TS `dur("peel", volume)` Swift `MakrTokens.Durations.peel`	How long the peel motion takes, by volume.
`--mk-dur-stamp`dur.stamp	`460 ms at Studio (0 / 460 / 460 / 460 from Quiet to Rave)`	volume	Tailwind none TS `dur("stamp", volume)` Swift `MakrTokens.Durations.stamp`	How long the stamp motion takes, by volume.
`--mk-dur-thump`dur.thump	`220 ms at Studio (0 / 220 / 220 / 220 from Quiet to Rave)`	volume	Tailwind none TS `dur("thump", volume)` Swift `MakrTokens.Durations.thump`	How long the thump motion takes, by volume.
`--mk-dur-specks`dur.specks	`640 ms at Studio (0 / 640 / 640 / 640 from Quiet to Rave)`	volume	Tailwind none TS `dur("specks", volume)` Swift `MakrTokens.Durations.specks`	How long the specks motion takes, by volume.
`--mk-dur-seal-delay`dur.seal.delay	`1200 ms at Studio (1200 / 1200 / 1200 / 1200 from Quiet to Rave)`	volume	Tailwind none TS `dur("seal-delay", volume)` Swift `MakrTokens.Durations.sealDelay`	How long the seal delay motion takes, by volume.
`--mk-dur-seal`dur.seal	`300 ms at Studio (240 / 300 / 300 / 300 from Quiet to Rave)`	volume	Tailwind none TS `dur("seal", volume)` Swift `MakrTokens.Durations.seal`	How long the seal motion takes, by volume.
`--mk-dur-register`dur.register	`520 ms at Studio (0 / 520 / 520 / 520 from Quiet to Rave)`	volume	Tailwind none TS `dur("register", volume)` Swift `MakrTokens.Durations.register`	How long the register motion takes, by volume.
`--mk-dur-sfx-pop`dur.sfx.pop	`700 ms at Studio (0 / 700 / 700 / 700 from Quiet to Rave)`	volume	Tailwind none TS `dur("sfx-pop", volume)` Swift `MakrTokens.Durations.sfxPop`	How long the sfx pop motion takes, by volume.
`--mk-dur-sfx-hold`dur.sfx.hold	`600 ms at Studio (600 / 600 / 600 / 600 from Quiet to Rave)`	volume	Tailwind none TS `dur("sfx-hold", volume)` Swift `MakrTokens.Durations.sfxHold`	How long the sfx hold motion takes, by volume.
`--mk-dur-sfx-out`dur.sfx.out	`300 ms at Studio (0 / 300 / 300 / 300 from Quiet to Rave)`	volume	Tailwind none TS `dur("sfx-out", volume)` Swift `MakrTokens.Durations.sfxOut`	How long the sfx out motion takes, by volume.
`--mk-dur-panel`dur.panel	`300 ms at Studio (0 / 300 / 360 / 420 from Quiet to Rave)`	volume	Tailwind none TS `dur("panel", volume)` Swift `MakrTokens.Durations.panel`	How long the panel motion takes, by volume.
`--mk-dur-panel-stagger`dur.panel.stagger	`40 ms at Studio (0 / 40 / 48 / 55 from Quiet to Rave)`	volume	Tailwind none TS `dur("panel-stagger", volume)` Swift `MakrTokens.Durations.panelStagger`	How long the panel stagger motion takes, by volume.
`--mk-dur-arrival`dur.arrival	`360 ms at Studio (160 / 360 / 440 / 520 from Quiet to Rave)`	volume	Tailwind none TS `dur("arrival", volume)` Swift `MakrTokens.Durations.arrival`	How long the arrival motion takes, by volume.
`--mk-dur-block-hop`dur.block.hop	`620 ms at Studio (0 / 620 / 620 / 620 from Quiet to Rave)`	volume	Tailwind none TS `dur("block-hop", volume)` Swift `MakrTokens.Durations.blockHop`	How long the block hop motion takes, by volume.
`--mk-dur-block-drop`dur.block.drop	`700 ms at Studio (0 / 700 / 700 / 700 from Quiet to Rave)`	volume	Tailwind none TS `dur("block-drop", volume)` Swift `MakrTokens.Durations.blockDrop`	How long the block drop motion takes, by volume.
`--mk-dur-block-drop-stagger`dur.block.drop.stagger	`90 ms at Studio (0 / 90 / 90 / 90 from Quiet to Rave)`	volume	Tailwind none TS `dur("block-drop-stagger", volume)` Swift `MakrTokens.Durations.blockDropStagger`	How long the block drop stagger motion takes, by volume.
`--mk-dur-wipe`dur.wipe	`0 ms at Studio (0 / 0 / 410 / 480 from Quiet to Rave)`	volume	Tailwind none TS `dur("wipe", volume)` Swift `MakrTokens.Durations.wipe`	How long the wipe motion takes, by volume.
`--mk-dur-press-run`dur.press.run	`800 ms at Studio (0 / 800 / 800 / 800 from Quiet to Rave)`	volume	Tailwind none TS `dur("press-run", volume)` Swift `MakrTokens.Durations.pressRun`	How long the press run motion takes, by volume.
`--mk-dur-reink`dur.reink	`700 ms at Studio (400 / 700 / 700 / 700 from Quiet to Rave)`	volume	Tailwind none TS `dur("reink", volume)` Swift `MakrTokens.Durations.reink`	How long the reink motion takes, by volume.
`--mk-dur-theme`dur.theme	`400 ms at Studio (400 / 400 / 400 / 400 from Quiet to Rave)`	volume	Tailwind none TS `dur("theme", volume)` Swift `MakrTokens.Durations.theme`	How long the theme motion takes, by volume.
`--mk-dur-gl-fade`dur.gl.fade	`400 ms at Studio (400 / 400 / 400 / 400 from Quiet to Rave)`	volume	Tailwind none TS `dur("gl-fade", volume)` Swift `MakrTokens.Durations.glFade`	How long the gl fade motion takes, by volume.
`--mk-dur-field-wake`dur.field.wake	`400 ms at Studio (0 / 400 / 400 / 400 from Quiet to Rave)`	volume	Tailwind none TS `dur("field-wake", volume)` Swift `MakrTokens.Durations.fieldWake`	How long the field wake motion takes, by volume.
`--mk-dur-field-run`dur.field.run	`4000 ms at Studio (0 / 4000 / 4000 / 4000 from Quiet to Rave)`	volume	Tailwind none TS `dur("field-run", volume)` Swift `MakrTokens.Durations.fieldRun`	How long the field run motion takes, by volume.
`--mk-dur-field-ease`dur.field.ease	`1000 ms at Studio (0 / 1000 / 1000 / 1000 from Quiet to Rave)`	volume	Tailwind none TS `dur("field-ease", volume)` Swift `MakrTokens.Durations.fieldEase`	How long the field ease motion takes, by volume.
`--mk-dur-field-pulse`dur.field.pulse	`900 ms at Studio (0 / 900 / 900 / 900 from Quiet to Rave)`	volume	Tailwind none TS `dur("field-pulse", volume)` Swift `MakrTokens.Durations.fieldPulse`	How long the field pulse motion takes, by volume.
`--mk-dur-topple-step`dur.topple.step	`120 ms at Studio (0 / 120 / 120 / 120 from Quiet to Rave)`	volume	Tailwind none TS `dur("topple-step", volume)` Swift `MakrTokens.Durations.toppleStep`	How long the topple step motion takes, by volume.
`--mk-dur-topple-fall`dur.topple.fall	`420 ms at Studio (0 / 420 / 420 / 420 from Quiet to Rave)`	volume	Tailwind none TS `dur("topple-fall", volume)` Swift `MakrTokens.Durations.toppleFall`	How long the topple fall motion takes, by volume.
`--mk-dur-loader-cycle`dur.loader.cycle	`1200 ms at Studio (1200 / 1200 / 1200 / 1200 from Quiet to Rave)`	volume	Tailwind none TS `dur("loader-cycle", volume)` Swift `MakrTokens.Durations.loaderCycle`	How long the loader cycle motion takes, by volume.
`--mk-dur-reduced`dur.reduced	`140 ms at Studio (140 / 140 / 140 / 140 from Quiet to Rave)`	volume	Tailwind none TS `dur("reduced", volume)` Swift `MakrTokens.Durations.reduced`	How long the reduced motion takes, by volume.