Create HTML5 interactive slideshow with animation in slides

Question

I am creating an instructional slideshow with HTML5 canvas. Each slide has animated 2D elements moving an scaling and a navigation pointing to each slide. Ultimately, I'd like to create this without using Animate CC, just incase the program goes away and I'd have to start from scratch if edits need to be made (like Edge files). I'd like to manually code this with HTML5, CSS, and JavaScript preferably utilizing CreateJS.

I've located tutorials on simple slideshows and animated transitions, but I'm moreso looking for animation taking place in each slide or scene.

Is this possible? Is there a tutorial out there? Thank you in advance.

score 1 · Answer 1 · answered May 17 '18 at 15:51

You absolutely don't have to use Adobe Animate to create animated content with CreateJS.

Here is a revised version of @hadders's code using CreateJS. Note that you need to use 1.0 to get the "yoyo" effect, which TweenJS calls "bounce"

var stage, bmp;

function init() {
  stage = new createjs.Stage("canvas");
  createjs.Ticker.on("tick", stage);

  bmp = new createjs.Bitmap("https://s3-us-west-2.amazonaws.com/s.cdpn.io/56901/dog_1_small.jpg");
  bmp.set({ x: 50, y: 50, alpha: 1});
  stage.addChild(bmp);

  createjs.Tween.get(bmp, {loop:-1, bounce:true}).to({
    alpha: 0, 
    x:500, 
    y:400
  }, 1000);
}

init();

Here is a fiddle with it in action: https://jsfiddle.net/8xmy6xuw/

Cheers,

@Dom If you want to see a more advanced example check out CreateJS' codepen for ideas. Here is an example that uses EaselJS to render the images, TweenJS to move those images, and PreloadJS to load the images :) https://codepen.io/createjs/pen/qoEaVG/ — sebastian.derossi, May 17 '18 at 16:06

hadders · Answer 2 · 2018-05-17T07:48:04.283

Use a library such as GSAP. Create an object which contains the coords which you'll use to position the canvas elements e.g. {x:100, y:100} then use GSAP to tween the x/y values of the object. The canvas element can then be positioned/animated using this tweened coord object.

This seems like a decent enough example : https://codepen.io/jonathan/pen/ychlf

HTML

<div id="canvas-wrapper">
<canvas id="canvas" width="800" height="600">canvas not supported</canvas> 
</div>

JS

var ctx, img;

function init() {
  ctx = document.getElementById("canvas").getContext("2d");

  img = new Image();
  img.src = "https://s3-us-west-2.amazonaws.com/s.cdpn.io/56901/dog_1_small.jpg";
  img.xpos = 50;
  img.ypos = 50;
  img.globalAlpha = 1.0;
  img.onload = function() {
    TweenLite.ticker.addEventListener("tick",loop);
  }

  TweenMax.to(img, 1 ,{
    globalAlpha:0, 
    xpos:500, 
    ypos:400, 
    repeat:-1, 
    yoyo:true
  });
}

function loop(){
   ctx.clearRect(0,0,800,600);
   ctx.globalAlpha = img.globalAlpha;
   ctx.drawImage(img, img.xpos, img.ypos);
}

init();

hope that helps

Create HTML5 interactive slideshow with animation in slides

2 Answers2