Jump to content
Search Community

ScrollTo #Div{overflow:auto}

Vito 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

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?

 

Ex:

 

This works:

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

 

This Not:

$('#div_id').click({
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

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

  • 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.
×
×
  • Create New...