Share Posted September 15, 2017 Hey guys, i'm doing an add for a client and I can't seem to get the tween to animate at all. The images just appear on the canvas and stay static. Here's my code: var tl = new TimelineMax({repeat:1, repeatDelay:3}); tl .add("scene1"); .set(this.text2.mc, {alpha:0}); .set(this.text3.mc, {alpha:0}); .set(this.vendor.mc, {alpha:0}); .set(this.blueBG.mc, {alpha:0}); .from(this.text1.mc, 3, { scale:"0.75", alpha:0, ease: Power1.easeIn }, "scene1"); .add("scene2", 3); .to(this.BG.mc, 3, { scale:"0.875", alpha:0, ease: Power1.easeIn }, "scene2"); .to(this.text1.mc, 0.2, { alpha:0, ease: Power1.easeIn }, "scene2+=0.2"); .to(this.text2.mc, 0.2, { alpha:1, ease: Power1.easeIn }, "scene2+=0.2"); .add("scene3", 7); .to(this.BG.mc, 3, { alpha:0.9, ease: Power1.easeIn }, "scene3"); .to(this.text2.mc, 0.2, { alpha:0, ease: Power1.easeIn }, "scene3"); .to(this.text3.mc, 0.2, { alpha:1, ease: Power1.easeIn }, "scene3+=0.5"); Any help you can give is greatly appreciated! See the Pen XebGXY by kenancross (@kenancross) on CodePen Link to post Share on other sites
Share Posted September 16, 2017 Remove all the semi-colons at the end of each tween, or you would need to start each new tween with "tl" again. Remove ".mc" from all of your object names. It should just be "this.text2", not "this.text2.mc". "scale" is not a property in canvas mode. You must use scaleX and scaleY. Assuming you are linking to the GSAP library and all of your instance names match up, your code should work if it looks like this: var tl = new TimelineMax({repeat:1, repeatDelay:3}); tl .add("scene1") .set(this.text2, {alpha:0}) .set(this.text3, {alpha:0}) .set(this.vendor, {alpha:0}) .set(this.blueBG, {alpha:0}) .from(this.text1, 3, { scaleX:"0.75", scaleY:"0.75", alpha:0, ease: Power1.easeIn }, "scene1") .add("scene2", 3) .to(this.BG, 3, { scaleX:"0.875", scaleY:"0.875", alpha:0, ease: Power1.easeIn }, "scene2") .to(this.text1, 0.2, { alpha:0, ease: Power1.easeIn }, "scene2+=0.2") .to(this.text2, 0.2, { alpha:1, ease: Power1.easeIn }, "scene2+=0.2") .add("scene3", 7) .to(this.BG, { alpha:0.9, ease: Power1.easeIn }, "scene3") .to(this.text2, 0.2, { alpha:0, ease: Power1.easeIn }, "scene3") .to(this.text3, 0.2, { alpha:1, ease: Power1.easeIn }, "scene3+=0.5"); 3 Link to post Share on other sites
Author Share Posted September 18, 2017 Thanks for your reply to this. I find however that none of this is rendering. I retyped some code and it starts to animate, so is this a matter that adding labels and setting initial values don't work? Because just doing them line by line seems to work better. As a side note, i'm having trouble getting this.BG to scale down correctly. I put -0.7 for both x and y and it completely flips the image and blows it up. I make it just 0.7 x and y, and the image scales larger not smaller. What am I missing? Link to post Share on other sites
Author Share Posted September 18, 2017 Never mind! I figured it out myself after tinkering with it all! Excited to bring my agency out of the dark ages! GSAP is an incredible tool! 2 Link to post Share on other sites