Jump to content
Search Community

onComplete doesn't fire??

LukeWilson 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

Why doesn't 'myFunction()' fire at the end of this?

(simple scroll-to-section)

 

$('a.trigger').bind('click',function(event){

event.preventDefault();
var $anchor = $(this);
var scrollY = $($anchor.attr('href')).offset().top - 100;

TweenLite.to($(window), 1.6, {scrollTo:{ y:scrollY, onComplete:myFunction, ease:Power2.easeInOut }});

function myFunction(){
	 alert('done');
	 }
});		

 

Something to do with the scrollTo plugin??? I am confused...I have tried putting onComplete outside of the scrollTo:{} brackets, still nothing...

what's up?

 

Thank you very much for any help!

Luke

Link to comment
Share on other sites

Yep, you just nested it in the wrong spot:

 

//BAD: 
TweenLite.to($(window), 1.6, {scrollTo:{ y:scrollY, onComplete:myFunction, ease:Power2.easeInOut }});

//GOOD: 
TweenLite.to($(window), 1.6, {scrollTo:{ y:scrollY}, onComplete:myFunction, ease:Power2.easeInOut });

 

Notice the ease was in the wrong spot too.

 

You said you already tried nesting the onComplete in the right spot and it didn't work, so that has me concerned - can you please post a very simple example set of files that clearly demonstrates the issue? The simpler the better. I'm sure we can get it figured out.

Link to comment
Share on other sites

Wow, I really got to pay more attention to using the correct syntax because I just copied and pasted your "good" version and it does work :)

 

As a beginner it seems like a lot of my problems are due to bad syntax...

it's all those {} and () and of course });

 

I'll get better in time and stop pestering people for simple things!

 

Thanks hombre

Link to comment
Share on other sites

  • 11 months later...

Hi,

 

first of all, thank you very much for this awesome piece of software. It's a pleasure to use!  :)

 

I have the same problem so I just use this thread. I'm using scrollTo to go to the bottom of the page and I have a status variable "going_to_anchor" which prevents other parts of my app from interacting while the scrollTo animation happens.

 

However, the onComplete event doesn't get fired. I think the problem might be that the scrollTo can't scroll to the target element since it's the end of the page and the scrolling stops before the script has reached the target element. I would think the script would understand what just happened and just fires the onComplete event.

 

Here's , my code:

var going_to_anchor=false;

$("a#myanchor").click(function(e){
	e.preventDefault;
	going_to_anchor=true;
	TweenLite.to(window, 0.75, {scrollTo:{y:$("#contact_form").offset().top},
		onComplete:function(){
			console.log("complete");
			going_to_anchor=false;
		}
	});
	$(this).fadeOut();
	return false;
}

When I change the target element from #contact_form to another element (which is higher up the page) then it works. So I think this is a bug.

 

What do you think?

 

Thank you!
Daniel

Link to comment
Share on other sites

Hi Jonathan,

 

thanks for your reply.

 

what about putting your onComplete callback inside the scrollTo object {} like Jack suggested above.

 

As far as I understand Jack suggested the exact opposite to LukeWilson. The scrollTo plugin seem to not have a onComplete method.

 

I created a testcase on jsfiddle.

 

*jsfiddle updated*:

http://fiddle.jshell.net/4UcfT/10/

http://fiddle.jshell.net/4UcfT/10/show/

 

If you click on Headline 1, it will scrollTo Headline1 and fire the onComplete event. If you click on Headline 2, it will go as far as it can to that headline, but it won't reach the exact position and therefore won't fire the onComplete event.

 

For me this seems like a bug in scrollTo. If scrollTo reaches the end of the browser window, it's obvious that the whole job is done, isn't it? Maybe I'm missing something. :)

 

Thanks,

Daniel

Link to comment
Share on other sites

The onComplete is a special property that is part of the  to() method that your using:

 

http://api.greensock.com/js/com/greensock/TweenLite.html#to()

 

to() Parameters:

  target:Object — Target object (or array of objects) whose properties this tween affects.     duration:Number — Duration in seconds (or frames if useFrames:true is set in the vars parameter)     vars:Object — An object defining the end value for each property that should be tweened as well as any special properties like onComplete, ease, etc. For example, to tween mc.x to 100 and mc.y to 200 and then call myFunction, do this: TweenLite.to(mc, 1, {x:100, y:200, onComplete:myFunction});

 

Example of to() tween:

TweenLite.to(mc, 1, {css:{x:100, y:200}, onComplete:myFunction});

also in your code .. your missing the ending parenthesis  );  on your click handlers so errors were being thrown in the console:

SyntaxError: missing ) after argument list
http://fiddle.jshell.net/4UcfT/show/
Line 39

try adding that ending parenthesis:

