[JPG Sequence GSAP]

var sprite = {frame: 1,lastFrame: -1,totalFrames: 239,textures: []};

var animation = gsap.timeline({yoyo: false,paused: true,onUpdate: drawSprite});
animation.to(sprite, 2, { frame: 60,roundProps: "frame",ease: Linear.easeNone });

var animation2 = gsap.timeline({yoyo: false,paused: true,onUpdate: drawSprite});
animation2.to(sprite, 2, { frame: 120,roundProps: "frame",ease: Linear.easeNone });

$(".btn1").click(function() {
  animation.play();
});
$(".btn2").click(function() {
  animation2.play();
});

 

How to do to be able to launch the animation several times?

When I click again on one of the buttons, the animation does not start and I have no error.

 

Thanks

[JPG Sequence GSAP]

 

my animation is 30 fps

 

Is that right  ?

var animation = new TimelineMax({yoyo: true,paused: true,onUpdate: drawSprite})
  .to(sprite, 2, {
    frame: 60,
    roundProps: "frame",
    ease: Linear.easeNone
  });

 

thank you for your help.

 

 

[JPG Sequence GSAP]

@ZachSaucier

I tried with the link you gave me (360). The animation is less fluid than with my initial version

[JPG Sequence GSAP]

Thanks 😃.

Animation works fine. But i can't go backwards

 

See the Pen qBNBVar by luchohler (@luchohler) on CodePen

[JPG Sequence GSAP]

Sorry for the format, this is my first post.
Thanks for your feedback. I'll try that.

 

Yet I had the impression of being close. 😀

[JPG Sequence GSAP]

Hello everyone,
I used a code that I found here: https://greensock.com/forums/topic/20404-flickering-png-sequence/
Thanks to @OSUblake.

My problem: I have a jpg sequence animation (240 frames) and I would like to navigate between the different frames. Go from 0 to 100 or from 150 to 20. I can go forwards but not backwards. On the first click the animation works but when I click again nothing happens
Here is my code:

HTML

<button class="btn btn1">BOUTON1</button>
<button class="btn btn2">BOUTON2</button>
<button class="btn btn3">BOUTON3</button>

<canvas id="canvas"></canvas>

JAVASCRIPT

var baseURL = "anim3/";
var canvas = document.querySelector("#canvas");
var context = canvas.getContext("2d");

var sprite = {
  frame: 1,
  lastFrame: 240,
  totalFrames: 240,
  textures: []
};

var animation = new TimelineMax({yoyo: true,paused: true,onUpdate: drawSprite})
  .to(sprite, 2, {
    frame: 100,
    roundProps: "frame",
    ease: Linear.easeNone
  });

var animation2 = new TimelineMax({yoyo: true,paused: true,onUpdate: drawSprite})
	.to(sprite, 2, {
		frame: 150,
	 	roundProps: "frame",
	  ease: Linear.easeNone
	});

var animation3 = new TimelineMax({yoyo: true,paused: true,onUpdate: drawSprite})
	.to(sprite, 2, {
		frame: 2,
		roundProps: "frame",
		ease: Linear.easeNone
	});

loadTextures(sprite.totalFrames)
  .then(resizeCanvas)
  .catch(function(reason) {
    console.log(reason)
  });

function drawSprite() {
  // No changes
  if (sprite.frame === sprite.lastFrame) {
		return;
  }
  context.drawImage(sprite.textures[sprite.frame], 0, 0);
  sprite.lastFrame = sprite.frame;
}

function resizeCanvas(textures) {
  var texture = textures[0];
  sprite.textures = textures;
  canvas.width = texture.naturalWidth || texture.width;
  canvas.height = texture.naturalHeight || texture.height;
  canvas.classList.add("is-loaded");
  var aspectRatio = canvas.height / canvas.width;

	// BASE
	base_image = new Image();
  base_image.src = 'anim3/animhead_01.jpg';
  base_image.onload = function(){
    context.drawImage(base_image, 0, 0);
  }
}

function loadTextures(numTextures) {
  var promises = [];
  for (var i = 1; i <= numTextures; i++) {
		var index = i < 100 ? "0" + i : i;
    promises.push(loadTexture(baseURL + "animhead_" + index + ".jpg"));
  }
  return Promise.all(promises);
}

function loadTexture(path) {
  return new Promise(function(resolve, reject) {
    var img = new Image();
    img.onload = function() {
      resolve(img);
    }
    img.onerror = function() {
      reject("Error loading " + path);
    };
    img.src = path;
  });
}


$( ".btn1" ).click(function() {
  animation.play();
});
$( ".btn2" ).click(function() {
  animation2.play();
});
$( ".btn3" ).click(function() {
  animation3.play();
});

Someone can help me ?

Thank you.