Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...

oOLucOo

Members
  • Posts

    9
  • Joined

  • Last visited

oOLucOo's Achievements

  1. oOLucOo

    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
  2. oOLucOo

    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.
  3. oOLucOo

    JPG Sequence GSAP

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

    JPG Sequence GSAP

    Thanks 😃. Animation works fine. But i can't go backwards https://codepen.io/luchohler/pen/qBNBVar
  5. oOLucOo

    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. 😀
  6. oOLucOo

    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.
×