Best Approach for Conditionally Disabling Tweens

[sxp6200 1 Likes (Newbie)]

Hi Everybody,

 

Can you share your approaches for conditionally disabling tweenlite/tweenmax tweens? 

 

For example, I have some divs sliding in from the left on a desktop site, but for a width less than 720px i'd like to disable the animation.

 

Any example code, ideas would be very helpful.

 

Thanks!

[Rodrigo 2,662 Likes (Superhero)]

Hi and welcome to the GreenSock forums.

 

The most simple approach, if you already have determinated the browser viewport size, is to call a function that executes the tweens, if the width is bigger or equal than 720:

// I'm assuming that you're getting this value
var viewPortWidth = value;

function executeTweens()
{
  if(viewPortWidth >= 720)
  {
    //code to play tweens
  }
}

If you don't have a specific method to get the viewport width, well that'll depend if you're using jQuery or another library that takes care of the crossbrowser issue, you should look in their respective API to know how to get it. In jQuery using the width() method on the window element is enough:

var viewPortWidth = $(window).width();

If you're not using a library, you could take a look at this:

 

http://stackoverflow.com/questions/1766861/find-the-exact-height-and-width-of-the-viewport-in-a-cross-browser-way-no-proto

 

Also is very useful take a look at a reduced sample, please take a look at this:

 

http://forums.greensock.com/topic/9002-read-this-first-how-to-create-a-codepen-demo/

 

Rodrigo.

[Carl 9,066 Likes (Superhero)]

You might find some useful information here:

http://davidwalsh.name/device-state-detection-css-media-queries-javascript

[Rodrigo 2,662 Likes (Superhero)]

Aw yes, I forgot the dreadful device orientation change detection 

[sxp6200 1 Likes (Newbie)]

Hey guys,

 

I actually discovered an easier way to do this using enquire.js

 

Here's an example:

enquire.register("screen and (max-width:1023px)", {
        match: function() {
            isMobile = true;
            console.log("is mobile");
        },
        unmatch: function() {
            isMobile = false;
            console.log("is desktop");
        }
    });

    if(!isMobile) {
        //slide in #main
        TweenMax.fromTo('#main', 1.25, {opacity: 0, transform:"translateX(14%)"}, {opacity: 1, transform:"translateX(0%)", delay:0.5, ease:Expo.easeOut} );
        //fadeout overlay
        TweenMax.fromTo('#overlay', 1, {autoAlpha: 1}, {autoAlpha: 0, delay:0.6} );
    } else {
        //fadeout overlay
        TweenMax.fromTo('#overlay', 0, {autoAlpha: 1}, {autoAlpha: 0, delay:0} );
    }

[Rodrigo 2,662 Likes (Superhero)]

Hi,

 

Thanks for sharing this approach, also enquire looks like a nifty tool.

 

Also keep in mind that you don't need to pass the entire property to the config object, in the case of transforms, GSAP uses it's own syntax:

 

- transform:"translateX(14%)" => x:"14%"

- transform:"translateY(14%)" => y:"14%"

- transform:"translateZ(14%)" => z:"14%"

- transform:"rotateX(45deg)" => rotationX:45

- transform:"rotateY(45deg)" => rotationY:45

- transform:"rotate(45deg)" => rotation:45

 

Rodrigo.

[sxp6200 1 Likes (Newbie)]

Thanks Rodrigo.

 

For some reason I was under the impression that if you use something like x:"14%" GSAP uses JS instead of CSS to perform the tween. 

[Rodrigo 2,662 Likes (Superhero)]

Not at all. If you look at the element in dev tools or firebug, you'll see that GSAP modifies the transform matrix when it deals with transformations.

 

Jack, of course, has the last word on why the syntax is different but the engine works in the element's styles.

[GreenSock 8,117 Likes (Superhero)]

Yep, GSAP uses JS to modify the css in the element's "style" property. 

 

Just for the record, due to the way matricies work and for performance reasons, GSAP doesn't support percentages in transforms like x:"12%". It's extremely rare from what I've seen - typically folks want to define things in pixels anyway. If you need percentages, you could just use top/left properties instead.