MikeB1
Content Type
Profiles
Forums
Store
Blog
Product
Showcase
FAQ
Downloads
Posts posted by MikeB1
-
-
-
Codepen link is on next post (apologies).
All seems to run ok EXCEPT:
1. {repeat:-1} on the timeline declaration has no effect. The loop() continues after the animation completed, but nothing animates.
2. {yoyo: true} is not working either.
3. Is this the most efficient way of doing this? - by joining the 7 '.to' statements into one command? This I ask, as I know that outside of Canvas, I can get the same result using staggerTo and only 2 lines of code.
Many thanks for your help with this.
-
Hi, here is my code. At the moment, all the balls fall at the same time, with no delay inbetween them. It appears the 0.25 stagger is ignored – I realise that the value of ypos is being passed to the function 'loop', and so the value will be fixed. However I am able to use the same 'timeline.staggerTo' code, outside of canvas, and get the required stagger effect (without having to use the 'drawImage' command):
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>HTML5 with TweenMax</title>
<script src="js/TweenMax.min.js"></script>
<style type="text/css" media="screen">
html, body { height:100%; background-color: #ffffff;}
body { display:block; margin:0; padding:0; overflow:hidden; }
#canvas { display:block; width:800px; height:600px; margin:0px auto; background:#000000; position:relative }
</style>
<script>
var ctx, img;
function init() {
ctx = document.getElementById("canvas").getContext("2d");
var timeline = new TimelineMax();
img = new Image();
img2 = new Image();
img3 = new Image();
img4 = new Image();
img5 = new Image();
img6 = new Image();
img7 = new Image();
img.src = "ball.png";
img2.src = "ball2.png";
img3.src = "ball3.png";
img4.src = "ball4.png";
img5.src = "ball5.png";
img6.src = "ball6.png";
img7.src = "ball7.png";
var clips1 = [img, img2, img3, img4, img5, img6, img7];
img.xpos = 0;
img.ypos = -113;
img.onload = function() {
TweenLite.ticker.addEventListener("tick", loop);
}
timeline.staggerTo(clips1, 1, {ypos:490, ease:Bounce.easeOut, onUpdate:loop}, 0.25);
}
function loop() {
ctx.clearRect (0,0,800,600);
ctx.drawImage (img, 0, img.ypos);
ctx.drawImage (img2, 113, img.ypos);
ctx.drawImage (img3, 226, img.ypos);
ctx.drawImage (img4, 339, img.ypos);
ctx.drawImage (img5, 452, img.ypos);
ctx.drawImage (img6, 565, img.ypos);
ctx.drawImage (img7, 678, img.ypos);
console.log("looping");
}
</script>
</head>
<body onload="init()">
<canvas id="canvas" width="800" height="600" style="background-color: #223456; z-index:0">
Canvas is not supported.
</canvas>
</body>
</html>
-
Hi. I am trying to use the staggerTo function with a delay between objects (png images) that are held in an array. I have come across the problem that, although I can create a staggerTo function, it is not working with the drawImage command in Javascript.
My function basically tweens to a Y value, to make an object move down the screen, but I have multiple objects in the array and require a stagger delay between each animation.
This works fine outside of the canvas, but when I use HTML5 canvas it seems I *have to* use the drawImage command, which ignores any delay i set in staggerTo.
Has anyone else come across this, and does anyone know a workaround?
staggerTo with drawImage in Javascript
in GSAP
Posted
That works brilliantly!
Awesome! Many many thanks for your assistance with this. It's much appreciated.
Thankyou,
Mike.