Jump to content
Search Community

Can I make animations that degrade gracefully?

styke 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

HI there, I'm new to this amazing plugin and can't wrap my head around a small detail. Say I would like to animate an element's rotation. I want to do it so that it will animate smoothly on mobile devices - so I call TweenLite (with the CSSplugn) like so: 

TweenLite.to('.wheel-container', 2,  {rotationZ:360, scale: 1})

I remember reading somewhere that in browsers that don't support a certain way of animating, GS uses a different method to animate the element. Yet now reading the documentation it says: 

 

 

In browsers that don't support 3D transforms, they'll be ignored. For example, rotationX may not work, but rotation would. See http://caniuse.com/transforms3d for a chart of which browser versions support 3D transforms.

 

Of course I could just test it myself, but I am currently unable to do so and I need answers fast! 

If GS does not do this, then could anyone suggest a convenient way of calling the animations according to the users' browser capability? Or will I simply have to detect and call myself accordingly? Thanks!

Link to comment
Share on other sites

Hello,

 

Here is a list of browser support for transform 3d:

 

http://caniuse.com/#feat=transforms3d

 

Here is a function that checks if the rotate3d() transform function is supported:

// Check for Transform3D support - rotate3d()
function hasTransform3D() {

     var div = document.createElement('div'),
         transforms = {
              'Transform': 'transform',// default
              'WebkitTransform': '-webkit-transform',// chrome and safari
              'MozTransform': '-moz-transform',// firefox
              'OTransform': '-o-transform',// opera
              'MsTransform': '-ms-transform', // ie
              'msTransform': '-ms-transform',// ie10							
              'transform': 'transform' // ie10 other build
         },
         has3D;

     document.body.insertBefore(div, null);
     for(var t in transforms) {
          if(div.style[t] !== undefined) {
               // change this to the CSS transform sub property
               // your checking the browser against
               div.style[t] = "rotate3d(0,0,0,90deg)";
               has3D = window.getComputedStyle(div).getPropertyValue(transforms[t]);
          }
     }
     document.body.removeChild(div);
     var output = (has3D !== undefined && has3D.length > 0 && has3D !== "none");
            
     return output;
}

and this is how to use it:

// usage
var hasRotate3D = hasTransform3D(); 
if(hasRotate3D){
      // rotate3D is supported
} else {
      // rotate3D is NOT supported
}

With this function you can change the CSS style transform function you are testing against.. in this case it is testing for rotate3d(0,0,0,90deg).

 

rotate3d(x, y, z, angle)

 

The above function could also be modified to check for various CSS transform 3d functions like translate3d, scale3d, skew3d, etc..

 

I hope this helps! :)

  • Like 1
Link to comment
Share on other sites

Hello,

 

Here is a list of browser support for transform 3d:

 

http://caniuse.com/#feat=transforms3d

 

Here is a function that checks if the rotate3d() transform function is supported:

// 

and this is how to use it:

// usage
var hasRotate3D = hasTransform3D(); 
if(hasRotate3D){
      // rotate3D is supported
} else {
      // rotate3D is NOT supported
}

With this function you can change the CSS style transform function you are testing against.. in this case it is testing for rotate3d(0,0,0,90deg).

 

The above function could also be modified to check for various CSS transform 3d functions like translate3d, scale3d, skew3d, etc..

 

I hope this helps! :)

 

I actually have that exact function in my code already! It just annoys me to no end having to rewrite animations for different browsers, things get confusing fast. I was hoping GS would handle some of that manual work for me. Im building a very animation heavy site so having these all over the place gets a bit messy. I'd even settle for some clever organizational ideas. Thanks for your input though!

Link to comment
Share on other sites

Yes, as stated in the docs, browsers will ignore 3D transforms if they are not supported. 

 

Perhaps you are mixing up 3D transforms with other properties that GSAP can simulate in older browsers such as opacity. For instance IE7 does not support the opacity CSS property, but in that case GSAP will use one of those horrible ms filters like: filter:  alpha(opacity=100);

 

If checking for the presence of 3D support is too cumbersome, a good safety measure is just to tween a property that all browsers will support like opacity or scale (similar to what you are doing)

 

