Jump to content
GreenSock

B2rana

Elegant Cross-Fade and Zoom Effect for Banner Rotators and Image Galleries

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

I have converted Flash banner created by @carl schooff into JS version.

I think you peoples like this [ http://02cbcf1.netso...demos/zoomFade/ ].

 

I have a question, is there is any solution to reduce HTML file size? Because HTML file size in this demo is 560.6 KB (including all files such as html, js & images) but in Flash version, SWF size is 131 KB.

 

Once again thanks @carl schooff for wonderful tutorials.

 

You can find @carl schooff's Flash version here http://www.snorkl.tv...-and-tweenlite/

  • Like 2
Link to comment
Share on other sites

I can't tell you how pleased I am to see that. Fantastic!

It runs silky smooth.

 

I don't think it needs to be nearly that big. I'll take a look under the hood in a little bit.

 

Thanks again.

 

Carl

Link to comment
Share on other sites

I think you could get away with compressing the images much more, down to 40kb each as jpgs. Right now they are 60-80kb.

 

The second biggest optimization you could do is use a gzipped version of jquery which ways only 32kb as opposed to 92kb. You can reliably load it off the google's server: http://code.jquery.com/jquery-1.7.2.min.js

 

You can also gzip the TweenMax.min.js file down to 16kb.

Do a google for "how to gzip js" to see if your server supports it.

 

Again, awesome job with that flash to javascript conversion.

Link to comment
Share on other sites

Thanks Carl, for these great tips... :-P

 

One more question is can we maintain same level of smooth animation in IE7 & IE8 without any jerk?

Link to comment
Share on other sites

Unfortunately, IE7 and IE8 are just plain slow browsers, especially when it comes to transforms (x, y, rotation, scaleX, scaleY, skewX, skewY) and there's virtually nothing we can do to resolve that. It's not related to the tweening engine itself. If you want optimal performance on those older versions, I'd recommend avoiding transforms altogether and if you need to animate position, just use "left" and "top" properties instead of "x" and "y" transforms.

Link to comment
Share on other sites

Thanks @GreenSock for your tips...D

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