Jump to content
Search Community

| GreenSock
317986

Allows GSAP 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
gsap.to(window, {duration: 2, scrollTo: 400});

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

//or to specify which axis (x or y), use the object syntax:
gsap.to(window, {duration: 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
gsap.to(myDiv, {duration: 2, scrollTo: 250});

Learn more in the ScrollToPlugin documentation. To learn how to include the ScrollToPlugin into your project, see the GSAP install docs.

  • Like 1

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

Join the Club

When is the last time you worked on something you love? Go animate something cool and then share it with us.

- Team GreenSock



User Feedback

Recommended Comments



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

×
×
  • Create New...