$("a#myanchor1").click(function(e){
        e.preventDefault;
        alert("test");
        console.log("test");
        TweenLite.to(window, 0.75, {scrollTo:{y:$("#headline1").offset().top},
            onComplete:function(){
                alert("onComplete event fired");
            }
        });
        return false;
    }); // missing the ending parenthesis
                           
    $("a#myanchor2").click(function(e){
        e.preventDefault;
        TweenLite.to(window, 0.75, {scrollTo:{y:$("#headline2").offset().top},
            onComplete:function(){
                alert("onComplete event fired");
            }
        });
        return false;
    }); // was missing the ending parenthesis

also when using return false its the same as declaring e.preventDefault; and e.stopPropagation.. so you could just use return false in this case.. unless you don't want to stop event bubbling.

  • Like 1
Link to comment
Share on other sites

I see what's happening - the ScrollToPlugin automatically tries to deliver the most intuitive behavior by killing the tween if something else intervenes and edits the scroll position mid-tween. So, for example, let's say that you tween the scroll position all the way down the page over 3 seconds, but 1 second into that tween, the user flicks their scroll wheel or drags the scroll bar manually - it could get really annoying if the tween insists on going where you told it to go instead of honoring the user's interaction. If I were the user, I'd be ticked. 

 

The only way for the plugin to do this is to record the position each time it edits it, and then on the next render, it checks to see if it is different than what the plugin told it to be. For example, if it says "make the scroll position 100" and then on the next render, it's 90 (without the plugin doing anything), it takes that to mean that something else is trying to control the scroll position (most likely the user), so it kills the tween. 

 

The situation you ran into was that you were telling it to scroll beyond the maximum possible scroll position, and the plugin was trying to honor that, but when the browser it the max, it just refused to go anywhere and the plugin was like "dude, I told you to go to ____ and it's not there, so I better kill this tween". I'll add some code on the next update of the engine so that it specifically looks for this condition and doesn't kill the tween. 

 

There's a really easy fix right now, though - you can just set the autoKill property to false. 

TweenLite.to(window, 0.75, {scrollTo:{y:$("#contact_form").offset().top, autoKill:false}});
  • Like 2
Link to comment
Share on other sites

Hi,

 

thank you for the quick reply!

 

@Jonathan

 

Thanks for fixing. I fixed it, too, but it seems like jsfiddle didn't save it. I'm not familiar with the tool so it was my mistake.

 
I updated the jsfiddle so that the demo works.

 

I see what's happening - the ScrollToPlugin automatically tries to deliver the most intuitive behavior by killing the tween if something else intervenes and edits the scroll position mid-tween. So, for example, let's say that you tween the scroll position all the way down the page over 3 seconds, but 1 second into that tween, the user flicks their scroll wheel or drags the scroll bar manually - it could get really annoying if the tween insists on going where you told it to go instead of honoring the user's interaction. If I were the user, I'd be ticked. 

 

100% agree. I really want to avoid this behavior (btw. jquery.scrollTo acts like that). I remember the moment when I realized your great API doesn't do it. autoKill:false will enable this behavior again so I will just wait for the next update. :-)

 

 

The situation you ran into was that you were telling it to scroll beyond the maximum possible scroll position, and the plugin was trying to honor that, but when the browser it the max, it just refused to go anywhere and the plugin was like "dude, I told you to go to ____ and it's not there, so I better kill this tween". I'll add some code on the next update of the engine so that it specifically looks for this condition and doesn't kill the tween. 

 

Absolutely! Exactly what I had in mind. Thank you very much! *Edit* Awesome to now understand why it behaves like it does. There's a very good reason for it to do so. Would be great if you could add this edge-case though, because it's not unlikely to run into it.

 

You both have a good weekend!
 
Edit: Just opened a Ticket on github:
https://github.com/greensock/GreenSock-JS/issues/28
 
Hope that makes things easier/more organized.
 
Cheers,
Daniel
  • Like 1
Link to comment
Share on other sites

One other thing you could do is just correct the value you're feeding into the tween so that it doesn't exceed the max to begin with. In fact, ScrollToPlugin has a convenience method that'll give you that data:

var newY = Math.min($("#headline2").offset().top, com.greensock.plugins.ScrollToPlugin.max(window, "y"));
TweenLite.to(window, 0.75, {scrollTo:{y:newY}});

I have also attached the revised plugin that I plan to put in the next push. Better?

ScrollToPlugin_1.7.2.zip

  • Like 2
Link to comment
Share on other sites

Add autoKill false after this line:

y:$("#headline2").offset().top

So it becomes:

y:$("#headline2").offset().top, autoKill:false

This way it completes the tween and fires the onComplete even if the target doesn't reach the top due to no space at the bottom of the page.

 

I found it necessary to add autoKill false when using ScrollTo plugin because if the page is heavy and the FPS drops to less than 30fps during the scroll then the tween will autokill itself and wouldn't complete the tween, unlike jQuerys scrollTop, which seems to have AutoKill false on by default.

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