diff --git a/site/content/docs/03-run-time.md b/site/content/docs/03-run-time.md index c2cc59fa7b..9c9a37f881 100644 --- a/site/content/docs/03-run-time.md +++ b/site/content/docs/03-run-time.md @@ -409,7 +409,7 @@ As with `tweened` stores, `set` and `update` return a Promise that resolves if t TODO -* fade, fly, slide, draw +* fade, fly, slide, scale, draw * crossfade... ### svelte/animation diff --git a/transition.mjs b/transition.mjs index 1b6fbec605..ccb0ef68c7 100644 --- a/transition.mjs +++ b/transition.mjs @@ -66,6 +66,32 @@ export function slide(node, { }; } +export function scale(node, { + delay = 0, + duration = 400, + easing = cubicOut, + start = 0, + opacity = 0 +}) { + const sd = 1 - start; + const od = 1 - opacity; + + const transform = ( + node.style.transform || + getComputedStyle(node).transform + ).replace('none', ''); + + return { + delay, + duration, + easing, + css: (t, u) => ` + transform: ${transform} scale(${1 - (sd * u)}); + opacity: ${1 - (od * u)} + ` + }; +} + export function draw(node, { delay = 0, duration = 800,