Jump to content
GreenSock

cartimundi

very very basic...but it's killing me..

Recommended Posts

Does anybody see, what is going wrong....?

 

i want to create a very simple animation with 3 blocks overlapping each other..by transparency or moving...

 

The start must be a white, background and then a fade in of the first image....

but when i start the animation...i get a flash of the first image...and then the fading from white to the image...

 

i don't understand where the flash comes from...

 

grt

 

See the Pen gpZprJ by cartamundi (@cartamundi) on CodePen

Link to comment
Share on other sites

i think i've got it...

 

i was missing the tl;

 

var $ = Sizzle,

  $panel1 = $("#panel1"),
  $panel2 = $("#panel2"),
  $panel3 = $("#panel3")
tl;              // this was missing //
Link to comment
Share on other sites

Hi,

I don't understand your code. Why do you set different top px to each background image? I thougt you would overlapping the images. Like a simple slider animation, or?

Link to comment
Share on other sites

You're right...( after tl; problem...) i was hitting the overlap problem...

 

i'm a little (baby) step further

 

See the Pen MwZwGv by cartamundi (@cartamundi) on CodePen

 

But a a newbie i'm happy with those mini steps...

 

i have also saw a lynda.com course of gsap and the gsap course of ihatetomatoes...but most of the times...they are a few steps ahead of me...

 

But i don't give up..

 

all help is welcome..

 

( as you can see, my codepen is very easy...but when i get the slides animate as i want...the only thing what i have to do, is fill it in with images...)

Link to comment
Share on other sites

Hi cartamundi, everyone starts with baby steps, nothing wrong with that.

 

Great to see that you are giving it a go.

 

Looks like you've already sorted your code out, but watch your html, there is an extra closing div that might cause some issues in older browsers.

 

Here's the fade in/out fork of your pen, with fixed html.

 

See the Pen 5860a342695e7da0a1225acaf218d622 by ihatetomatoes (@ihatetomatoes) on CodePen

  • Like 1
Link to comment
Share on other sites

Great work Cartamundi and ihatetomatoes!

 

Given that banner advertising is not permitted to loop forever, 3X or 15 seconds, how would you stop this?

Link to comment
Share on other sites

There is a repeat setting in the TimelineMax setup.

var tl = new TimelineMax({
  delay: 0.5,
  repeat: 2,
  repeatDelay: 2.5
});

Set it to 2 and it will play once and repeat twice, so playback is 3 times in total.

  • Like 2
Link to comment
Share on other sites

Hello,

 

my steps are getting bigger...

and i have already an animation what is was hoping for..

 

See the Pen aOPQEx by cartamundi (@cartamundi) on CodePen

 

 

-What do i have to do, to use it for Adwords...and what are the traps? or the advices? <150kb 

 

-After that, i have to made them in several measurements..

  • Mobile leaderboard (320x50)
  • Large mobile banner (320x100)
  • Small square (200x200)
  • Square (250x250)
  • Medium rectangle (300x250

are there any tips for a quick workflow? or is it, build them from scratch for each item?

Link to comment
Share on other sites

ihatetomatoes; i also don't like them...and i hope with this steps, to get into your course again...

 

because i'm a newbie in code...( a little bit html/css and none in javascript) the begin of the course was hard..

 

but i think or hope that javascript with gsap will be as big as flash...and maybe the standard for online animations...

so this will be daily work... ;-)

  • Like 2
Link to comment
Share on other sites

Sorry i mean...

 

-What do i have to do, to use it for Adwords...I MEAN Google Display Network..

 

does anybody can see my codepen....?

 

it is a forked(?) one...i don't know how i get it to a saved version ;-(

Link to comment
Share on other sites

Hi cartamundi,

 

I see your banner here: http://codepen.io/cartamundi/pen/aOPQEx

 

Very nice.

 

As for getting it into Google Display Network, I think you will have to reach out to Google or whomever is managing the media buy for specs and instructions.

http://www.google.com/ads/displaynetwork/

 

From I can tell (by looking quickly) they don't offer many rich, HTML5 options.

 

For more rich and animated ads, you may want to look into using DoubleClick

Link to comment
Share on other sites

hmmm okay..

 

the end of the road isn't near ;-(

 

i thought i make a banner in html5(css/javascript) with gsap, export the banner and send it to google...

 

NOT(*$($*@!*$) very big ;-(

 

For as i can see now:

 

GDN, hasn't much animations possibilities?

and for more i have to use DoubleClick...is that a program or workaround like Google Web Designer, with more techniques?

 

 

Behind the scenes i'm gonna look, and hoping to find some answers...which i'm gonna post..

 

ps. nothing for the gsap site? besides how to make banners, a workaround, how to get that banners online...

 

( for now we only use static banners on GDN...with animation the banners get more information and better positioning..)

Link to comment
Share on other sites

I can understand your frustration. You are not alone.

We recently launched a survey about HTML5 banners and here are some of the results

http://codepen.io/GreenSock/full/VLVWoW/ (which we intend to publish shortly).

 

As you can see, there is lots of confusion.. mostly around different specs from different networks and publishers, or worse yet, a total lack of specs. 

 

We have a very comprehensive article relating to the current state of html5 banner production woes (and our solutions) near-ready to publish as well (stay tuned to the newsletter, twitter and facebook). 

 

We have also reached out to a handful of the top networks for feedback.

 

I think this article will do a lot towards moving the conversation forward and making H5 banner production easier. 

This is new territory for a lot of people and we are doing our best to find the solutions and resources that will help everyone.

  • Like 1
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.
×