Jump to content
Search Community

scrollTo Plugin Doubt

Tiago Diaz 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

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.

Link to comment
Share on other sites

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.

  • Like 2
Link to comment
Share on other sites

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 :P

 

Cheers,

Rodrigo.

Link to comment
Share on other sites

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"});

Link to comment
Share on other sites

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!

  • Like 1
Link to comment
Share on other sites

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.

Link to comment
Share on other sites

  • 2 years later...

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);
	}
Link to comment
Share on other sites

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"} });
  • Like 1
Link to comment
Share on other sites

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!

  • Like 1
Link to comment
Share on other sites

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  :shock:, 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.

Link to comment
Share on other sites

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!

Link to comment
Share on other sites

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.

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