Jump to content
Search Community

Adobe Animate Animation issues

Ken Cross test
Moderator Tag

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

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 comment
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 comment
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 comment
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.
×
×
  • Create New...