Jump to content
Search Community

How to recreate draggable slider with snap and smooth slides transform?

Julia Shikanova test
Moderator Tag

Go to solution Solved by OSUblake,

Recommended Posts

Hello

 

At the bottom of the page - https://malvah.co/ you can find very smooth fluid-like (idk how to describe it) draggable slider/carousel with snap. I need to mimic the same behaviour, but i can't seem to figure out how. Any help is highly appreciated. Thanks in advance

See the Pen JjWwJaK?editors=0110 by jshikanova (@jshikanova) on CodePen

Link to comment
Share on other sites

  • Julia Shikanova changed the title to How to recreate draggable slider with snap and smooth slides transform?

That looks like maybe locomotive scroll for the fluidness, maybe some webGL on the images, masking, cursor tracking and hover events as well as dragging and snapping. 

There's a *lot* going on in that slider, I'm afraid it's a little beyond the abilities of the forums to put together in a demo.

 

What you have is a good start though. Is there a particular bit you're trying to mimic?

Link to comment
Share on other sites

1 hour ago, Cassie said:

There's a *lot* going on in that slider, I'm afraid it's a little beyond the abilities of the forums to put together in a demo.

 

 

Yes, it makes sense, sorry I didn't specify it from the beginning.

 

1 hour ago, Cassie said:

Is there a particular bit you're trying to mimic?

 

Mostly I need to replicate slides transformation (scale and skew) onDrag, easing (very fast at the beginning and slower near the end) and snapping.

 

If anyone can help me with one part or another I would be extremely grateful 

Link to comment
Share on other sites

  • 1 month later...

There's a migration guide here:

 

We don't really provide conversion services for free here in the forums, but you're welcome to either hire someone in the Jobs & Freelance forum or contact us to go through all that code and convert it for you for a fee. It should be very doable. Or if someone else has the time to do it all for you, great.

  • Like 1
Link to comment
Share on other sites

I wasn't trying to make someone else to redo entire thing for me, it wasn't my intention at all. I'm sorry if it sounded this way.

 

Original v2 demo: 

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

 

Rewritten v3 demo: 

See the Pen vYmjxGj by jshikanova (@jshikanova) on CodePen

 

I managed to convert almost everything, excerpt one line in onRelease callback: 

throwProps: { x: { end: this.endX } }

And I have a few issues with rewritten demo [video]:

1) slides get stuck with skew

2) dragging towards an edge makes slider content jumpy

 

Can it be the missing line with throwProps? Is there similar thing in v3? Or is it something else?

Link to comment
Share on other sites

  • Solution

Hi Julia!

 

ThrowProps is deprecated. See the IntertiaPlugin docs.

https://greensock.com/docs/v3/Plugins/InertiaPlugin

 

Another change from v2 to v3 is the overwrite behavior. If we're animating the same properties with different durations, we should definitely overwrite those animations.

 

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

 

 

  • Like 1
Link to comment
Share on other sites

4 hours ago, OSUblake said:

Thank you, it works great!

I've noticed another issue with this demo (even with original) [video]. Basically resize breaks current slider positioning. Recalculating setBounds on window resize doesn't help. Possible solution is to recalculate slider and proxy x position, but I'm not sure is it possible to do so.

Link to comment
Share on other sites

4 hours ago, OSUblake said:

 

 

 

Thank you, it works great!

I've noticed another issue with this demo (even with original) [video]. Basically resize breaks current slider positioning. Recalculating setBounds on window resize doesn't help. Possible solution is to recalculate slider and proxy x position, but I'm not sure is it possible to do so.

Link to comment
Share on other sites

You're probably going to have to figure out what the x value should be on resize in that setBounds function.

 

const setBounds = () => {
  sliderWidth = slides[0].offsetWidth * slides.length;

  gsap.to([slider, proxy], { 
    width: sliderWidth, 
    x: 0 // ??? hard reset
  });
};

 

Link to comment
Share on other sites

On 8/4/2021 at 3:49 PM, OSUblake said:

You're probably going to have to figure out what the x value should be on resize in that setBounds function.

 


const setBounds = () => {
  sliderWidth = slides[0].offsetWidth * slides.length;

  gsap.to([slider, proxy], { 
    width: sliderWidth, 
    x: 0 // ??? hard reset
  });
};

 

 

Yes, I figured it might be the case, but hoped there're a better solution.

 

I recalculated new x position on resize, but it's far away from perfect:

const setBounds = () => {
  prevSliderWidth = sliderWidth;

  sliderWidth = slides[0].offsetWidth * slides.length;

  const newX =
    (sliderWidth / 100) *
    (gsap.getProperty(proxy, "x") / (prevSliderWidth / 100));

  gsap.to([slider, proxy], { width: sliderWidth, x: newX });
};

setBounds();
window.addEventListener("resize", throttle(300, false, setBounds));


I had to use 300ms throttle, any less then that breaks recalculation for some reason. And 300ms throttle makes layout on resize look jumpy unfortunately


See the Pen PomdNGV?editors=0011 by jshikanova (@jshikanova) on CodePen

 

Thanks to everyone who helped me to figure it out!

  • Like 1
Link to comment
Share on other sites

  • 2 months later...

I'm not very familiar with all the code in that demo, but in theory, I believe you could just put the proxy element BELOW the rest, set zIndexBoost: false (so it doesn't get placed on top when pressed), and set the trigger to be the container like this: 

See the Pen qBXoVEG?editors=0010 by GreenSock (@GreenSock) on CodePen

 

But if I were building this I'd probably do it a bit differently. It's beyond the scope of the help we can offer for free in these forums, though, to tell you how to wire up all the logic stuff and get custom functionality. We're happy to answer any GSAP-specific questions, though.

 

Good luck!

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