Jump to content
Search Community

Banners made by js and gsap

cartimundi 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

Hello, i am enjoying my first steps in code.

 

i'm making weekly (simple) banners for our website (seatsandsofas.nl /.be /.de ( by using plug-in for our wordpress site)

Before i make them in adobe edge, with use of the timeline.

 

My wish was quicker, smoother and less kb, the next step was, positioning in edge and the animate just by code in ja and gsap.

But now i have Some little problems in wordpress and the plug-in edge suit.

 

So, my Major question is, can i make them completely with ja and gsap.

 

What is want (see the sites above) a 960x500 animation which is responsive.

A background with vorming and going sofas with our weekly prices. Which can be import in a wordpress site.

 

Will that be possible?

Or has anyone has an Example?

 

(Yesterday i've surfed the forum and codepen examples, but didn't found something like a banner, i found more completely sites or pages. What i did found, is how i can put images online, to use them with codepen and Many fantastisch animation, so i'm very enthousiastic to Gent on with gsap :-)

 

Grt marcel

Link to comment
Share on other sites

Hi cartamundi  :)

 

for responsive layout pls read this :

 

http://greensock.com/gsap-1-13-1

 

and for banner example pls check these out :

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

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

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

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

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

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

  • Like 3
Link to comment
Share on other sites

To add to Diacos great links..

 

Here are also some Banner Ad makers created with GSAP:

 

BannerFlow: http://www.bannerflow.com/

HTML5 Maker: http://html5maker.com/

 

Here is an article by the Mighty Carl on a GSAP animated banner ad:

 

Banner-style Animation with GreenSock-powered JavaScript

 

And this codepen:

 

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

 

Hope these links are useful :)

  • Like 2
Link to comment
Share on other sites

Wow, Jonathan, you're digging deep into the archives with that Snorkl / HTC one. Even I forgot about that. Nice job!

 

 

Cartamundi,

 

Edge is not at all necessary for creating GSAP animated banners.

Yes, it may help you with layout / initial positioning of your divs, images, text etc, but its a convenience that comes at a price of additional filesize.

Our friend Chris Gannon, loves working in Edge and makes wonderful GSAP-things with it: http://codecanyon.net/user/chrisgannon/portfolio?WT.ac=item_portfolio&WT.z_author=chrisgannon

 

However, for simple banners that you intend to animate with GSAP, you may find that Edge creates "too much extra stuff".

 

Awhile ago I tried Google Web Designer http://www.google.com/webdesigner/and I found it to be a decent tool for general layout that created CSS that was clean and easy to work with. I was not at all happy with its animation capabilities. You might want to give it a try (its free) and see if it works for you. 

  • Like 4
Link to comment
Share on other sites

hello everyone, thanks a lot, i'm gonna watch all of it!

 

The second step is making beter animations

and the third step is without Edge, i think, it's making a skin around it, what causes some problems...directly in html/css/js should gives maybe less problems.

 

thanks again everyone, i'm gonna jump in it...( and keep following gsap/and this forum)

Link to comment
Share on other sites

  • 5 months later...

HI guys,

this is pertaining to banner ad animation: (for example

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

)

 

 

When I review all the banner examples, all of them use variables that are assigned to CSS id elements.

 

For example, instead of writing:

var car = document.getElementById("car"),
and then:

tl.to(car, 1, {left:177, ease:Back.easeOut})
Wouldn't it be easier to skip all that extra code and go straight into setting up the animation like so, skipping the variables all together, since the TweenMax lib is used?

tl.to("#car", 1, {left:177, ease:Back.easeOut})
Or am I missing something here? Thanks!
Link to comment
Share on other sites

Great question.

 

My general rule is that if I am animating something more than 2 times I will create a var reference for it.

The thing to keep in mind is that everytime your JS needs to find a DOM element it takes some amount of CPU resources so it is generally best to minimize the amount of DOM searching that takes place. 

tl.to("#car", 1, {left:177})
  .to("#car", 1, {left:50})
  .to("#car", 1, {rotation:360})
  .to("#car", 1, {top:0})

In the animation above, GSAP needs to search the DOM for an element with an ID of car 4 times, so some could argue that would result in a performance hit. Keep in mind though that finding "#car" ONLY happens when the timeline is first created. You can play that timeline 1000 times, and it never needs to look for "#car" again.

 

The above example would be better written like this

var car = document.getElementById("car");
tl.to(car, 1, {left:177})
  .to(car, 1, {left:50})
  .to(car, 1, {rotation:360})
  .to(car, 1, {top:0})

How much faster will it run? Probably wouldn't even be noticeable, but with mobile devices especially, every bit counts.

  • Like 5
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...