Jump to content
GreenSock

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

Horizontal scroll with mouse using Draggable

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 all,

 

Looking for a hand or some advice if possible. I've created this codepen (below) and it works well enough when you drag the content horizontally but I would also like to be able to scroll with the mouse through the content, very much like the functionality of this website - https://antoni.de/cases/

 

 

I'm fairly new to Javascript and certainly GSAP, so any input is much appreciated.

 

Thanks

 

Jon

 

See the Pen aXvOyx by JonQuayle (@JonQuayle) on CodePen

 

See the Pen aXvOyx by JonQuayle (@JonQuayle) on CodePen

Link to comment
Share on other sites

I suspect this post and demos from @PointC will have some pointers for you. 

 

 

  • Like 2
Link to comment
Share on other sites

Hi @JonQuayle,

 

Welcome to the GreenSock Forum.

 

Here's a suggestion to combine drag and scroll:

 

See the Pen ZwbZVy by mikeK (@mikeK) on CodePen

 

Happy tweening . ...

Mikel

 

 

 

Link to comment
Share on other sites

  • 1 year later...

Hi @mikel 
This example so good! Can You help me? I have two questions for You.

1. When viewing this carousel in  browsers Firefox and Safari, the slides twitch when scrolling. Tell me if this is a browser problem or can we fix it with the Draggable settings? 

2. Can I set the non-fixed width of the slides and set the inline width and left for #dragSpace #wrapperBoxes?

Link to comment
Share on other sites

Hi @Dicom,

 

Welcome to the GreenSock Forum.

 

I'm not an expert on that - it was just an experiment.
Please wait for the professionals.

 

Happy tweening ...

Mikel

 

Link to comment
Share on other sites

3 hours ago, Dicom said:

1. When viewing this carousel in  browsers Firefox and Safari, the slides twitch when scrolling. Tell me if this is a browser problem or can we fix it with the Draggable settings? 

I don't see any twitch on my device. What OS and browser versions are you on?

 

3 hours ago, Dicom said:

2. Can I set the non-fixed width of the slides and set the inline width and left for #dragSpace #wrapperBoxes?

I'm not sure what you're asking here. can you please try to explain your question in a different way?

  • Like 1
Link to comment
Share on other sites

@mikel Thanks I will search other way )

@ZachSaucier Ok, maybe a can talk in a different way 

1.  I use Windows 10 (x64)   Firefox 72.0.2(x64)

2.  We have fixed values in example:
 

#dragSpace {
  width:10000px; //this
  left:-5000px; //this
}
#wrapperBoxes{
  width: 5000px; //this
  left: 5000px; //this
}
.box {
  width: 300px; //this
}

I need take result , where boxes (sections) have different sizes. And this width of box depends from child content. Maybe I talk no clear. 

3. But if tell true. I'm looking for tools that help me maked this functional on expample https://homesociete.ca/   . Sections have different sizes . When user scroll page the animation of main container is so smooth. 

a) 

This is not way because scoll all the section entirely.

b)

 

This is not so because sections are the same size.

 

 

 

ZachSaucier

Link to comment
Share on other sites

@Dicom Please create a minimal demo of your setup so that we can help with your specific use case. This post can show you how to do so:

It would likely be good to create a new thread instead of using this one.

Link to comment
Share on other sites

Hi, @ZachSaucier

 

Here is a simplified codepen with problem we are facing. 
Shortly, horizontal scroll brings shaking translateX transform (as well as left) in Safari. Also this shaking is visible on slower PC's. 

See the Pen yLyWgrO by di_com (@di_com) on CodePen

 

Have you expirience with this issue? Have you any recommendations on how to make it smooth?

Link to comment
Share on other sites

Hey skhatko and welcome to the GreenSock forums. Thanks for the reduced demo!

 

I'm not seeing any shaking on my PC in Safari. It's hard to say what's causing it without even being able to see the behavior at all. How big are the jumps?

 

Also that demo doesn't use GSAP at all... These are the GreenSock forums :) We can't help with every non-GSAP request.

Link to comment
Share on other sites

  • 2 months later...
On 1/25/2019 at 10:44 AM, mikel said:

Hi @JonQuayle,

 

Welcome to the GreenSock Forum.

 

Here's a suggestion to combine drag and scroll:

 

 

Happy tweening . ...

Mikel

 

 

 

 

Hi @mikel

thanks for your solution but I have a problem.

I need momentum on Draggable so I added throwProps: true and it works, here the codepen 

 

See the Pen xxGoryJ by netgloo (@netgloo) on CodePen

 

Now, you can reproduce my problem so: drag the boxes to, for example, number 8 and then scroll. You'll see that it start to scroll from the start and not from the point it was.

You know ho to solve?

 

 

Link to comment
Share on other sites

On 4/5/2020 at 6:48 AM, Black Ducas said:

drag the boxes to, for example, number 8 and then scroll. You'll see that it start to scroll from the start and not from the point it was.

