scrollTo Plugin Doubt

[Tiago Diaz]

Hello i wanna ask for the more experienced userds of GSAP JS:

 

How can i make a window scrollTo plugin go to 100% bottom of the webpage? on jquery i set it as "max", but i wan´t to use only GSAP for animations and jquery for selector and general pourposes

 

tnx for your time.

[Rodrigo]

Hi Tiago,

 

Using JQuery you can get the document total height like this:

var max = $(document).height();

And then you can trigger the following tween to scroll to the bottom of the page:

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

Of course if you're using another DOM element be sure to use it instead of window.

 

Now in pure javascript it would go like this:

var body = document.body,
html = document.documentElement;

var totHeight = Math.max( body.scrollHeight, body.offsetHeight, html.clientHeight, html.scrollHeight, html.offsetHeight );

function scrollWindow()
{
TweenLite.to(window, 2, {scrollTo:{y:totHeight}, ease:Power2.easeOut});
}

 

I hope this helps a little,

Cheers,

Rodrigo.

[GreenSock]

I've attached a version of ScrollToPlugin that adds that "max" feature. You can simply use that as a keyword to indicate the maximum scroll position. Would you mind giving it a shot and letting us know if this is what you were looking for?

scrollTo.zip

[Rodrigo]

Hi Jack,

 

Maybe this is a dumb question, but for this version of the scrollTo plugin how does the syntax goes?, is it necessary to declare a variable or not? because with the code below I'm not getting anywhere:

TweenLite.to(elem, 1, {scrollTo:{y:max}});

I looked at the code of the plugin but my knowledge of javascript is not even close enough to know how this works

 

Cheers,

Rodrigo.

[GreenSock]

Silly me. I should have mentioned that you use "max" as the keyword (a string).

 

//BAD:
TweenLite.to(elem, 1, {scrollTo:{y:max}});

//GOOD:
TweenLite.to(elem, 1, {scrollTo:{y:"max"}});

 

 

And if you just use "max" without defining it in an object, it'll assume you mean y:"max", so this should work too:

TweenLite.to(elem, 1, {scrollTo:"max"});

 

And keep in mind that you can target the window if you want to scroll the whole document, like:

TweenLite.to(window, 1, {scrollTo:"max"});

[Tiago Diaz]

Man... i just love Greensock!

 

the correction worked properly...

 

Let me explain why the $(document).height() did not worked for me...

 

O am using Strong.easeInOut, but if i use the jquery height, i don´t know why... My Strong becomes only easeIn! But using the "max" string that Greensock suplied it works like a charm,if you wanna try is on the site, the bottom hidden menu:

 

http://temp.agenciacaput.com/Caput/

 

Now the animation its smooth... Tnx Greensock!

[jamiejefferson]

Your ease probably didn't appear to work as intended because it was tweening to a scroll position larger than the maximum, and since you can't scroll that far, the end of your tween is essentially getting clipped.

 

scrollTop (the javascript property responsible for vertical scrolling) is an offset applied to the top of the viewport (visible area of your element e.g. window, elem etc) contents. To get an accurate tween you need to position the bottom of the viewport at 'max', not the top, so you'll need to subtract your viewport's visible height from its content height (scrollHeight).

 

e.g.

viewport scrollHeight = 1000px

viewport height = 200px

viewport maximum scrollTop = 800px

 

Say you had a 10 second linear tween from scrollTop 0 to scrollTop 1000; the last 2 seconds of the tween will have no effect as the max scrollTop is reached after 8 seconds.

 

It seems Jack has taken this into account for you with the plugin.

[Spiderian]

Would this work for scrolling content in a div if it's parent is overflow hidden?

	function scroller (){
		var bottom = $('#container').height();
		console.log(bottom.height);

		TweenMax.to(window, 5, {scrollTo:{y:bottom}, ease:Power2.easeOut});

		TweenMax.delayedCall(3, scroller);
	}

[Rodrigo]

Hi Ian,

 

I'm not sure about scrolling the window element, but it shouldn't be much difference between any DOM element with an overflow property and the window element.

 

Check the following codepen sample, feel free to fork and adapt it to your needs:

 

See the Pen NPGYrv by rhernando (@rhernando) on CodePen.

 

Rodrigo.

[Spiderian]

Thanks Rodrigo. I realized I had the window in after. It works perfectly, but is there a way to have the "scroller" function based on the height of the child div? So if it only hangs over by 50px it scrolls faster than if it is over by 1000px.

