Skip to content

Add a transition

Adam Argyle edited this page Sep 30, 2020 · 4 revisions

Steps

  1. Write transition
  2. Include the transition in the library bundle(s)
  3. Include the transition in the Svelte docsite

Writing a transition

  1. Sandbox for getting started https://codepen.io/argyleink/pen/RwamzKX
  2. Look to see which shape type your transition fits into (circle, square, polygon or wipe)
  3. Isolate the stateful custom properties you need
  4. Create your 2 keyframe animations (in and out)
  5. Have a nice working demo that can be toggled in and out

Checklist

  1. ~2 custom properties with your clip paths in them
  2. 2 keyframe animations using your custom properties

Integrate into the bundle(s)

Include in the Svelte site

Clone this wiki locally