Jump to content
GreenSock

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

Draggable with type scrollLeft, controll scroll area width

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

I've been working with the Draggable 'scrollLeft' type with a dynamic number of elements that determine the width of the drag/scroll area. What I'm wondering is, if there's a way to shift the the draggable area, or the elements within, so that the first element can begin and last element end at the center of the screen when dragging/scrolling? I would use padding on the inside of the scrolling area but padding applied to the right has no visible effect on the scroll area width or the internal elements position, left padding works as expected

 

Link to comment
Share on other sites

I don't quite understand what you mean here. Are you talking about a looping scroll where as an element moves off-screen to the left, it could be re-introduced from the right eventually? I'd echo Diaco's request for a demo/codepen. Those are always immensely helpful. 

  • Like 1
Link to comment
Share on other sites

Hi,

 

I'll add to Diaco and Jack in terms that I'm not 100% sure of what you mean but in order to center the elements I would go with some sort of width proxy, like this:

 

See the Pen MYzjxd by rhernando (@rhernando) on CodePen

 

You can see them as the ugly red lines.

 

Of course this is more of a hack than an elegant fix, honestly I don't know how to achieve that with just CSS, but using the window onload event to create a tween that animates the opacity and visibility of the child elements is a good resource in this case.

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

×