First GSAP animated banner for Doubleclick completed

[somnamblst]

I wanted to create a starting point for people who need to learn GSAP for animated banners. I started with the Codepen example with the blue and red boxes that move left to right. 

 

I created what I thought would be fairly typical for an animated Flash ad re-imagined as an HTML5 animated banner. I have a logo that starts large, and retreats to the bottom right corner smaller, followed by a product image that appears (opacity) and two blocks of copy, followed by another image and a CTA button (opacity)

 

I would be interested in GSAP gurus weighing in as to whether I did the GSAP part in the correct way. My  HTML file is attached.  I have nowhere to host the images so they will be broken

var tl = new TimelineLite();

tl.to('#logo', 2, { y: 110, x: 110, scale:0.30 }, '-=3.5')

tl.to('#firstCopy', 1, { x: 300 },  '-=1.5')

.to('#secondCopy', 1, { x: 290 }, '-=0.5')

tl.to('#product', 1, { opacity:1 }, 1)

tl.to('#final', 1, {opacity:1 },3)

tl.to('#cta_button', 1, {opacity:1 },4);
    

I could not figure out how to have the second copy leave and be replaced by third copy

 

I do have have it uploaded to Studio and it looks fine and does click through.

DCRM_HTML5_polite_GSAPanim_300x250.html

[Rodrigo]

Hi,

 

Nice job!!

 

Although is rather hard to get a good idea of what you're after without the images, next time try uploading a complete ZIP file with all the assets or create a Codepen demo.

 

For the GSAP part, the only advice I can think of, is to use the shorthand methods for the timelines. Keep in mind that most GSAP methods return the instance they're applied to, so you can chain methods, so basically your code would look like this:

var tl = new TimelineLite();

tl
  .to('#logo', 2, { y: 110, x: 110, scale:0.30 }, '-=3.5')
  .to('#firstCopy', 1, { x: 300 },  '-=1.5')
  .to('#secondCopy', 1, { x: 290 }, '-=0.5')
  .to('#product', 1, { opacity:1 }, 1)
  .to('#final', 1, {opacity:1 },3)
  .to('#cta_button', 1, {opacity:1 },4);

$('#restart').click(function () {
    tl.restart();
});

See that?, simpler, shorter and easier to read.

 

Also I noticed that the GSAP code is executed asynchronously with some of the DoubleClick code perhaps, but I get the idea that the timeline has started before all the assets are visible (or perhaps this is due to the images' missing). Anyway, perhaps you could use some sort of callback in order to start your GSAP code as soon as every DoubleClick stuff is loaded and ready.

 

Anyway, I created a simple codepen with your sample but replaced the images with colors:

 

See the Pen eNogWR by rhernando (@rhernando) on CodePen

 

Happy Tweening!!

[Carl]

Yup, I'll echo Rodrigo's sentiments as well. It's definitely helpful to see all the code, but without the images it is a little difficult to really know what is happening.

 

I think if a polite load is involved you are going to want to wait until the politeInit() function is fired before running your timeline.

I'm not 100% clear on what external files were being loaded in that file, but you may want to or need to wait for them to load as well before you tell the timeline to play(). 

 

Is there a way you can share a preview link from DoubleClick studio so that we can see the finished result? 

 

Thanks so much for contributing!

[somnamblst]

Thanks for the tips!

 

I created generic images because I wanted this to be something other banner ad creators could use as their base file for their first Doubleclick in page 300x250 banner. 

 

Here is the preview link.

 

https://doc-0k-8k-adspreview.googleusercontent.com/preview/9o5bees06oeguhr10neq55qcti27eh7n/r726bnh62s0qjouai570p57vi1v6765d/1434888000000/37822212/previewuser/ads-richmedia-studio.fad0ca39452afdc5e8805c83a0708176?previewId=local&hl=en-US&richmedia=true&zx=evo5vjiqga52&render=blank&accessKey=2b9b9d2fc137fdf2bb82bd923aedfa49

[Carl]

Very nice, Somnablst. Thanks for sharing!

[somnamblst]

I think it would be helpful, and i would certainly be willing to contribute, some very basic, easy to modify (comments) vendor specific banner examples that Flash banner creators who did not do much actionscript and did not use Greensock to tween their Flash ads, could use as  starter templates. I also think a couple very basic step by step tutorials would help, so that GSAP does not seem so intimidating.

 

I am more of an art head than a math head, so I am scouring codepen and modifying codepen examples to build up my own repository, sort of like I used to do with Flash where I collected FLAs to learn from and modify for my own use.

 

I am lucky that I came from HTMl/CSS before Flash so the CSS part is easy for me. That probably is not true for some Flash users who are suddenly being confronted with defining fonts and positioning elements by pixel.

[celli]

Hi Carl,

 

You mention that you might want to "...wait for them to load as well before you tell the timeline to play(). "

What would be the best approach for this ? Using CSS visibility:hidden and then autoAlpha in the GSAP timeline for elements ? or is there a better way since you say waiting specifically for the "...politeInit() function is fired"--how would we write that, if that is the better approach ?

[Carl]

Yes, I would do all my GSAP related code in the politeInit() method. Inside that method I would use a tween to fade the banner in from an autoAlpha of 0. 

TweenLite.from(".banner", 0.5, {autoAlpha:0);