cmaxster

This is great! Thank you Carl.

tl.to(photography, 3, {width:photoWidthTo, height:photoHeightTo}) .to(lightGreenBox, 0.5, {width:lightGreenBoxWidth}, "-=1.5") .to(copy1, 0.5, {opacity:1}) .to(darkGreenBox, 0.5, {width:darkGreenBoxWidth}) .to(copy2, 0.5, {opacity:1}) .to(cta, 1, {opacity:1}); hello, I'm new to JavaScript TimelineLite and I can't seem to figure out how to do this simple thing.. I want to have photography animate, and then have lightGreenBox overlap it's animation by -1.5 seconds, but then I want all of the animations after it to sequence one after another after lightGreenBox finishes. Right now lightGreenBox is being offset, but none of the other animations are offsetting themselves accordingly.. It's kind of hard to explain.. I basically just want the rest of the sequence to continue after lightGreenBox is finished. I want the whole sequence to overlap photography's tween.. not just lightGreenBox. Like this: tl.to(photography, 3, {width:photoWidthTo, height:photoHeightTo}) .to(lightGreenBox, 0.5, {width:lightGreenBoxWidth}, "-=1.5") .to(copy1, 0.5, {opacity:1}, "-=1.0") .to(darkGreenBox, 0.5, {width:darkGreenBoxWidth}, "-=0.5") .to(copy2, 0.5, {opacity:1}) .to(cta, 1, {opacity:1}); Does that make sense? can anyone offer the solution?

I'm currently building an animated banner using Canvas. I've got coloured SVG dot graphics set as Image() objects on my canvas. I've been animating the dots on the canvas along x,y paths and I'd like the dots to fade out by the end of their animations... I can't seem to figure out how to animate opacity values in canvas using TweenLite... In fact, I'm not even sure how to animate opacity on the dots at all, even through plain JavaScript.. I haven't been able to find any answers on Google.. Does anyone here know how to achieve this desired effect? (preferably using TweenLite) For context sake, here is a small snippet of the code I'm currently working with: function drawDot() { ctx.drawImage(orDt, orDtObj.x, orDtObj.y); //draw an orange dot in the canvas } function reAnimateDot() //set dot back to it's origin { orDtObj.x = xDotOgn; orDtObj.y = yDotOgn; animateDot(); } function animateDot() { var angle = Math.random()*(Math.PI*2); console.log('>> the angle : '+angle) var radius = 100; //find the end point for our dot var xEnd = orDtObj.x + radius * Math.cos( angle ); var yEnd = orDtObj.y + radius * Math.sin( angle ) ; orDtObj.xEnd = xEnd; orDtObj.yEnd = yEnd; //reDrawUnit is a function that redraws everything during animation (refresh/frame-rate function) TweenLite.to(orDtObj, 2, {x:orDtObj.xEnd, y:orDtObj.yEnd, autoAlpha:0, ease:Quad.easeOut, onUpdate:reDrawUnit, onComplete:reAnimateDot}); }