Jump to content

| GreenSock

Note: This page was created for GSAP version 2. We have since released GSAP 3 with many improvements. While it is backward compatible with most GSAP 2 features, some parts may need to be updated to work properly. Please see the GSAP 3 release notes for details.

Allows TweenLite and TweenMax to animate the scroll position of the window (like doing window.scrollTo(x, y)) or a <div> DOM element (like doing myDiv.scrollTop = y; myDiv.scrollLeft = x;). To scroll the window to a particular position, use window as the target of the tween like this:

//scroll to 400 pixels down from the top
TweenLite.to(window, 2, {scrollTo:400});

//or to scroll to the element with the ID "#someID":
TweenLite.to(window, 2, {scrollTo:"#someID"});

//or to specify which axis (x or y), use the object syntax:
TweenLite.to(window, 2, {scrollTo:{y:400, x:250}});

Or to tween the content of a div, make sure you've set the overflow:scroll on the div and then do this:

//scroll to 250 pixels down from the top of the content in the div
TweenLite.to(myDiv, 2, {scrollTo:250});

Learn more in the ScrollToPlugin documentation.

Get an all-access pass to premium plugins, offers, and more!

Join the Club

User Feedback

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.