Jump to content
Search Community

GASP ScrollToPlugin > scroll bottom

david test
Moderator Tag

Go to solution Solved by Rodrigo,

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, 

 

I try to scroll from an anchor to a div, it's work to go to the top of window but from top of window to a bottom section it doesn't work.

See the Pen dtJog by dhenriet (@dhenriet) on CodePen

function TweenScroll(anchor) {

	$(anchor).click(function(e) {
		e.preventDefault();

		var domId = $(anchor).attr('href');
		//.attr('href').slice(1);
		var domScroll = $(domId).offset().top;
		
		console.log(domScroll);

		TweenMax.to(window, 1.5, {
			scrollTo: {
				y: domScroll
			},
			ease: Back.easeInOut
		});
        });
	
}

TweenScroll('#top');
TweenScroll('#start');
Link to comment
Share on other sites

  • Solution

Hi David,

 

I believe that the problem is being caused by creating the Tween instances at the same time, on the same object and tweening the same property, basically an overwrite mayhem.

 

A solution could be to create a function to call the scroll event on the element click instead of calling a function to create the whole thing. Just handle everything in the click event and the overwrite manager will take care of the rest:

function getPosition(target)
{
  var domId = $(target).attr("href"),
      scrollPos = $(domId).offset().top;
  
  TweenLite.to(window, 1.5, {scrollTo:{y:scrollPos, ease:Back.easeInOut}});
}

$("#menu a").click(function(e)
{
  e.preventDefault();
  getPosition(this);
});

Mhh, you know while testing this code I realize that I'm wrong. When i first wrote it I attached no easing function to the Tween, so it was working great, then when I used the Back.easeInOut the issues began. Turns out that the Back In part of the easing function is creating a conflict when that easing should take the window scroll to a value that is less than 0 and in that particular point the whole animation just stops. But if you scroll manually a enough to give the Back In easing space, it works as expected.

 

The solution is to change the easing function, perhaps just Back.easeOut. Unfortunately it seems I can't help you beyond this, perhaps our Honourable Sensei might have a better solution.

 

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