Jump to content
Search Community

help -- tweenlite.fromTo not working as expected??? (syntax)

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

Hi everyone

I am implementing a simple smooth scrolling to next section type of thing.

Here is the code:

 

$('a.next-section').click(function(){

  scrollTop = $(window).scrollTop();

  $('h1').each(function(i, h1){ // loop through article headings

	h1top = $(h1).offset().top; // get article heading top

	if (scrollTop<h1top) { // compare if document is below heading

	  TweenLite.to(window, 0.5,  {scrollTo:{y:h1top}, ease:Power2.easeOut});

	  return false; // exit function

	}

  });
});

 

As it is, it scrolls to the next section, but starts from the TOP of the page most of the time -

obviously I want it to scroll from the current window position to avoid the nasty 'massive jump' effect.

 

I have tried:

TweenLite.fromTo(window, 0.5, {y:window.y}, {scrollTo:{y:h1top}, ease:Power2.easeOut});

 

where 'window.y' is the current Y position of window (correct??)

 

I have also tried for the "from" part: {y:$(window).scrollTop()}

(or the "scrollTop" variable which is the same thing)

 

It does the same thing...

what am I missing?

It seems pretty simple...

Can anybody help me?

Thanks a lot (I'm learning)!

Link to comment
Share on other sites

Hi Luke, welcome to the forums.

 

You said it jumps back to 0 'most of the time', so should I assume that in some instances it actually does work correctly? TweenLite.to(window, 0.5, {scrollTo:{y:h1top}, ease:Power2.easeOut}); should be tweening from window's current scroll position to h1top, without jumping back to 0 first. It sounds like something else is causing the scroll back to 0 on the click event, before the tween gets a chance to calculate it's starting values (hence starting back at 0)

 

I wonder if this could be caused by your click function not canceling the default click event... e.g.

$('a.next-section').click(function(event){
   if (event.preventDefault) event.preventDefault();
   // stops the default 'href' action of clicking a link
   // note: different browsers/versions have different event APIs
   // though, so this would need expanding to be fully cross-browser

   // click code goes here
});

 

window.y isn't related to scroll position, so this wouldn't help in a fromTo (.scrollTop() should be accurate though...). window.pageYOffset or document.body.scrollTop (confusing right?) are two common ways to get this value, but it depends on the browser.

 

If the changes to click event bubbling don't change anything, it might help to see the page in action, as I don't really have any more ideas at the moment. I've used the scrollto plugin for a while now, and haven't seen it jump back to 0 before. If you could setup a very basic HTML file that demonstrates the issue that would be great.

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