Add a transition

High Level Steps

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

Writing a transition

Goal: Have a fun easy place to test a transition and prepare for annoying library integrations.

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

• ~2 custom properties with your clip paths in them
• 2 keyframe animations using your custom properties
• name are consistent with each other and the rest of the library

Integrate into the bundle(s)

Goal: Put all the picky named things into their picky named locations

1. Fork this repo!
2. Find the applicable shape folder in transition.css/src/
3. Add your custom properties to the _vars.css file in that directory
4. Create 2 new files: src/${shape}/in-${your_transition}.css & src/${shape}/out-${your_transition}.css
5. Paste the following template into each file and replace the names with yours:

@keyframes shape-state-name {
  from {
    clip-path: var(--your-property1);
  }
  to {
    clip-path: var(--your-property2);
  }
}

[transition-style="state:shape:name"] {
  animation-name: shape-state-name;
}

1. Add your animation keyframes to your new files
2. Add your 2 new files to _includes.css
3. Create a pull request to the main branch with your new transition!

Include in the Svelte site

Goal: Include your new transition in transition.style

1. Checkout the svelte branch
2. Open svelte-docsite/src/transitions.js and add your transitions to the list
3. Run npm run dev and visit localhost:5000 to verify your transition is listed
4. Create a pull request to the svelte branch!

Transition docsite uses the CDN version of this library, so in order to try your transition in the docsite, open svelte-docsite/public/index.html and point the import to a build of yours.