Adobe Animate Animation issues

[Ken Cross 2 Likes (Newbie)]

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

[ohem 333 Likes (Leader)]

• 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");

 

[Ken Cross 2 Likes (Newbie)]

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?

[Ken Cross 2 Likes (Newbie)]

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!