colinmeinke/wilderness

An SVG animation API

Wilderness

An SVG animation API · https://wilderness.now.sh

Summary

• 🎉 Small file size (15.1kb minified + gzip)
• 🌟 Simple, functional API
• 🐣 Morph from anything, to anything
• ⏱️ Queue multiple animations on a timeline
• 🚀 Powerful playback control

Hello world

import { shape, render, timeline, play } from 'wilderness'

const morph = shape(
  { el: document.querySelector('circle') },
  { el: document.querySelector('rect') },
)

const animation = timeline(morph, {
  iterations: Infinity,
  alternate: true
})

render(document.querySelector('svg'), animation)

play(animation)

Learn Wilderness · View examples

wilderness's Issues

How to retrieve state of animation?

Add delay to shape frame animations

Create shape from existing DOM nodes

Split core out into own repository

Match number of points for shape morph

Don't run requestAnimationFrame when not needed

Circle and ellipse should be drawn clockwise

This requires an update to SVG Points 3.

Will require a breaking change.

Allow first keyframe to be named

As name is currently an animation property and fist keyframes do not take animation properties, name is getting removed.

shape and render should be able to take dom node

Add event callbacks

Create React library

Add auto option to moveIndex

Hi @colinmeinke. My last thing to ask, how to there get closest point for both start and end shape?
Like some shapes need moveIndex: 22. I want to do it auto for users.
Like D3js closest point or KUTE.js Morph Utility. Can you give me some instruction or link/guide/tutorial for this?
Thanks. Soon you see new Wilderness.js like other Morphing but for IE9+, Chrome 35+, FF30+, Opera 12.5+, even bit older browser

Tween unit values

5px is a string, so changing stroke-width from 1px to 5px will not tween.

Don't recreate svg on multiple renders

Add example of animation reacting to user input

All animations use one requestAnimationFrame

Add some tests

Add error handling

[BUG] "Group" SVG Elements issue

Hi.
When you see SVG-Morpheus, they can morph Group elements when group shapes is different. But when i do with Wilderness, it not tweens, fail.
How i can fix it?

Thanks for amazing library and super-secured code 😄

Maintain class when replacing existing dom element

Playback example initial render at position 0

Set max tween values on colors

Currently if an elastic ease is used color values can overflow the bounds of the range and become invalid.

Remove shape inheritance

Currently when creating a shape, additional plain shape objects will inherit properties from the initial plain shape object:

const from = {
  type: 'circle',
  r: 10,
  cx: 50,
  cy: 50,
  fill: '#E54',
  moveIndex: 2,
  reverse: true,
};

const to = {
  r: 20,
};

shape( from, to );

The to shape in the above example will inherit every from property apart from r. Currently to avoid this behaviour the to plain shape object should redefine the undesired properties with the default value. e.g. reverse: false.

Currently I'm planning to abandon inheritance altogether and suggest plain Javascript if inheritance is required.

const sharedProperties = {
  type: 'circle',
  cx: 50,
  cy: 50,
  fill: '#E54',
};

const from = {
  ...sharedProperties,
  r: 10,
  moveIndex: 2,
  reverse: true,
};

const to = {
  ...sharedProperties,
  r: 20,
};

shape( from, to );

Tween between colours

Add example of physics based animation

Playback example play > pause > play starts incorrect animation

Motion path can be janky on large curves

This is a result of the curves being translated to lines to retrieve x, y, angle props.

Need to increase accuracy of this calculation.

Fix examples setup process

Currently babel will throw if root node_modules not installed.

Handle group shapes

When creating a group shape need to consider how to handle child styles.

On complete set to final shape state

Apply manipulations to motion paths

I can use this in my project?

Hi @colinmeinke
I can use this library to my project (implement, part of it).
And license is like MIT?
Is this free?

Polyfill requestAnimationFrame

Something like https://www.npmjs.com/package/raf

Add standard code style linting

Performance audit

Play can be called more than once on a playable

Include all attributes when creating shape from existing DOM node

Currently when a plain shape object is created from an existing DOM node, it only acknowledges a specified list of attributes. It ignores inline or external styles.

Handle motion path easing overshoot

Line distorted

{
  type: 'path',
  d: 'M2 2.078S4.987 4.73 11 4.73s9-2.652 9-2.652',
  strokeWidth: 2,
  strokeLinecap: 'square',
}

Add timeline function

Add missing motion path documentation

e.g. rotate

Playback example with reverse and alternate checked starts in wrong direction

Allow motion path to take rotate offset

Currently rotate is boolean, and if true will rotate the shape to the angle of the current position on the motion path. rotate should also be able to take a number which will adjust the current position angle by the given value.

Animate along motion path

Can we improve algorithm for morphing?

Hi, i'm very interested in your algorithm as best i know, but some smallest bug i match. Unim.js (my old animation engine, now deprecated) uses SnapSVG algorithm.

Can we improve by mixing both algorithm? Or it's as have we leave?
Thanks for amazing library.

Demo here to see: http://codepen.io/dalisoft/pen/rrPjEd [go-to scroll bottom]

Shape moveIndex is limited

Demo like we test how it works: http://codepen.io/GreenSock/pen/LpxOqR

But, i tested 50 moveIndex, it's repeats after 6 index (for negative too, but for -5). I can't get correct index

Add motion path rotation

Flash of incorrect position

Motion path shape rotation opposite on undershoot

Motion path should apply to group shapes