Jump to content
Search Community

Make draggable Slider also scrollable

Notch Interactive 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 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

Link to comment
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
Link to comment
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
Link to comment
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
Link to comment
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. 

Link to comment
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
Link to comment
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. 

Link to comment
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
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...