path2percent
Animate a path to a given percent with path2percent and svelte.
Installation 🔧
To install using yarn
yarn add path2percent -D
or npm
npm i path2percent -D
LazyLoad
A lazy loading component is included. It provides a slot with props, that returns a boolean true if the component is in the viewport. If the browser does not support the IntersectionObserver api, the component will return true immediately. I considered adding a fallback using bounds from getBoundingClientRect, but ultimately opted to save a few kb instead.
drawPathToPercent
This function builds on top off the excellent animation from svelte. Adding percent plus a few small tweaks to allow you to animate along a path to a given percent.
coordinates
A subscribable store, providing the coordinates of the the end of the path. This is helpful if you want to animate an svg along a path.
Usage 📦
<script>
import { path2percent, LazyLoad } from "path2percent";
export let percent = 50;
let x = 0;
let y = 0;
let { coordinates, drawPathToPercent } = path2Percent();
const unsubscribe = coordinates.subscribe(position => {
x = position.x;
y = position.y;
});
</script>
<style>
.meter path {
will-change: auto;
stroke-width: 12px;
stroke-miterlimit: round;
transition: stroke-dashoffset 1.5s linear;
stroke-linecap: round;
}
</style>
<LazyLoad let:viewport={show}>
<svg
class="meter"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 200 200"
height="180"
width="180">
<path stroke="#ccc" d="M41 149.5a77 77 0 1 1 117.93 0" fill="none" />
{#if show}
<path
in:drawPathToPercent={{ percent, speed: 0.3 }}
stroke="#0AC0DD"
d="M41 149.5a77 77 0 1 1 117.93 0"
fill="none" />
{/if}
{#if x && y && percent}
<circle
cx={x}
cy={y}
r="12"
fill="#0AC0DD"
stroke="rgba(10, 192, 221, 0.4)"
stroke-width="17" />
{/if}
</svg>
</LazyLoad>
change easing
<script>
import { quadIn } from "svelte/easing";
</script>
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 200 200"
height="180"
width="180">
<path stroke="#ccc" d="M41 149.5a77 77 0 1 1 117.93 0" fill="none" />
<path
in:drawPathToPercentWithCallback={{ percent = 80, speed: 0.2, easing: quadIn }}
stroke="#0AC0DD"
d="M41 149.5a77 77 0 1 1 117.93 0"
fill="none" />
</svg>
Options 🛠️
defaults
- percent default = 0
- delay default = 0
- speed
- duration default = 800 #if speed is not provided
- easing default = expoIn
Authors ✒️
- ** Rod Lewis ** - StudentOfJS
