Creates a new tween that chains and groups multiple tweens, allowing you to create a timeline of sorts.
var Tween =var el = x: 0 y: 0 z: 0var chain =//we can use tweenr to handle timing for us
The first two tweens (on
y) run in parallel with a slightly different delays/durations. The third tween runs after the previous
y tween is finished, so
z won't start tweening until 2s (including its delay).
chain()allows you to stack tweens so they run in parallel
then()allows you to defer your tween until the previously added tween is finished
- events are triggered for the whole chain
- cancelling a chain cancels all the tweens it contains
- you can
then()other chains to build up complex and layered timelines
Note that tweens are mutable, so timelines are not currently "reusable" -- instead, they should be wrapped in a function.
then() methods all follow the same pattern as tweenr#to. You can pass in a tween object (like another
(element, opt) to create a generic object tween.
tween = require('tween-chain')([element, opt])
Creates a new chain, optionally with an initial tween.
Adds a tween to this chain which will be run as soon as this chain starts. Aside from individual delays, any
chain() tweens will always run in parallel. This is mostly useful e.g. if you want to tween opacity and size with subtly different easings or timings.
Adds a tween which is only started once the previously added tween has completed. This allows you to build up events that trigger one after another.
Cancels this chain and its children, returning this for method chaining.
If you cancel a chain, all of its children will emit
cancelling and subsequent
complete events on next tick. This also means that any subsequent chains waiting for this chain will then be triggered.
MIT, see LICENSE.md for details.