Jump to content
GreenSock

cerulean

GSAP & older browsers

Go to solution Solved by Rodrigo,

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 was bidding on a project today and requested to use GSAP as my Javascript animation engine (they had originally said CSS transitions).  

 

The one question they had was 'how far back' GSAP goes — that is, will it work in IE9, IE8, and other older browsers?

 

I had never thought of this and didn't know the answer.

 

Also they wanted to know if GSAP 'degraded gracefully'.  If GSAP doesn't work on all older browsers, how do I handle that?  I know Modernizr can be used (or could be used) to provide fallbacks, but I don't know that it has a test for Greensock.  What would I test for?  Are there polyfills?

 

Thanks for any info!

Link to comment
Share on other sites

As stated in GSAP homepage

 

 

Compatible
HTML5, jQuery, Canvas, CSS, new browsers, old browsers, RequireJS, EaselJS, mobile, and more – GSAP gets along with them famously. Use your favorite tools without jumping through endless hoops to ensure compatibility. It even accommodates various transforms (scale, skew, rotation, x, and y) in modern browsers plus IE back to version 6 without requiring clunky browser prefixes and hacks. We worry about compatibility so that you don’t need to.

 

http://greensock.com/gsap

  • Like 2
Link to comment
Share on other sites

Hi cerulean  :)

 

GSAP as a javascript library works on all browsers that support JS ;

actually you should to test the browsers features support with Modernizr , like CSS3 Transform or other css features , svg , canvas ,ect...

 

pls check this codepen demo with a modern browser and then IE9 / 8 : 

 

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

 

http://modernizr.com/

 

and you can check the browser features support information here :

 

http://caniuse.com/

  • Like 1
Link to comment
Share on other sites

  • Solution

Hi,

 

Personally I've used GSAP in some projects, supporting even IE7 without any issues.

 

As Diaco points, you just need the right combination of tools in order to make things work as expected.

 

Using modernizr you can create simple tests that return boolean values, based on those you can create different config objects for GSAP instances, like this:

//first test for CSS 3D Transforms support
var supports3D = Modernizr.csstransforms3d;

//then create a config object based on the result of the test
var instanceConfig = supports3D ? {rotationX:180, rotationY:180, autoAlpha:0} : {x:200, y:200, autoAlpha:0};

//finally use the config object in a GSAP instance
TweenLite.to(element, 2, instanceConfig);

//So if the browser supports 3D transforms you'll see a cool rotation in two axis with a fade out
//If the browser doesn't supports 3D transforms you'll see a not-so-cool flat motion with a fadeout

You can do the same also using IE conditionals in the HTML in order to create different alternatives as well, but it's better to stick with modernizr, is far more reliable.

  • Like 2
Link to comment
Share on other sites

  • 3 months later...

Hi Rodrigo,

thanks for this example.

 

I am having the same issue where I am using a 3d transform (rotationY) + gradients + background sprite hover and would like to be able to provide a fallback with a swf file for example if the browser (IE8/IE9/IE10) doesn't support these features.

 

I went to the modernizr.com page, downloaded a production build js file with the EXTRAs preselected (like Modernizr.load) but I am not sure how to go from there since Javascript is not my strong suit.

 

I checked your post here but am not understanding exactly how to solve for serving a different file (instead of serving a different css as your example). So if the feature is supported I would assign my js file location and my CSS file loaction for "yep" that have the CSS 3d animations. And for "nope", would I just do the following for example?

<script>
Modernizr.load({
	test: Modernizr.csstransforms3d, Modernizr.cssgradients, Modernizr.csstransforms, Modernizr.csstransitions,
	yep : ['scripts/css3dYep.js', 'styles/css3DYep.css'],
	nope: ['myFlashBackup.swf']
});
</script>

I selected the following features to be checked. My question is if the above code would take care of checking the support?

See screenshot here

 

Thank you!

 

});

Link to comment
Share on other sites

HI Diaco,

yes I guess I could just show and hide a div that either shows css or a Flash animation, but but I just wanted to accomplish is load a complete separate swf file directly (not within an html doc). This is because the html will be served via a trafficking platform and as long as the swf resides in the same directory it should work. Just not clear as to how to accomplish this with as little code as possible. Any reason as to why the above code wouldn't work? Thanks!

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