Animate CC and GSAP

[CHM]

Hi folks,

I'm coming from this as an artist, not a programmer. (read - good with a pencil, but not very clever...)

I've made an interactive bock with Animate CC 2020 TweenMax test.flaand AS3 and now need to re-programme with HTML5 Canvas,

 I used (AS3) TweenMax to scroll my timeline and I'm tying to do the same thing with an Animate CC HTML 5 document, but... I just can't get it to work.

I reduced the whole thing to trying to get a simple box to play backwards and forwards but couldn't even get it to play forwards. So what am I doing wrong, it just worked with AS3...

 

I've attached my .fla, I've given up on being able to play in reverse until I can get it to play forward.

 

Sorry for such a basic question, but creatively I really like the whole interactive children's book concept.

 

So many thanks.

 

[ZachSaucier]

Hey CHM and welcome to the GreenSock forums! 

 

Not many people here use Animate. I actually don't have software on my computer that can open up your file.

 

Have you read this article on getting GSAP to work in Animate?

 

[CHM]

Hi Zach,

 

I have watched the videos, downloaded the example files and searched google. The examples worked, and the video are very good, but they were about tweening an object or graphic and I need to play a timeline, or a at least a movie clip containing a timeline in Animate .

 

Thank you so much for responding so quickly - GSAP is just an amazing tool, perhaps someone out there is using a GSAP Animate combination.

 

CHM

 

[explorerzip]

If you must use a graphical tool you could try out Google Web Designer. Not the most full-featured tool out there especially compared to Adobe Animate, but it is free.

If you want someone to look at your project, you'll either need to host it on your own web-site or copy it to DropBox, Google Drive, etc. and share a link to it.

[explorerzip]

1 minute ago, CHM said:

Hi Zach,

 

I have watched the videos, downloaded the example files and searched google. The examples worked, and the video are very good, but they were about tweening an object or graphic and I need to play a timeline, or a at least a movie clip containing a timeline in Animate .

 

Thank you so much for responding so quickly - GSAP is just an amazing tool, perhaps someone out there is using a GSAP Animate combination.

 

CHM

 

Animate only helps you do the layout of all the assets. You still need to write GSAP code.

[CHM]

Hey explorerzip,

Thanks for the advice. I'll take a look at Google Web Designer and see how that works for my project. 

CHM.

[Carl]

In order to do a frame tween you need to load the EaselPlugin.

I added this code to your file and loaded the EaselPlugin: https://greensock.com/docs/v3/Plugins/EaselPlugin

this.stop();

gsap.to(this, {easel:{frame:30}});
gsap.to(this.box, {scaleX:2, scaleY:2});

 

see attached file

 

I'll have some course material dealing with Animate and GSAP basics hopefully in the next month or so. Animate has made some improvements recently.

 

 

TweenMax test.fla

[CHM]

Hey Carl,

Thank you, I'll work that into my project and see if I can leverage some of the other things that GSAP can do.

CHM