Jump to content
Search Community

"scrollTo" doesn't fire "onComplete" if the window is too small

Wonder Giant 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

When using:

 

 

TweenMax.to (window, 1, {scrollTo:{$("#footer").offset().top}, onComplete:myFunction});

 

It will fire the "myFunction" if the window is able to scroll all the way to that section, but imagine you have a small 50px footer, and you want to "scrollTo" that. The behavior of your browser is to allow you to scroll until you hit the end of the page (rather than continuing to scroll up even higher than the sites height).

 

When that situation happens, the TweenMax scrollTo onComplete won't fire if the window stops short of the official "offset().top"

 

Any advice?

Link to comment
Share on other sites

You have two options:

  1. set autoKill:false inside the scrollTo:{} object, like scrollTo:{$("#footer").offset().top, autoKill:false}
  2. Separate your onComplete so that it's not attached to the tween itself - just use a delayedCall with the same duration, like:
    TweenMax.to(window, 1, {scrollTo:{$("#footer").offset().top}});
    TweenMax.delayedCall(1, myFunction);
Link to comment
Share on other sites

Not sure if it is supposed to behave like that, but...I found a workaround. Instead of just jumping to the sections offset().top, you can check to make sure the "top" isn't taller than the height of the browser.

 

// set to the "top"
var dest=location.offset().top; 

// now check if the top is too tall
if (dest > $(document).height()-$(window).height()) {
    dest=$(document).height()-$(window).height();
}

TweenMax.to (window, 1, {scrollTo:{y:dest}, onComplete:myFunction});
Link to comment
Share on other sites

Hi,

 

Considering the fact that is a footer what your tweening to I'm going to presume that is at the bottom or near the bottom of the page. If that's the case you can use the "max" method of the scrollTo plugin:

TweenMax.to (window, 1, {scrollTo:{y:"max"}, onComplete:myFunction});

Like that the engine takes care of everything.

 

You should consider that the scrollTo plugin will take the coordinates you're giving and put that point at the window's top position. To see it in action see this sample and click on the "scroll to marker" button and look that the purple div will end up at the top of the window, if you check the code you'll see that the marker position is obtained with the offset method.

 

But still is an odd behavior, even if there's no space for scrolling the page or element the tween should play and complete, check this sample:

 

http://websnap.cl/samples/scrollto.no.scrollbar.html

 

Hope this helps,

Cheers,

Rodrigo.

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