2 animations in javascript

Question

I am trying to make several animations on one page. but I don’t know how to create another variable. Here is an example from Codepen .

I tried to create another one "imageFile = new Image()"by naming it "imageFile2 = new Image(), but it didn't seem to work.

I am very new to this. Please guide me. Thanks in advance.

var appHeight = 400,
    appWidth = 1000,
    appCenterX = appWidth/2,
    appCenterY = appHeight/2,
    stage = new Kinetic.Stage({
       container: 'container',
       width: appWidth,
       height:appHeight
     }),
    layer = new Kinetic.Layer(),
    imageFile = new Image(),
    creature,
    bezTween;

imageFile.src = "http://www.greensock.com/_img/codepen/bezierCreature/creature_red.png";

var creatureGroup = new Kinetic.Group();
creature = new Kinetic.Image({
  image: imageFile,
  width:27,
  height:29,
  x:-16,
  y:-16
});

bezTween = new TweenMax(creatureGroup, 6, {
  bezier:{
    type:"soft", 
    values:[{setX:100, setY:250}, {setX:300, setY:0}, {setX:500, setY:400}, {setX:appWidth+20, setY:20}],
    //autoRotate needs to know how to adjust x/y/rotation so we pass in the names of the apporpriate KineticJS methods
    autoRotate:["setX", "setY", "setRotationDeg"]
  }, 
  ease:Linear.easeNone, autoCSS:false, repeat:10});

  for (i = 0; i<200; i++){
  bezTween.progress(i/200);
  var circle = new Kinetic.Circle({
  radius:2,
    fill:'#333',
    x:bezTween.target.getX(),
    y:bezTween.target.getY()
});
layer.add(circle);
  layer.draw();
bezTween.restart();  
}

var creatureLayer = new Kinetic.Layer();
creatureGroup.add(creature); 
creatureLayer.add(creatureGroup);
stage.add(layer);
stage.add(creatureLayer);

TweenLite.ticker.addEventListener("tick", redraw);

function redraw(){
  creatureLayer.draw();

}

Answer 1

You can create a second one creature2.

var appHeight = 400,
    appWidth = 1000,
    appCenterX = appWidth/2,
    appCenterY = appHeight/2,
    stage = new Kinetic.Stage({
       container: 'container',
       width: appWidth,
       height:appHeight
     }),
    layer = new Kinetic.Layer(),
    imageFile = new Image(),
    imageFile2 = new Image(),
    creature,
    creature2,
    bezTween;

imageFile.src = "http://www.greensock.com/_img/codepen/bezierCreature/creature_red.png";

imageFile2.src = "http://www.greensock.com/_img/codepen/bezierCreature/creature_red.png";

var creatureGroup = new Kinetic.Group();
creature2 = new Kinetic.Image({
  image: imageFile2,
  width:50,
  height:50,
  x:20,
  y:-16
});

Check out Updated Codepen Here .

Edit:

Here I updated the codepen with a different path for another creature that you need.

I created another way there.

bezTween1 = new TweenMax(creatureGroup1, 6, {
  bezier:{
    type:"soft", 
    values:[{setX:150, setY:300}, {setX:350, setY:0}, {setX:550, setY:450}, {setX:appWidth+50, setY:50}],
    //autoRotate needs to know how to adjust x/y/rotation so we pass in the names of the apporpriate KineticJS methods
    autoRotate:["setX", "setY", "setRotationDeg"]
  }, 
  ease:Linear.easeNone, autoCSS:false, repeat:10});

Check Codepen Here.