Jump to content
Search Community

Triggering GSAP code from GWD timeline event

Jeremiah 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

With the demise of Adobe Edge, it looks like I am going to focus on using Google Web Designer as a central GUI animation tool. Having coded using GS in Flash for some time, I am glad that GSAP is easy to bring into GWD, especially since it is hosted on their CDN. I personally preferred Edge but never used GS in it, as I was able to make what I needed most of the time without it.
 
My question is about how I could trigger GS functions/effects using events on GWD timeline. I've tried creating events and calling functions that have TweenLite calls in them, I've tried calling TweenLite directly in the event function and neither one works. If anyone has some guidance on this, it would be very welcome. 
 
Here's an example of the code generated for a timeline event that is currently not firing the tween at 2.1 seconds

<script type="text/javascript" gwd-events="handlers">
        window.gwd = window.gwd || {};
        gwd.scaleCTA = function(event) {
          TweenMax.to(redCTA, 0.5, {
            scale: 1,
            ease: Back.easeOut.config(4)
          });
        };

</script>

I've tried also replacing this with the function call that currently works on rollover to bump the CTA up. 

 

Files are attached. 

Greensock GWD SVG Test.zip

Link to comment
Share on other sites

If you are Flash fluent, why not just go back to what you know? Though I could not personallly kick the tires on GWD, due to Enterprise Security, I have not heard anyone say they like it.

 

http://blogs.adobe.com/animate/

I agree with this suggestion.  If you want to work with an IDE, Adobe Animate (Flash CC) HTML5 Canvas documents are the way to go.  You can do almost all of what was possible in Flash (swf) banners; the only things that aren't really possible right now are blending modes and animating filters.  But none of that is possible in GWD either.

  • Like 1
Link to comment
Share on other sites

While I appreciate the sentiment, and I am no fan of GWD, I work in an agency with several other animators and to ease production and ensure some kind of consistency between people, many of whom are not comfortable with code but are very proficient with Flash/Edge; we need to use a GUI system and with Google/DoubleClick dropping support for Edge and offering little to no support for Animate, GWD is where it is at. 

 

We do rich media and standard work. While the standard stuff is fine in Edge/Animate, rich media is not supported in any way so any questions I have for them go unanswered or I am told to use a different tool by DC Support. Also, Edge does a poor job of animating SVG for scaling, which is where GWD is more accessible and easier to use since you can directly edit code, when needed. 

 

If anyone could please address the question I asked...

 

I wanted to start here first but I'll go check out what's happening on the GWD forums as well.

Link to comment
Share on other sites

 

 

DoubleClick dropping support for Edge and offering little to no support for Animate

 

You may find that no one here is using GWD.

 

I have been using Animate CC for DCM files since Dec. and email a starter FLA and all my publish templates for each ad size to anyone who asks, which means I don't have to touch my HTML files at all. I have used Edge. Like a lot of Flash fluent people I consider Animate superior to Edge..

 

While it is true that DCRM has not created any Animate templates, you can add your canvas elements to the DCRM templates with some tweaking of the CSS, I have done it with the HTML5 In Page Visibility Monitor You Tube Player template.

 

Here is an Animate forum post about creating a DCRM expanding unit while incorporating the Animate Canvas element.

 

https://forums.adobe.com/thread/1666938

  • Like 1
Link to comment
Share on other sites

Thanks for your feedback, I'll see what I can do with Animate. In several ways, I preferred Edge to Animate/Flash since it has a more After Effects style interface. But I can get back into Flash again. I'll dig a little deeper and see what we can put together. 

Link to comment
Share on other sites

As I experienced the HTML5 wild west requires insane amount of javaScript knowledge and lots of tinkering. The good old Flash days are over. I didn't find a tool which is handling all the necessary back end coding/including/linking/asset optimizations. I understand that Your company decided to use GWD which looks a safe choice at first, and You have to work in it. I am sorry if You wont find the solution here because the people are very-very helpful if You ask something about GreenSock. Forgive me, I didn't mean to harm You with my opinion. Maybe it came from the huge frustration what I felt while I was trying to work with GWD.

