From 331a582dbc8b3066db57e5d9f491858dab481eaa Mon Sep 17 00:00:00 2001 From: Richard Harris Date: Fri, 22 Mar 2019 09:14:02 -0400 Subject: [PATCH] more svelte/motion docs --- site/content/docs/03-run-time.md | 69 ++++++++++++++++++++++++++++--- site/src/routes/docs/_sections.js | 2 +- site/src/routes/docs/index.svelte | 7 +++- site/static/repl-viewer.css | 2 +- 4 files changed, 71 insertions(+), 9 deletions(-) diff --git a/site/content/docs/03-run-time.md b/site/content/docs/03-run-time.md index 4d6b8c0c09..fe1c88532d 100644 --- a/site/content/docs/03-run-time.md +++ b/site/content/docs/03-run-time.md @@ -307,9 +307,9 @@ const value = get(store); The `svelte/motion` module exports two functions, `tweened` and `spring`, for creating writable stores whose values change over time after `set` and `update`, rather than immediately. -* `store = tweened(value: any, options)` +#### tweened ---- +* `store = tweened(value: any, options)` Tweened stores update their values over a fixed duration. The following options are available: @@ -318,7 +318,13 @@ Tweened stores update their values over a fixed duration. The following options * `easing` (`function`, default `t => t`) — an [easing function](docs#svelte-easing) * `interpolator` (`function`) — see below -TODO passing these options into `store.set` and `store.update`, to override defaults +`store.set` and `store.update` can accept a second `options` argument that will override the options passed in upon instantiation. + +Both functions return a Promise that resolves when the tween completes. If the tween is interrupted, the promise will never resolve. + +--- + +Out of the box, Svelte will interpolate between two numbers, two arrays or two objects (as long as the arrays and objects are the same 'shape', and their 'leaf' properties are also numbers). ```html @@ -341,13 +348,63 @@ TODO passing these options into `store.set` and `store.update`, to override defa >embiggen ``` -TODO custom interpolators +--- + +The `interpolator` option allows you to tween between *any* arbitrary values. It must be an `(a, b) => t => value` function, where `a` is the starting value, `b` is the target value, `t` is a number between 0 and 1, and `value` is the result. For example, we can use the [d3-interpolate](https://github.com/d3/d3-interpolate) package to smoothly interpolate between two colours. + +```html + + +{#each colors as c} + +{/each} + +

{$color}

+``` + +#### spring * `store = spring(value: any, options)` -A `spring` store gradually changes to its target value based on its `stiffness` and `damping` parameters. Whereas `tweened` stores change their values over a fixed duration, `spring` stores change over a duration that is determined by their existing velocity, allowing for more natural-seeming motion in many situations. +A `spring` store gradually changes to its target value based on its `stiffness` and `damping` parameters. Whereas `tweened` stores change their values over a fixed duration, `spring` stores change over a duration that is determined by their existing velocity, allowing for more natural-seeming motion in many situations. The following options are available: -TODO +* `stiffness` (`number`, default `0.15`) — a value between 0 and 1 where higher means a 'tighter' spring +* `damping` (`number`, default `0.8`) — a value between 0 and 1 where lower means a 'springier' spring +* `precision` (`number`, default `0.001`) — determines the threshold at which the spring is considered to have 'settled', where lower means more precise + +--- + +As with `tweened` stores, `set` and `update` return a Promise that resolves if the spring settles. The `store.stiffness` and `store.damping` properties can be changed while the spring is in motion, and will take immediate effect. + +[See a full example here.](tutorial/spring) + +```html + +``` ### svelte/transition diff --git a/site/src/routes/docs/_sections.js b/site/src/routes/docs/_sections.js index 5fb7a61256..79b64c58b3 100644 --- a/site/src/routes/docs/_sections.js +++ b/site/src/routes/docs/_sections.js @@ -99,7 +99,7 @@ export default function() { const seen = new Set(); renderer.heading = (text, level, rawtext) => { - if (level <= 3) { + if (level <= 4) { const slug = rawtext .toLowerCase() .replace(/[^a-zA-Z0-9]+/g, '-') diff --git a/site/src/routes/docs/index.svelte b/site/src/routes/docs/index.svelte index 93a2b48824..0cbbf547f5 100644 --- a/site/src/routes/docs/index.svelte +++ b/site/src/routes/docs/index.svelte @@ -242,9 +242,14 @@ @media (min-width: 768px) { .content :global(h2):hover :global(.anchor), - .content :global(h3):hover :global(.anchor) { + .content :global(h3):hover :global(.anchor), + .content :global(h4):hover :global(.anchor) { opacity: 1; } + + .content :global(h4):hover :global(.anchor) { + top: 0.4em; + } } .content :global(h3), diff --git a/site/static/repl-viewer.css b/site/static/repl-viewer.css index 9d682a3961..f4520f5109 100644 --- a/site/static/repl-viewer.css +++ b/site/static/repl-viewer.css @@ -33,7 +33,7 @@ input, button, select, textarea { font-family: inherit; font-size: inherit; padding: 0.4em; - margin: 0 0 0.5em 0; + margin: 0 0.5em 0.5em 0; box-sizing: border-box; border: 1px solid #ccc; border-radius: 2px;