Direction For Getting Started With GSAP & Animate CC

[ithedar]

Hi all,

 

I've read many posts on this website, and took a look at the presentations and "tutorials" posted to get started with GSAP.

 

For my background: I never used Flash and I'm going to be using Animate CC for the first time. I know a little bit of JS and I have a design background so I'm comfortable in the Adobe CS.

 

I have watched video tutorials on animating in Animate CC and I thought well why GSAP? Then I watched separate videos and the slideshow on GSAP here on greensock.com and said "ah, so why Animate CC?" Then I read a forum post on here that explained the benefits. I appreciated that.

 

However, now that I want to give it a genuine trial run, I have no idea where to start. In the footer of greensock.com there's a HTML/5 GSAP and a Flash GSAP to get started. I need to learn how to harness GSAP in Animate CC for a job, and I assume the Flash GSAP tutorial is not applicable. And the HTML5/JS tutorials are great but I don't know how to apply it to Animate CC.

 

Then there's the tutorials in the Learning Center by Cory Hudson that has a update that the template files are outdated with notes that I kind of get, but since I don't have hands on experience with Animate CC I don't fully comprehend. As for the code in the actual article, I can read that fairly well, but I don't really know how to apply it to starting my own banner ad.

 

After searching the Lynda.com and YouTube I couldn't find something that really seemed like the right entrypoint for a beginner. That leaves me to ask: Is there anywhere that has a simple Get Started With GSAP With Adobe Animate CC? Is Animate just a DAM to code in for GSAP users, or is the Animate CC timeline being utilized? I really do apologize if I've somehow missed things, I have spent a great deal of time reading the white papers written over Adobe and learning resources here on the site.

 

I suppose, as a beginner in HTML 5 ads I have no idea how to put this information together. Any guidance would be much appreciated.

[Web Dizajner]

Maybe you can start with those HTML5 banner ads templates and this simple Animate CC + GSAP banner

[Carl]

Hi and welcome to the GreenSock forums,

 

I can understand your frustration. Its unfortunate that recent changes to Animate CC sort of broke the 2 massive articles that Cory Hudson wrote for us. 

However, the changes make it much easier to get GSAP into your Animate project so it is a welcome improvement.

 

We haven't yet had time to create any new materials focused on getting started with Animate but will look into what we can do. The good news is that you can use the exact same GSAP code in Animate as you can anywhere else. You just have to be aware that none of the functionality of CSSPlugin (which animates CSS properties of DOM elements) applies. 

[ithedar]

Thank you for the files and thank you for clarifying that I was not overlooking something obvious. I couldn't understand the benefit of the templates, they mainly looked blank including the scripts however The Animate CC + GSAP banner file helped clarify some things as it had content.  I did some hands on GSAP coding without Animate and hands on HTML5 banner ad creation in Animate CC to practice my skills in both. Now I'm really trying to learn how to use these together in a professional manner.

 

I do want to clarify some questions that came up as I checked out the demo file and if anyone has the answers I greatly appreciate it I was able to form these questions based on the Animate CC + GSAP banner file provided by Web Dizajner in the first reply to my post.

 

1) Images are imported into Adobe Animate and only animated through the TimelineMax of GSAP. Is the only coding I have to do for a Animate CC GSAP powered animation in Adobe CC under Windows > Action? I see code in the attached .html file but am I correct to assume that is done when exporting via Animate CC and not code I need to use as reference?

 

2) Are those files converted to symbols and given movie frame? The only layer I see with a symbol of button is the exit layer (which I see in Actions calls to the clickTag which is in the HTML file and I believe is necessary for...DoubleClick?)

 

3) If I wanted to create a CTA that is built with the rectangle tool and changes color on hover how would I do this with Greensock? I know how to convert the rectangle to button symbol and edit the states (Up Over Down Hit) with Animate alone but how does that effect GSAP? Is there a better way to do this?

 

4) From what I gather from the updated 2017 post, all I have to do to add GSAP is to include a link to the CDN in Animate CC Window > Actions Under the Global dropdown and include "Add from URL". Am I correct?

 

I would greatly appreciate further clarity, and I do hope more comprehensive resources become available in the near future. 

 

I hope to one day be able to contribute in a meaningful way here. Thank you all!

[Web Dizajner]

I think is all clear, sorry I dont have a time to write manual, but best approach will be:

 

1. Export, edit and import back default template or just open prepared FLA like those from first link.

2. Import bitmap and vector images or create vector images and create movie clips with instance names which are ID for GSAP.

3  Code animation. You can combine (Buttons and other things) because CreateJS library must be included.

4. Publish.

[Carl]

Hi Ithedar,

 

Would a video like this be helpful: 

 

 

We wanted to keep it short and focused on just getting GSAP running in Animate so the intended audience is definitely people that have some experience with GSAP and Animate separately. Any changes you would suggest?

 

watch on youtube

[Web Dizajner]

We wanted to keep it short and focused on just getting GSAP running in Animate so the intended audience is definitely people that have some experience with GSAP and Animate separately. Any changes you would suggest?

One question - When we use only GSAP in Animate CC do we need entire CreateJS library. Can we use just easeljs, preloadjs or tweenjs? Which of that library is required. I mean just for example simple inpage banners without movie, sound, polite loading...

[Web Dizajner]

Yep, I tried, it seem that we must include easeljs, tweenjs and preloadjs.

[somnamblst]

I would recommend tackling Animate first. Then tackling using scripting to move things around. For instance you will probably create a lot of the things you will animate in Animate, with the exception being bitmaps you import or vector graphics you paste from Illustrator. 

 

 

An intro to Animate Lynda.com tute will probably suffice. Plus you get exercise files. Picking apart FLAs is a good way to learn. You will be creating a Canvas doc. rather than an actionscript one but the GUI is the same.

 

https://www.lynda.com/Animate-tutorials/Learn-Adobe-Animate-CC-Animation/475937-2.html