[Rodrigo]

You're welcome Ian.

 

Sure, like you were doing it in the snippet of your previous post, just calculate the element's height (be sure to make it after the document is completely rendered in order to get the right amount) and create a simple math to set the instance.

 

Although in that case I would create a variable animation time and use the "max" string in the config object, something like this:

var animationSpeed,
    baseSpeed = 1,//this would be the default duration of the instance
    baseHeight = 1000,//this height is considered as the height of the element that would make the tween last for the time determinated by the base speed var
    elementHeight = $("#elementId").outerHeight();//use outer height in case you're adding padding and/or borders to the element's CSS

function setSpeed(){
  animationSpeed = baseSpeed * ( elementHeight/baseHeight );
};

setSpeed();
//you can call that function every time the element's height changes in order to change the animation duration accordingly

TweenLite.to(elementParent, animationSpeed, { scrollTo:{y:"max"} });

[Spiderian]

Great Scott!! It works amazingly. I fiddled with the math and stuck it in an if statement to detect weather or not the "#body" has overflow so no mater what length of content it behaves accordingly.

$(document).ready(function(){
	var element = document.querySelector('#body');
	if( (element.offsetHeight < element.scrollHeight) || (element.offsetWidth < element.scrollWidth)){
	   // your element has overflow

	   var animationSpeed,
    baseSpeed = 8,//this would be the default duration of the instance
    baseHeight = 896,//this height is considered as the height of the element that would make the tween last for the time determinated by the base speed var
    elementHeight = $("#container").outerHeight();//use outer height in case you're adding padding and/or borders to the element's CSS

		function setSpeed(){
		  animationSpeed = baseSpeed * ( elementHeight/baseHeight );
		};
		setSpeed();
		//you can call that function every time the element's height changes in order to change the animation duration accordingly
	  
	  	function delayedStart(){
		  TweenMax.delayedCall(25, scroller);
		};

		function scroller(){
		  TweenMax.to("#body", animationSpeed,{
		    scrollTo:{y:"max"}, delay:15,
		    onComplete:backToStart
		  });
		};

		function backToStart(){
		  TweenMax.to("#body", 0, {
		    scrollTo:{y:0},
		    delay:15,
		    onComplete:delayedStart
		  });
		};

		scroller();
		}

	else{
	  //your element doesn't have overflow
	}
});

Thank you again Rodrigo!

[volkand]

hi guys,

 

i hope u can help me.

maybe its off topic. sorry for that.

im working on a wordpress site.

 

http://www.vinothek-am-schweinemarkt.de/wp/

 

my scrolling function on the right side of the page (navigator) doesnt work right.

it doesnt scroll up?!

 

it would be great if u can help me.

 

thank u!

[Rodrigo]

Hi and welcome to the GreenSock forums.
 
First, nice site, looks very good!!.
 
Second, is really hard to troubleshoot a live site and you have over 1800 lines of code there  , please create a reduced case sample using codepen so we can get a better look and find out what could be the issue. Check the following link:

 

http://greensock.com/forums/topic/9002-read-this-first-how-to-create-a-codepen-demo/

 

Finally, for what I saw by clicking the circles to the right side of the screen, it seems that you're creating somehow of an overwrite conflict, most likely in a variable you're passing in your code, because when I click the buttons to go to the next section, it works fine. Then, as you point, it doesn't go back to the top or previous section. Finally if I scroll manually to the top and click on the first circle, the site scrolls all the way to the bottom of the page, it looks like that value sticks there and you can't change it.

 

As mentioned, please do your best to create a simplified version of the issue, that will speed things up a lot.

 

Rodrigo.

[volkand]

wow!

so much thank u!

i really didnt expect that someone will replaying.

really thank u for your help.

 

yes, of course i could give u code.

but before i do this wrong.

is it better to give u the logins and ftp to this site?

 

maybe u will find the error much better?

 

thank u!

[Rodrigo]

Hi,

 

You're welcome.

 

As I said in the previous post, is better, easier and faster for you to set up a codepen sample. Going through over 1800 lines of js code and over 1300 lines of CSS is basically a task that could take many hours and many of us don't have that amount of time to find some particular issue. That's why Carl created that video and you can access the starter codepens in the GreenSock collection in order to accelerate the support to GSAP users.

 

Please make the extra effort to create a sample and get back to us, I can assure you that once you provide that link a lot of people will jump and you'll get a quick solution to your problem.

 

Rodrigo.