Jump to content
Search Community

Animation onComplete

Frisbetarian 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

TweenMax.to($('html'), 1.5, {'scrollTop':$target.offset().top,
                                        'scrollLeft':$target.offset().left,
                                        ease:Quart.easeOut},
                                        function(){
                                            window.location.hash = target;
                                             scrolling = false;
                                        }
                        );

I know that its a noobish question, but am I calling my oncomplete correctly? It just doesn't seem to be changing the url when the animation completes.

Link to comment
Share on other sites

Hello,

 

try this, you have to use the onComplete callback special property in your to() method:

TweenMax.to($('html'), 1.5, {'scrollTop':$target.offset().top,
                 'scrollLeft':$target.offset().left,
                 ease:Quart.easeOut,
                 // onComplete callback goes here
                 onComplete: function(){
                         window.location.hash = target;
                         scrolling = false;
                 }
});

or you could call the function name itself

TweenMax.to($('html'), 1.5, {'scrollTop':$target.offset().top,
               'scrollLeft':$target.offset().left,
               ease:Quart.easeOut,
               // onComplete callback goes here
               onComplete: myFunction
});

function myFunction(){
          window.location.hash = target;
          scrolling = false;
}

found in the GSAP DOC's here:

 

http://api.greensock.com/js/

http://api.greensock.com/js/com/greensock/TweenMax.html

 

different callbacks:

  • onComplete : Function - A function that should be called when the tween has completed
  • onStart : Function - A function that should be called when the tween begins (when its time changes from 0 to some other value which can happen more than once if the tween is restarted multiple times).
  • onUpdate : Function - A function that should be called every time the tween updates (on every frame while the tween is active)
  • onReverseComplete : Function - A function that should be called when the tween has reached its beginning again from the reverse direction. For example, if reverse() is called the tween will move back towards its beginning and when its time reaches 0, onReverseComplete will be called. This can also happen if the tween is placed in a TimelineLite or TimelineMax instance that gets reversed and plays the tween backwards to (or past) the beginning.
  • onRepeat : Function - A function that should be called each time the tween repeats

:)

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