Tweened animation with Paper.js

Question

I want to be able to define tweened animations using Paper.js. So far I have determined that Tween.js would probably be the best library to use for this. However I don't see any examples on the web, all of them seem to be for Three.js.

Does anyone have other suggestions for how I might achieve tweened animations? I am trying to animate some paths on mouseMove() mouseDown() and mouseUp() events.

score 5 · Accepted Answer · answered Apr 05 '15 at 20:40

Here are a few examples of how to use Tween.js with Paper.js:

A very simple example of moving a star without interaction.
A tutorial article on creating a nice jelly effect which heavily uses mouses and scrolling velocity.
A complex multipart animation on CodePen that uses mouseOver as a trigger.

Here's the relevant code snippet on the paperjs + tweenjs integration from the first example.

 path.position = {
    x : 100,
    y : 100
  }

  createjs.Tween.get( path.position, { loop: true } )
  .to( { x: 300 }, 1000, createjs.Ease.quadOut )
  .wait( 2000 )
  .to( { x: 100, y: 300 }, 1000, createjs.Ease.quadOut )
  .wait( 2000 )
  .to( { x: 100, y: 100 }, 1000, createjs.Ease.quadOut )
  .wait( 2000 )
  .call( function() {
    console.log( 'done!' );
  } );

  var update = function() {
    paper.view.draw();
  }

  createjs.Ticker.setFPS( 60 );
  createjs.Ticker.addEventListener( 'tick', update );

Tweened animation with Paper.js

1 Answers1