GASP ScrollToPlugin > scroll bottom

[david 0 Likes (Newbie)]

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');

[Rodrigo 2,662 Likes (Superhero)]

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.

[david 0 Likes (Newbie)]

Hi and thanks Rodrigo, you rock ! Its' working nice with `Linear.easeNone`. love GSAP !

I found this post useful with scrollTo plugin demo http://codeaway.info/greensock-animation-platform-scroll-to-plugin-sample/, http://codeaway.info/sample.code/scroll.to/scroll.to.sample.html