You know ho to solve?

If you want to keep the same approach, then you should update the scroll position when the element is dragged and thrown. 

 

This thread may give additional helpful info:

 

  • Like 1
Link to comment
Share on other sites

  • 4 months later...
On 1/25/2019 at 4:44 AM, mikel said:

Hi @JonQuayle,

 

Welcome to the GreenSock Forum.

 

Here's a suggestion to combine drag and scroll:

 

Happy tweening . ...

Mikel

Hi Why we are getting black space after all boxes scroll

Link to comment
Share on other sites

1 hour ago, Raman Pratap said:

Hi Why we are getting black space after all boxes scroll

Hey Raman and welcome to the GreenSock forums. The black space is because the demo uses an arbitrary scroll height instead of calculating the actual width of the horizontal element. If you switch out that value for one the is based on the content's width it should work. However, the scroll event listener is not throttled which would likely be a good idea.

 

We have a plugin, ScrollTrigger, which can do that for you (along with many other things)! Check it out:

See the Pen yLeBMmm by GreenSock (@GreenSock) on CodePen

 

Here's another approach:

See the Pen 896549f0a83297debd9111fe9b205a97 by GreenSock (@GreenSock) on CodePen

Link to comment
Share on other sites

  • 9 months later...

Hey @ZachSaucier

 

Great demo above, but it doesn't seem to fit the above examples. 

 

As such I've tried to recreate the above using your code but it's not having the same effect, is the drag resets the progress to zero.

 

See the Pen eYvEzEd by CHEWX (@CHEWX) on CodePen

 

Be good to see if it's a simple fix.

 

Thanks.

Link to comment
Share on other sites

Hey @ferriss

 

You could use a proxy-element for the dragging part, just like this demo in the ScrollTrigger How-To Pens collection on codepen shows

 

See the Pen ZELQqeJ by GreenSock (@GreenSock) on CodePen

 

I just quickly threw the JS in with your setup there to show it working. Hope this helps.

 

See the Pen 04366bfb314d0f2a19f5ae295d3e8f01 by akapowl (@akapowl) on CodePen

 

  • Like 2
  • Thanks 1
Link to comment
Share on other sites

@akapowl

Nice, scroll-proxy works really well, thanks!

Link to comment
Share on other sites

23 minutes ago, ferriss said:

Nice, scroll-proxy works really well, thanks!

 

Glad it works for you :) 

 

Just to clear one thing up:

This is a proxy-element being dragged here - not to confuse with .scrollerProxy()

  • Like 1
Link to comment
Share on other sites

Ha, yes, typo!

Link to comment
Share on other sites

  • 1 month later...

@akapowl

Hi there, I'm trying to rebuild this codepen from further up this thread 

See the Pen ZELQqeJ by GreenSock (@GreenSock) on CodePen

in Webflow and I'm getting some errors in the console. I wondered if you might be able to help me track down the issue?  

The horizontal scroll seems to be working fine but I'm getting this error in the Draggable code - Uncaught TypeError: Draggable.create is not a function at (index):59

This is the link to the demo site - https://horizontal-scroll-test-e8d1e2.webflow.io/

I'm using the exact JS from the codepen so I just can't figure out why it's not happy. I've been trying everything I can think of but I'm pretty new to JS so any help you could give me would be much appreciated.

Thanks
Max

Link to comment
Share on other sites

Hey @Maxifthen

 

Looks to me, like you might just be loading the wrong Draggable js.

 

If I am not mistaken, this here is not a GreenSock product

 

https://cdnjs.cloudflare.com/ajax/libs/draggable/1.0.0-beta.12/draggable.min.js

 

Maybe try this one instead?

 

https://cdnjs.cloudflare.com/ajax/libs/gsap/3.7.1/Draggable.min.js

 

  • Like 1
Link to comment
Share on other sites

@akapowl

Aha! That was it! Thanks so much for the quick response (and the correct answer!) Not sure how long it would have taken me to realise it wasn't GSAP Draggable. I must have searched for 'draggable' rather than searching GSAP and adding all the bits I needed.

Max

  • Like 2
Link to comment
Share on other sites

Nice catch @akapowl 🥳

  • Thanks 1
Link to comment
Share on other sites

Hey @akapowl

I've been making some progress but stumbled onto some inconsistency between browsers that I can't seem to overcome. Would you take another look at my project please? I'm trying to wrap my horizontal scrolling section in a 80% width div with the overflow hidden to create a smooth scrolling carousel-type section fixed in the middle of the page.

I found that by overriding the z-index to 0 and overflow to hidden on the pin-spacer I can get what I want in Safari but the overflow remains visible in Chrome. If I change the position of the scrollContainer from fixed to relative or absolute the overflow works in Chrome but obviously this causes the 
section to scroll down with the page. I'm looking for a solution that works across browsers so could you suggest any possible methods for this?

https://horizontal-scroll-test-e8d1e2.webflow.io/

Thanks
Max

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.

×