Jump to content
Search Community

GSAP into GWD?

thegibbon 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

Does anyone know how easy/hard it is to intergrate GSAP into Google Web Designer HTML5 banners? I've created some test HTML5 banners for a client and they have implied that it's easy to add effects (javascript Snow falling efect for example!). All the HTML5 banners I've seen so far are all quite simple.

 

Does anyone have any info on this? Any help will be gratefully recieved!

 

Thank you!

Link to comment
Share on other sites

I took at stab at this, and I'm pretty sure you can have DoubleClick served GDN banners.

 

I also created a banner in GWD, and got the option for DoubleClick or for AdWords, you mentioned AdWords earlier, so I went and used that template.

 

I took a look a the code and its using the Enabler.js much like my DoubleClick banners in this post: Polite loading GSAP into a DC HTML5 banner

This makes sense because DoubleClick, AdWords, GDN are all Google owned products, so they're sharing much of the same tech.

 

Anyway, I started to look into making it work with GWD, and just followed the steps I would of done in Flash Pro.

  1. Lay everything out on the stage.
  2. Import GreenSock
  3. Write animation code.

So I laid out the assets I had in Design View

 

Switched to Code View and found where all the JS imports where, and placed this below, keeping in line with the syntax.

<script data-source="assets/TweenMax.min.js" data-version="1.17.0" type="text/javascript" src="assets/TweenMax.min.js"></script>

Then I found the banner initialisation code at the bottom gwdAd.initAd(); and placed the animation just after that:

/**
 * Handles the WebComponentsReady event. This event is fired when all
 * custom elements have been registered and upgraded.
 */
function handleWebComponentsReady(event) {
  document.body.style.opacity = "";
  // Start the Ad lifecycle.
  setTimeout(function() {
    gwdAd.initAd();
    animateBanner();
  }, 0);
}

/**
 * Lets put all our animation in one block to use
 */
function animateBanner() {
  var tl = new TimelineLite();
  tl.from(['#joe_midi', '#balloons'], 1.5, {
      alpha: 0
    })
    .to('#balloons', 1, {
      y: "-=200"
    })
    .staggerFrom(['#copy1', '#copy2', '#copy3'], 1.5, {
      x: "-=250",
      ease: Elastic.easeOut.config(1, 0.3)
    }, 0.5);
}

Uploaded to GitHub if thats any easier for people to code check: https://github.com/joemidi/GSAP_AdWords_300x250

GSAP_AdWords_300x250.zip

  • Like 2
Link to comment
Share on other sites

I took at stab at this, and I'm pretty sure you can have DoubleClick served GDN banners.

 

I also created a banner in GWD, and got the option for DoubleClick or for AdWords, you mentioned AdWords earlier, so I went and used that template.

 

I took a look a the code and its using the Enabler.js much like my DoubleClick banners in this post: Polite loading GSAP into a DC HTML5 banner

This makes sense because DoubleClick, AdWords, GDN are all Google owned products, so they're sharing much of the same tech.

 

Anyway, I started to look into making it work with GWD, and just followed the steps I would of done in Flash Pro.

  1. Lay everything out on the stage.
  2. Import GreenSock
  3. Write animation code.

So I laid out the assets I had in Design View

 

Switched to Code View and found where all the JS imports where, and placed this below, keeping in line with the syntax.

<script data-source="assets/TweenMax.min.js" data-version="1.17.0" type="text/javascript" src="assets/TweenMax.min.js"></script>

Then I found the banner initialisation code at the bottom gwdAd.initAd(); and placed the animation just after that:

/**
 * Handles the WebComponentsReady event. This event is fired when all
 * custom elements have been registered and upgraded.
 */
function handleWebComponentsReady(event) {
  document.body.style.opacity = "";
  // Start the Ad lifecycle.
  setTimeout(function() {
    gwdAd.initAd();
    animateBanner();
  }, 0);
}

/**
 * Lets put all our animation in one block to use
 */
function animateBanner() {
  var tl = new TimelineLite();
  tl.from(['#joe_midi', '#balloons'], 1.5, {
      alpha: 0
    })
    .to('#balloons', 1, {
      y: "-=200"
    })
    .staggerFrom(['#copy1', '#copy2', '#copy3'], 1.5, {
      x: "-=250",
      ease: Elastic.easeOut.config(1, 0.3)
    }, 0.5);
}

Uploaded to GitHub if thats any easier for people to code check: https://github.com/joemidi/GSAP_AdWords_300x250

Nice example!  Weirdly, when published from GWD it seems to lose the TweenMax js file & no longer works though... wonder if anybody has figured out a way to prevent that?

Link to comment
Share on other sites

So I published it locally to see what its doing, (I don't have an AdWords account so I can't test that)

 

And it seems to me that it inlines all the loaded JS files inside the index.html, I guess in order to reduce HTTP requests.

<script data-source="TweenMax.min.js" data-version="1.17.0" type="text/javascript">/*!
 * VERSION: 1.17.0
 * DATE: 2015-05-27
 * UPDATES AND DOCS AT: http://greensock.com
 * 
 * Includes all of the following: TweenLite, TweenMax, TimelineLite, TimelineMax, EasePack, CSSPlugin, RoundPropsPlugin, BezierPlugin, AttrPlugin, DirectionalRotationPlugin
 *
 * @license Copyright (c) 2008-2015, GreenSock. All rights reserved.
 * This work is subject to the terms at http://greensock.com/standard-license or for
 * Club GreenSock members, the software agreement that was issued with your membership.
 * 
 * @author: Jack Doyle, jack@greensock.com
 **/

After more playing around, I realised that I couldn't call TweenMax from inside the self-invoking function when I publish the file, not sure why, it worked in the preview!

 

Anyway, I edited the code so the TL is created outside the self-invoked function whilst paused, and inside the ready handler just calls to play the timeline.

 

 

Updated the files on the Git: https://github.com/joemidi/GSAP_AdWords_300x250

Edited by joe_midi
  • Like 2
Link to comment
Share on other sites

One thing I noticed with at least some of the GWD templates is you can simply use them by editing in an HTML editor. I don't actually have GWD (corporate security frown on freeware)

 

That worked for the Inpage Banner with Swipeable Gallery Component (320x480)

 

htttp://motifcdn2.doubleclick.net/EMEA/dc_templates/live/preview/gwd/DCRM_Inpage_banner_with_Swipable_Gallery/DCRM_HTML5_inPage_Banner_with_Swipeable_Gallery.html

 

But not at all for the Inpage banner with YouTube component (300x250).

 

I could not change the video from the default DC youtube video despite editing the video ID, and could not find any other reference to it.

Link to comment
Share on other sites

  • 11 months later...

I have a problem using GSAP in GWD.

 

I understand now we can use Google-hosted Greensock.

 

I added link in <head>

 
I added
  <script type="text/javascript" id="gwd-init-code">
 
     TweenMax.to('#logo', 1, {left:50});
 
My logo positioned to left:50px but it doesn't tween. 
 
This happen only when I publish "inline local files" ticked. 
 
Does anyone know how to do this? 
Link to comment
Share on other sites

hi astone, 

 

I saw a single post from you yesterday in a new thread that only said "this issue has been solved". I assumed you were referring to this.

If you still need help you may want to simplify your project as much as possible (remove everything not related to the issues), zip your GWD files and post them here (click the "more reply options" button to add attachments).

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