Jump to content
Search Community

Using GSAP with Google Web Designer and 3D assets

peterK 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

Colleagues,

I am interested to utilise GSAP with Google Web Designer, and in particular to have the ability to import and animate 3D assets created in, for example, SketchUp Pro. Two questions:

 

1. Is there any guidance available on using GSAP within GWD?

 

2. What is the best way to use 3D assets and animate them within GSAP?

 

Appreciate whatever starters you can throw at a newbie! :)

 

Peter

Link to comment
Share on other sites

Hi and welcome to the GreenSock forums,

 

Sorry I'm not familiar with sketchup or how it renders 3D objects on a webpage. By looking at the interactive example on their homepage: http://www.sketchup.com/ it appears they are rendering everything to <canvas>. 

 

I think a big first step is going to be researching how to get a 3D model into your html. I really have no idea how sketchup recommends that you do that. 

 

The good news is that GSAP can animate any numeric property of any JavaScript object. So if sketchup has an API that exposes properties like x, y, z, rotationX you should be able to animate those values. 

Link to comment
Share on other sites

Ive played with Google web designer and since they use css to animate. Correct me if Im wrong but then it really only serves as a placement tool, after which you code by hand with greensock. At that point I feel its better off just starting from scratch. imo

  • Like 2
Link to comment
Share on other sites

  • 1 month later...

alwayzambitious is correct that in using GSAP with GWD, the GWD interface serves mainly as a layout tool for the banner.

 

This process is fresh in my mind, so here's a mini-tutorial to help you get started:

 

1. STAGE LAYOUT:

  • Create a new banner in GWD at the desired size,
  • Place your assets on the stage, putting the layers in the deisred top-to-bottom order.
  • Then, using the Properties panel, give each element an ID, just like you would for Flash or HTML/CSS. These IDs will be used in your GSAP js code later on.

 

2. ADD A TAP AREA WITH CLICK TAG: (OPTIONAL)

  • This element is for when someone taps or clicks the banner or button to go to the destination page.
  • From the Components panel, drag a Tap Area onto the stage on top of everything. Generally this is resized to cover the whole stage, but it can also be for a smaller call to action element on the banner.
  • Usually media vendors will require a 'clickTag' for the Tap Area, just like for Flash banners:

On the Events panel, click the '+' in the bottom left to make a new Event that will be associated with the Tap Area.

Going through the dialog to make an Event, set the following:

  • Target: Target -> gwd-taparea_1 (that's the default id GWD makes for the first TapArea you add to the stage),
  • Event: Tap Area -> Touch/Click,
  • Action: Google-Ad -> Exit,
  • Receiver: gwd-ad,
  • Configuration: Metric ID -> clickTag, and URL -> any base URL for the destination page (this gets overridden with a tracking link by the media folks).
  • Then click SAVE on the Event dialog.

 

3. ADD A TRIGGER EVENT FOR YOUR GSAP CODE:

On the Events panel, click on the '+'  then use these settings for the dialog:

  • Target: Target -> 'page1' (that's the default name GWD gives to the initial state of the banner).
  • Event: Page -> Page loaded,
  • Action: Custom -> Add Custom Action.
  • For the new Custom Action, give it a name like 'animation'. GWD will put 'gwd.' in front of it in order to keep it in the same namespace as the rest of the banner code. In the space provided for the function code, just add a javascript comment for now. Your GSAP code will go there later.
  • Click SAVE on the Event panel.

 

4. ADD YOUR GSAP CODE:

  • Save the GWD project and close it, then open the .html file that was generated by GWD in your favorite text editor (or use GWD's built in Code View)
  • Add <script> tags to the html to import the GSAP libraries you wish to use.
  • Find where your Custom Action function was created ('gwd.animation' for example) and put all of your GSAP-related code inside that function, including any 'helper' functions.
  • At this point it is just like creating a GSAP animation on a web page, except GWD has done the initial setup and layout for you.
  • Note that the GWD timeline Play button will not trigger your GSAP animation. You must use the Preview function to execute the code in a browser instead.

 

Hope that helps!

  • Like 8
Link to comment
Share on other sites

IMO the biggest issue the banner ad creators who were using Flash will have to contend with is reporting. The clickTag syntax Flash used dynamically generated the correct URL and reported. Being on the creative side we had a tendency not to have to know about what was going on, on the back end.

 

If you want to use GSAP I would use it inside one of the Doubleclick studio templates using an HTML editor. GWD is really more for people who don't want to or can't code.

 

DC enabler.js allows you to track click throughs and other event interactions. Hard coding URLs is not how advertising is done.

 

Here are DC templates filtered for HTML5 and polite. 

 

 

You can also filter for GWD templates some of which can just be edited with an HTML editor. I modified the 320x480 Swipe Gallery just using Dreamweaver.

 

http://www.richmediagallery.com/tools/template-database#filterTplDb:464%2C402~

 

And here are the In App banner templates. 

 

http://www.richmediagallery.com/tools/template-database#filterTplDb:464%2C407~

 

As you can see there is much to consider.

 

Another vendor I really liked but could not get my company to sign a contract with was AdForm.

  • Like 7
Link to comment
Share on other sites

Just remembered that Google Web Designer (Doubleclick's ad building product) has a 3D object template

 

http://storage.googleapis.com/rm-cts/normalization/GWD_Objects3D_Katamari/preview_ad-in-a-box.html

 

I have noticed an uptick in questions about HTML5 ad creation as the Chrome announcement I am sure, took many Flash ad builders by surprise.

 

Maybe a cheat sheet designed for basic staggered animations similar to the standard Flash ad would help coding newbies to  use GSAP.

 

For instance I took this Codepen and modified it to be an advertising message for retail by modifying the image assets and changing the text that is animated.

 

What I was unable to do with my limited klnowledge, is slow it down long enough to be read by users. Any duration in the code was for transitions, not pauses.

 

See the Pen lEiAv by GreenSock (@GreenSock) on CodePen

 

 

  • Like 1
Link to comment
Share on other sites

Fortunately, GSAP is heartily supported by the major ad-media players, and using the full TweenMax library (from CDN) is not even counted against the file size for most of them.

 

Basic GSAP how-to's for each of the popular ad banner-generating apps are going to be in high demand.

  • Like 1
Link to comment
Share on other sites

I agree dmcknight. Doubleclick appears to have templates for just about anything, including specific publishers. I wonder if they would be open to some GSAP specific ad templates with basic sequential animations that emulate typical Flash animation advertising, i.e text and images that convey a message. That could make GSAP the preferred choice for the Flash banner ad creators that are scrambling to meet the September Chrome deadline for click to play Flash ads.

 

I am somewhat of a third party ad vendor guru, built my first Pointroll high impact ad in 2005 and began kicking the tires in the Doubleclick Studio rich media space in anticipation of the HTML5 conversion in 2013. I also am pretty versed in rich medai ad specs.

 

IMO the HTML5 wave will lead to better and more interactive advertising.  Anyone want to collaborate on some DC enabled GSAP powered ad templates?

 

Not to say that any vendor is better than the others. I only know what I've personally kicked the tires on. I also like AdForm. And I saw a banner ad pen yesterday that used GSAP, that had the Eye Blaster/MediaMind initialization. Celtro is another vendor that gets mentioned a lot.

  • Like 1
Link to comment
Share on other sites

  • 3 years later...

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