Jump to content
GreenSock

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

Horizontal scroll with mouse using Draggable

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 post
Share on other sites

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

 

 

  • Like 2
Link to post
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 post
Share on other sites

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 post
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 post
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 post
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 post
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 post
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 post
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 post
Share on other sites
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 post
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 post
Share on other sites
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 post
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 post
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.

×