Skip welcome & menu and move to editor
Welcome to JS Bin
Load cached copy from
 
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>JS Bin</title>
  <script src="//cdnjs.cloudflare.com/ajax/libs/paper.js/0.9.12/paper.js"></script>
  <script src="https://cdn.jsdelivr.net/gh/camille-hdl/animatePaper.js@master/dist/paper-animate-browser.min.js"></script>
</head>
<body>
  <canvas id="defCanvas" width="1000px" height="700px"></canvas>
</body>
</html>
 
animatePaper.extendEasing({
    "triple": function(p) {
        return p*3;
    }
  });
  document.addEventListener('DOMContentLoaded',function() {
      var scope = paper.setup('defCanvas');
      var circle = new paper.Path.Circle(new paper.Point(500, 350), 30);
      circle.strokeColor = 'black';
      
      var refCircle = circle.clone();
      refCircle.strokeColor = 'red';
      var refEndCircle = circle.clone();
      refEndCircle.strokeColor = 'green';
      refEndCircle.scale(2);
      animatePaper.animate(circle,{
        properties: {
          scale: 2
        },
        settings: {
            duration: 5000,
            center: new paper.Point(500, 400),
            complete: function() {
                animatePaper.animate(circle,{
                    properties: {
                        scale: 1
                    },
                    settings: {
                        duration: 1000,
                        easing: "triple"
                    }
                });
            },
            easing: "easeInBounce"
        }
      });
      var square = new paper.Path.Rectangle(new paper.Point(150, 350), new paper.Size(50,50));
      square.strokeColor = 'black';
      
      var refSquare = square.clone();
      refSquare.strokeColor = 'red';
      var refEndSquare = square.clone();
      refEndSquare.strokeColor = 'green';
      refEndSquare.scale(2);
      refEndSquare.rotate(30);
      animatePaper.animate(square,{
        properties: {
          scale: 2
        },
        settings: {
            duration: 500,
            complete: function() {
                animatePaper.animate(square,{
                    properties: {
                        rotate: 30
                    },
                    settings: {
                        duration: 1000,
                        easing: "easeInElastic"
                    }
                });
            },
            easing: "easeInElastic"
        }
      });
      var star = new paper.Path.Star(new paper.Point(45,50),5,25,45);
      star.fillColor = "black";
      
      star.opacity = 0;
      star.animate([{
          properties: {
              translate: new paper.Point(200,50),
              rotate: -200,
              scale: 2,
              opacity:1
          },
          settings: {
              duration:3000,
              easing:"swing"
          }
      },
      {
          properties: {
              translate: new paper.Point(0,50),
              rotate: 200,
              scale: 1,
              opacity:0
          },
          settings: {
              duration:3000,
              easing:"linear"
          }
      }]);
      var otherSquare = new paper.Path.Rectangle(new paper.Point(75, 75), new paper.Size(50,50));
      otherSquare.fillColor = "red";
      otherSquare.position.x += 200;
      otherSquare.position.y = 150;
      otherSquare.animate({
        properties: {
            fillColor: {
                hue: "+100",
                brightness: "-0.4"
            }
        },
        settings: {
            duration: 1000,
            easing: "swing",
            complete: function() {
                animatePaper.fx.shake(this,{nb:5});
            }
        }
      });
    
      var squareRepeat = new paper.Path.Rectangle(new paper.Point(200, 350), new paper.Size(50,50));
      squareRepeat.fillColor = 'blue';
      animatePaper.animate(squareRepeat,{
        properties: {
          rotate: '+360'
        },
        settings: {
            duration: 2000,
            repeat: true,
            easing: "linear"
        }
      });
    });
Output

This bin was created anonymously and its free preview time has expired (learn why). — Get a free unrestricted account

Dismiss x
public
Bin info
anonymouspro
0viewers