Link to comment
Share on other sites

As I experienced the HTML5 wild west requires insane amount of javaScript knowledge and lots of tinkering. The good old Flash days are over. I didn't find a tool which is handling all the necessary back end coding/including/linking/asset optimizations. I understand that Your company decided to use GWD which looks a safe choice at first, and You have to work in it. I am sorry if You wont find the solution here because the people are very-very helpful if You ask something about GreenSock. Forgive me, I didn't mean to harm You with my opinion. Maybe it came from the huge frustration what I felt while I was trying to work with GWD.

It is very frustrating

Link to comment
Share on other sites

I was thrilled to return to Flash AKA Animate CC, because I got some of my speed back. I have too many sizes to build, and unpredictably late approvals, for hand coding to be an option.

 

Now that I have templates for each ad size that adds the clickTag var and window open for Doubleclick (DCM)  and a style for each size since I am authoring at 2X. I have eliminated the need to edit the HTML file.

 

I have successfully added an Animate authored canvas element to a Doubleclick Rich Media Youtube player template (DCRM), created ads with multiple canvas elements (bitmap video) and added a Youtube IFrame player to an Animate authored banner, so there are lots of ways to make things work. I would say for Rich Media, if one DCRM template does not play well with createjs, try another. The first YT Player DCRM template I tried, did break, the Visibility Monitor In Page YT Player template did not.

 

The best news, is like the Flash days,once you have an FLA, and an HTML file that works, you can hand it off to the non coding designers, to reuse.

  • Like 2
Link to comment
Share on other sites

  • 2 years later...

I'm in the middle of dogfooding GWD for my own company and recently approached this same question just so I could at least address it in my notes. It is possible, and fairly easy, to integrate GSAP with GWD: 

  • Switch to code view
  • Paste the GSAP CDN in the head along with the other CDNs in there
  • Write GSAP code as you normally would inside a script tag

The issue here to me really comes down to your reasons for needing to do so (does the need and benefit of having a GUI outweigh the clunkiness to process that would result from integrating GWD and GSAP). First of all, the code editor in GWD is far and away inferior compared to almost any other pure code editor, so it's an immediate step down in that regard. Secondly, you have a balancing act now between the GWD css based timeline of animations and what GSAP is doing; it's not impossible to coordinate by any means, but just an extra context switch that really shouldn't be necessary. Thirdly, integrating it into GWD doesn't really gain any advantage from the GUI because all GSAP stuff would still have to be done in code view, so there will still be scenarios where those who are less code friendly will need to either learn it or pass the task to someone who is comfortable in that environment (not to mention that this doesn't help consistency, i.e. someone accomplished an animation in a more complex way with GWD and tons of keyframes, but then someone else accomplishes a similar animation in a few lines of GSAP, and now you have two ways to skin the same/similar cat in your creatives). Finally, just an extra small kink in the hose, it seems that the editor in GWD (design view) doesn't acknowledge any GSAP code; you have to open up a preview to see it work, which can definitely slow you down.

I know this is an old post, and for the sake of the OP I hope it no longer applies to you haha, but in case anyone else is looking this kind of thing up I thought I'd add my long winded reply based on recent experience.

Link to comment
Share on other sites

I still have not tried GWD. I knew we were moving towards Dynamic because Metro Codes determine who gets what. And Google was definitely pushing us to use GWD, offering White Glove support for our first Dynamic campaign built in GWD. So even though Doubleclick offers zero support for anything that involves Flanimate* (Animate CC), I was able to use one of their 2014 HTML5 Dynamic templates to make an Animate sandwich that does Dynamic with your usual enabler.js stuff. Animate just provides the eye candy.

 

I just wish they didn't put so much emphasis on GWD. 

 

That being said, Studio support chat is great.

  • Like 1
Link to comment
Share on other sites

Doubleclick used to be creating templates for Rich Media HTML5. They stopped, when they turned to pushing GWD, and have even removed a lot of HTML5 Rich Media templates from the template database. Pretty telling that their Dynamic templates are from 2014.

 

And all the Study Guides that used to be available for the Certification programs, are no longer available for DL.

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...