msb-public
/
svelte
mirror of https://github.com/sveltejs/svelte
1
0
Code Issues Projects Releases Wiki Activity
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
Branches Tags
${ item.name }
Create tag ${ searchTerm }
Create branch ${ searchTerm }
from 'eca1b7fd06'
${ noResults }
svelte/documentation/docs/03-runtime/06-svelte-easing.md

32 lines
1.3 KiB
Raw Normal View History Unescape

feat(site-2): Split docs (#8435) * Update links * Move blog to site/content * Update site/content/docs/02-component-format.md * Fix docs links * Add global prettierrc * Auto format * Fix git merge artifact * Fix errors * Update html to svelte(remaining ones) * Add 2 blog posts * Modify prettierrc * Minor design fix * Switch package lock to spaces, prettier ignore * Regenerate package lock * prettier format * Push * Remove console.logs * Minor fixes * Fix search * Fix heading <code> style * Fix search some more * Code cleanup * Update deps * Move content around * Allow drafts * Redirect logic * Don't render anything on docs if /docs * Shorten the regex patterns * Fix some more * Hack the build into working * Modernize docs links * Add content to introduction * Modify the content * fix content links * Reduce duplication in redirect regex * Differences from Kit page * Fix link * Make OnThisPage visible on all docs * Misc changes * Move differences page to introduction * Run prettier * Prerender examples api routes * Modify introdution page * replace positions of readonly and get * Minor blog style enhancement --------- Co-authored-by: Rich Harris <richard.a.harris@gmail.com>
1 year ago
---
title: 'svelte/easing'
---
Easing functions specify the rate of change over time and are useful when working with Svelte's built-in transitions and animations as well as the tweened and spring utilities. `svelte/easing` contains 31 named exports, a `linear` ease and 3 variants of 10 different easing functions: `in`, `out` and `inOut`.
You can explore the various eases using the [ease visualiser](/examples/easing) in the [examples section](/examples).
| ease | in | out | inOut |
| ----------- | ----------- | ------------ | -------------- |
| **back** | `backIn` | `backOut` | `backInOut` |
| **bounce** | `bounceIn` | `bounceOut` | `bounceInOut` |
| **circ** | `circIn` | `circOut` | `circInOut` |
| **cubic** | `cubicIn` | `cubicOut` | `cubicInOut` |
| **elastic** | `elasticIn` | `elasticOut` | `elasticInOut` |
| **expo** | `expoIn` | `expoOut` | `expoInOut` |
| **quad** | `quadIn` | `quadOut` | `quadInOut` |
| **quart** | `quartIn` | `quartOut` | `quartInOut` |
| **quint** | `quintIn` | `quintOut` | `quintInOut` |
| **sine** | `sineIn` | `sineOut` | `sineInOut` |
<!-- TODO -->
<!--
<div class="max">
<iframe
title="Aphrodite example"
src="/repl/easing"
scrolling="no"
></iframe>
</div> -->