Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
Ken Cross

Adobe Animate Animation issues

Recommended Posts

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

 

  • Like 3
Link to post
Share on other sites

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

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!

  • Like 2
Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    No registered users viewing this page.

×