Jump to content

Search In
  • More options...
Find results that contain...
Find results in...

ScrollTo #Div{overflow:auto}

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

Hi! I'm using the greensock ScrollTo plugin and it works perfectly. but if I'm trying to use it on a div with overflow:auto instead of the "window" and it dosen't work at all.

Somebody knows if there is any way to make it work?




This works:

TweenLite.to(window, 1, {scrollTo:{y: 500, x:0}, ease:Power4.easeInOut});


This Not:

var wrap = $('#wrap')
TweenLite.to(wrap, 1, {scrollTo:{y: 500, x:0}, ease:Power4.easeInOut});


Tnx to all :)

Link to comment
Share on other sites

Strangely I hadn't thought about scrolling something other than the window, but I've updated the ScrollToPlugin to allow for that now (tested on a div). Just snag the latest version and it should work for you.

Link to comment
Share on other sites

Tnx a lot! I will try to use it today! :D

Link to comment
Share on other sites

Yeh it works!


I'm trying to built my website using just Greensock for the animations... i didn't want to use another plugin for the scrolling :)

Link to comment
Share on other sites

Awesome. I can finally start transitioning from that bloated jQuery scroll stuff.

Link to comment
Share on other sites

I think there is a small bug in the new plugin. When i'm using it to scroll a div with overflow it works but the tween always start from the top and not from the current position.


I hope is easy to fix :)


Tnx a lot for everything!

Link to comment
Share on other sites

Ah yes, great catch. Sorry about that. The scrollTop and scrollLeft values were inverted. It should be fixed in the latest version.

Link to comment
Share on other sites

  • 1 year later...

i want to ask an additonal question to this topic please!


i write a small interface script: http://tvim.de/scrollto/scrollto.html


it works brillant! Thanks to Greensock Team!


But when i resize the window, it has problems centering my divs.


without greensock there are no position problems. i think its because greensock uses "px" values to calculate scrollTo destinations. but can i have them with percentage? i tried it but it does not work:

TweenLite.to(scrollsrc, 1.5, {scrollTo:{y:"30%", x:"30%"}, ease:Power4.easeInOut});



Link to comment
Share on other sites

Browser's only use pixel values for scrolling (i.e. element.scrollTop only accepts integer values, representing pixels), so it's not going to work with percentages like that.
Something like the following might work?

TweenLite.to(scrollsrc, 1.5, {
  scrollTo: {
    y: 0.3*$(scrollsrc).height(),
    x: 0.3*$(scrollsrc).width()
  ease: Power4.easeInOut
  • Like 1
Link to comment
Share on other sites

unfortunately this works not. is there a way to execute a command on window resizing which recalculates the value?!


also i mentioned a bug: i open the link in my first post. then i reload the page. now it shows another value than before?! 1st time it showed me the "5" and 2nd time it shows "1".


i am on firefox 25 @ mac

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.