Jump to content
Search Community

TweenLite | What am I doing wrong?

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

My aim is to create a continuous animation of clouds sailing across the page. As the clouds load, they are added to an animation queue, which is processed every x amount of seconds. These two simple functions are what I'm trying to use to give the effect of the clouds sailing by infinitely and randomly.

var floatCloud = function(cloud, time, floatTo, resetY){

     TweenLite.to(cloud, time, { ease: Linear.easeNone, x : floatTo, onComplete : function(){
        this.invalidate();
        resetCloud(this.target, resetY)
     }});
}

var resetCloud = function(cloud, y){

    console.log('Cloud being reset: ');
    console.log(cloud);

    cloud.css('transform','matrix(1, 0, 0, 1, '+  -cloud.width() +', 0'); 

    if(y){
        cloud.css({
            'top' : Math.floor( Math.random() * $(document).innerHeight() - cloud.height() )
        });
    }

    floatCloud(cloud, 12, $(document).innerWidth() + cloud.width(), y);
}

However, it is not working, namely the cloud's X position is not reset. Also, for some reason, after a couple of iterations it stops animating altogether. How can I make sure that animation continues indefinitely and that the elements X position is reset properly? Also, I'm welcome to any suggestions on how I can improve these functions! Thanks for your time, take care!

 

EDIT: Forgot to mention a couple of things - I have a plugin that automatically adds vendor prefixes to jQuery's css() function. Also, strangely enough console logs that a cloud is being reset. However the transformation matrix stays the same - and no animation occurs! 

Link to comment
Share on other sites

Hi,

 

One possibility is to use clearProps instead jquery's css() method, is much more cleaner and you effectively remove any inline style generated by GSAP, like this:

var resetCloud = function(cloud, y){
 
    TweenLite.set(cloud, {clearProps:"x"});
 
    if(y){
        TweenLite.set(cloud, {top: Math.floor( Math.random() * $(document).innerHeight() - cloud.height() )});
        });
    }
 
    floatCloud(cloud, 12, $(document).width() + cloud.width(), y);
}

Also I don't see any need to invalidate the TweenLite instance, considering that is not being cached in a variable. Since it's created each time the function is executed you can safely remove that from the onComplete callback.

 

Also GSAP callback methods save you from including all that code inside your Tween instance, you can pass the function name and the parameters to be passed to the function, like this:

TweenLite.to(cloud, time, { ease: Linear.easeNone, x : floatTo, onComplete : resetCloud, onCompleteParams : [cloud, resetY]});

With that you're telling GSAP to execute the function named "resetCloud" on complete and pass the parameters cloud (the current tween's target) and the value resetY.

 

If this doesn't help as you need, please create a reduced codepen or jsfiddle illustrating the issue.

 

Rodrigo.

  • Like 2
Link to comment
Share on other sites

Also, I would highly recommend using GSAP for all of your transform-related stuff (currently you're using TweenLite to animate it, and then jQuery and some other plugin to reset it) because a few browsers have bugs that cause them not to report changes to the transform in certain situations. That's why GSAP automatically records those values for you, and reads them back when appropriate but if you're making changes outside of GSAP, it's almost impossible for it to know for sure what the values are (again, due to the browser bugs). You can force GSAP to re-parse the css values for transforms (ignoring anything it recorded) by passing parseTransform:true into your tween, but that's not generally necessary if you're using GSAP for all your transforms on that particular element. 

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