tween-svg-path
v2.0.6
Published
High performance & lightweight tween interpolation for svg paths
Downloads
100
Readme
Tween svg-path
High performance & lightweight tween interpolation for svg paths
Example
This takes an svg path element and interpolates it to the given path over the duration of 1000ms.
import tweenSvgPath from "tweenSvgPath"
let fromSvgElem = document.querySelector("#svg path")
let toSvgPath = "[your to svg path]"
let duration = 1000
let tweeny = tweenSvgPath(fromSvgElem, toSvgPath, duration)
If you like to manually control the update cycle, set the optional parameter run
to false.
let run = false
let tweeny = tweenSvgPath(fromSvgElem, toSvgPath, duration, run)
console.log(tweeny.update(500))
This way you could sync the animation up to something like a scroll position.
To manually tween it over a timeline (like in the example above) use animation-frame-delta as it has been extensively tested to work well together.
import animationFrameDelta from "animation-frame-delta"
animationFrameDelta((progress) => {
tweeny.update(progress)
}, duration)
// or the more cool but less readable version
animationFrameDelta(tweeny.update.bind(tweeny))
Additionally the distribution can be controlled as well. To do so, dont give a SVGPathElement
as from parameter but a string.
let fromSvgPath = "[your from svg path]"
let toSvgPath = "[your to svg path]"
let tweeny = tweenSvgPath(fromSvgPath, toSvgPath, duration)
const elem = document.querySelector("#svg path")
tweeny.onUpdate((interpolatedSvg) => {
elem.setAttribute("d", interpolatedSvg)
})
Paths can be given in parsed fashion (as type Segments = (string | number)[][]
) as well. The output will not be stringifyed to a svg path like in the examples above.
Note: The libraries parse-svg-path, abs-svg-path and normalize-svg-path provide parsing to the mentioned Segements type.
import * as parse from "parse-svg-path"
import * as abs from "abs-svg-path"
import * as normalize from "normalize-svg-path"
let fromPathSegments = normalize(abs(parse("[your from svg path]")))
let toParsedSegments = normalize(abs(parse("[your to svg path]")))
tweenSvgPath(fromPathSegments, toParsedSegments, duration).onUpdate((interpolatedPathSegmenets) => {
console.log(interpolatedPathSegmenets)
})
Conribute
All feedback is appreciated. Create a pull request or write an issue.