Jump to content
GreenSock

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

Make draggable Slider also scrollable

Recommended Posts

Hi guys

 

I saw this demo in the forum lately: 

See the Pen YRzRyM by PointC (@PointC) on CodePen

 

I have a draggable horizontal slider in my current project and I would like to make it also scrollable with snapping. Snapping already works. But I have no idea how to make it also scrollable because I am a newbie in JS. 

 

Thank you for any help!

 

Best,

Cédric

 

See the Pen GebNVz by cedi44 (@cedi44) on CodePen

Share this post


Link to post
Share on other sites

By scrollable do you mean it should respond to the mousewheel?

 

You can see in my event handler I listen for four different type of events that can animate the slider. The fourth is on line 95:

activeSlide = e.deltaY > 0 ? (activeSlide += 1) : (activeSlide -= 1);

 

The listener for the wheel event is on line 125

window.addEventListener("wheel", slideAnim);

 

More info about wheel events

https://developer.mozilla.org/en-US/docs/Web/API/Element/wheel_event

 

Does that help? Happy tweening.

:)

 

  • Like 2

Share this post


Link to post
Share on other sites

@PointC yes, that the slides also respond to the mouse-wheel. 

 

Okay cool, but where exactly do you place this code? 

Share this post


Link to post
Share on other sites

I don't have much time to look too far into this, but after a cursory glance, I'd say:

 

You have your onPress event that scales the slider back before moving. If you want the same functionality with a wheel event, you may have to move that scaling tween into a separate function where the wheel event can get to it.  The same would be true of the ticker event that's moving the slider and the tween scale back up to 1. You'll have to get the wheel event to fire those functions or you could also use a separate handler for the wheel with a timeline that scales down --> slides over --> scales up and then updates the active slide.

 

Good luck and happy tweening.

 

  • Like 2

Share this post


Link to post
Share on other sites

@PointC I have the code I used from a tutorial, so I don't really know which parts you exactly mean. Could you maybe point out more specific which code you mean? 

 

Thank you very much for your help. Its very appreciated!  

Share this post


Link to post
Share on other sites

I mean you have to decide if you want the exact same animation for a wheel event as the draggable. Should the slides scale back, slide over and scale up with the wheel? Or should they just slide over? Can you interrupt the wheel animation with a Draggable event or vice versa? If you want the same functionality, you may just want to set up functions that any event handler (click, drag, wheel) can reach. That's pretty much what I did in my demo. You could also write a separate function that creates the animation for a wheel event. You'd just need to make sure your active slide index is updated no matter what event starts the animation. 

 

Here's a basic demo with a wheel event listener.

See the Pen QPpamy by PointC (@PointC) on CodePen

 

Hopefully that helps. Happy tweening.

  • Like 2

Share this post


Link to post
Share on other sites

@PointC thank you very much for your demo. 

 

What exactly is this line here doing? 

tl.to("#targets", 0.4, { x: -120 * activeSlide });

Especially the -120. yre this px? 

And what if I use vw and vh for my widths and heights? 

 

I dont have the scale effect anymore in my slider. So actually the scroll wheel should slide to the next one, but when I just take this line above its still not working. 

Share this post


Link to post
Share on other sites

That's just a hard coded value for the sake of my demo. The boxes are 100px wide with a 20px right margin so I move the container +/- 120px on each wheel event. In your case, you will have to make to measurements rather than using a hard coded number.

 

Happy tweening

 

  • Like 1

Share this post


Link to post
Share on other sites

Here's a fork of my basic demo from above using full page slides rather than a fixed 100px box. I just used xPercent to animate the container.

 

See the Pen EJWpry by PointC (@PointC) on CodePen

 

Happy tweening.

  • Like 1

Share this post


Link to post
Share on other sites

@PointC thanks man, it works now! so cool. Just one question more: Now when I scroll its jumping more than one slide at a time, depending how "much" I scroll my wheel. That behavior is also in your example.  

 

Is there a way to tell the slider to stick only to one slide at a time for each scroll? https://antoni.de/ has this. I wanna achieve something in the direction like they have. Without the mask effect. 

Share this post


Link to post
Share on other sites

Sorry, I don't follow. My slider only moves one at a time. This line prevents it from firing if the timeline is active.

 

  // if the container is animating the wheel won't work
  if (tl && tl.isActive()) {
    return;
  }

 

The slide movement duration is quite small (0.4 seconds) so if you're continuously scrolling the mousewheel, you will trigger the next move when the current timeline is complete. But it's not jumping more than one position per timeline.

  • Like 1

Share this post


Link to post
Share on other sites

Hi @Notch Interactive,

 

If you have a nervous finger or a very sensitive mouse, try this version 'for older men':

 

See the Pen eoyrWK? by mikeK (@mikeK) on CodePen

 

 

Happy slow go tweening ...

Mikel

 

  • Like 1

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...

  • Recently Browsing   0 members

    No registered users viewing this page.

×