Jump to content
Search Community

Best Approach for Conditionally Disabling Tweens

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



Link to comment
Share on other sites

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:




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





  • Like 2
Link to comment
Share on other sites

  • 2 weeks later...

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} );
  • Like 1
Link to comment
Share on other sites



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



Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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. 

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