I often will do something like this

TweenMax.staggerFrom(aBunchOfThings, 0.4, {rotationX:-90, opacity:0}, 0.2)

So browsers like IE8 will at least have a staggered fade in animation and modern browsers get the added bonus of the 3D effect.

 

Its best to treat 3D as a "nice to have" and not make those effects critical to the final layout of your assets. 

 

It just rustles my jimmies to no end having to rewrite animations for different browsers, things get confusing fast. I was hoping GS would handle some of that manual work for me. 

 

 

Are you suggesting that GSAP does feature detection each time a tween is created and then auto-generates a substitute tween when the detection fails? Unfortunately that would damage performance and most likely produce unwanted results.

  • Like 2
Link to comment
Share on other sites

Are you suggesting that GSAP does feature detection each time a tween is created and then auto-generates a substitute tween when the detection fails? Unfortunately that would damage performance and most likely produce unwanted results.

 

Yeah... I guess I got a little too hopeful in the face of the vast feature set of GSAP! That makes perfect sense, thanks for your reply. 

Link to comment
Share on other sites

Something i Would suggest is to have something like :

 

[ pseudocode ]

var is3DSupported;  //Boolean --> true or false, just one browser detection
var animObj; //just holders


if(is3DSupported){
animObj = {rotationZ: 60}
} else {
animObj = {alpha: 1}
}


TweenLite.to(elem, time, animObj);

 

You could predefine some animations, and then just use them later ( without detecting/rewriting every time ). This would keep your code tidy. 

  • Like 2
Link to comment
Share on other sites

Hi,

 

Yet another possibility is using modernizr to detect the browser's support for certain properties, 3D transforms in this case, and based on that test create the tweens or load the script according to the browser.

 

First include modernizr between the head tags in your document, best thing is to do it before every other script:

<script src="scripts/modernizr.js"></script>

Then you have two options, first you can create the tweens depending on test result:

Modernizr.load(
{
  test: Modernizr.csstransforms3d,
  yep : function()
  {
    //create tweens that for 3D support
  },
  nope: function()
  {
    //create tweens for browser that doesn't support 3D transforms
  }
});

The second option, which is the one I'd recommend you, is to create separate js files and load them as a result of the test:

Modernizr.load(
{
  test: Modernizr.csstransforms3d,
  yep : 'scripts/site.script.3d.support.js',
  nope: 'scripts/site.script.NO.3d.support.js'
});

Why I recommend this option because is quite usual that any site or app will have more than one animation, therefore the amount of code will be more than a couple of lines, like this you don't force users with modern browsers to load the code for other browsers, also helps you modularize your codes (which in some scenarios is a very good idea) and you'll learn more about how to use both modernizr and yepnope (a conditional loader included in modernizr) which are great libraries.

 

The direct link to modernizr with the 3D support detection is the following:

http://modernizr.com/download/#-csstransforms3d-teststyles-testprop-testallprops-prefixes-domprefixes-load

 

Go to the bottom of the page and copy the code in the box, it weights a little more than 6 kb, and if you can GZIP it it goes down to 3 kb so it loads and executes very fast.

 

Also as you can see there are quite a handful of things you can do with both libraries so give them a try and I can assure you that you'll love them.

 

Rodrigo.

  • Like 4
Link to comment
Share on other sites

Something i Would suggest is to have something like :

 

[ pseudocode ]

var is3DSupported;  //Boolean --> true or false, just one browser detection
var animObj; //just holders


if(is3DSupported){
animObj = {rotationZ: 60}
} else {
animObj = {alpha: 1}
}


TweenLite.to(elem, time, animObj);

 

You could predefine some animations, and then just use them later ( without detecting/rewriting every time ). This would keep your code tidy. 

 

I wish I'd read this yesterday! Fantastic idea, thanks so much.

Link to comment
Share on other sites

I prefer this way, because you keep the logic ( where animations should be ) and you just create different animations with/without the 3D effects... But keep the logic. It would be great to post here your final project :) Also, note that you'll probably have to create in/out animation object for every type of animation :( It is more work, but I suppose - better results. 

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