popmotion-pose
Version:
A declarative animation library for HTML and SVG
21 lines (15 loc) • 779 B
Markdown
title: SVG Morphing
description: With Pose and a path morphing library like Flubber, you can perform declarative SVG path morphing animations.
category: react
# SVG Morphing
By combining a path morphing library like [Flubber](https://github.com/veltman/flubber) with Pose, we can declaratively animate between any two SVG paths.
By importing animations from [Popmotion Pure](/pure), which is included with Pose, we can use their powerful `pipe` method with Flubber's `interpolate` to create a special `transition` prop that animates between paths:
```javascript
import { tween } from 'popmotion';
import { interpolate } from 'flubber';
const morphTransition = ({ from, to }) =>
tween().pipe(interpolate(from, to));
```
<CodeSandbox height="700" id="31lzml4nr1" />