Gsap Draggable Snap is not working!

[Nihal]

Hi so am creating a circular slider using gsap,  and i took this code from one of the forums but somehow my snap functionality is not working, i am new to gsap and don't know majority of stuff. please take a look at this codepen 

See the Pen zYMZgqO by nihalpadwal (@nihalpadwal) on CodePen

[Rodrigo]

Hi @Nihal and welcome to the GreenSock forums!

 

Snap is available on;y with the Inertia Plugin:

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

 

Out of the box Draggable has a Live Snap feature that works as you drag. The other option is to create your own custom logic in the onDragEnd callback, to create your own snapping function. Something like this:

Draggable.create(wheel, {
  allowContextMenu: true,
  type: "rotation",
  trigger: wheel,
  onDragEnd: function() {
    gsap.to(wheel, {
      rotation: gsap.utils.snap((360 / images.length), this.rotation)
    });
  },
  snap: {
    rotation: gsap.utils.snap(360 / images.length)
  }
});

Here is a fork of your codepen using this code:

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

 

Hopefully this helps.

Happy Tweening!

[Nihal]

@Rodrigo Thank you so much! one more thing is there a way to add any className to the center Item?

[Rodrigo]

Hi,

 

I updated the codepen example to add that particular feature:

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

 

Happy Tweening!

[Nihal]

@Rodrigo Thank you !

[Nihal]

Hi @Rodrigo there is one bug in your code i can't seems to solve,  you see if we drag to left active class is added to the next slide but when i drag to right none of the items gets active class ( drag to right from woman's health card to vegan )

[Rodrigo]

Hi,

 

Should be fixed now:

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

 

Happy Tweening!

[Nihal]

Thank you so much! this is what i wanted 😀. I had one more thing am not able to solve. I want to change shape of the wheel for example oval shape. sorry for the inconvenience

[Rodrigo]

Hi,

 

It can be done but is not the simplest thing to achieve:

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

 

Unfortunately we don't have the time resources to create custom solutions for our users. You can contact us for paid consulting or post in the Jobs & Freelance forum to get help there.

 

Good luck with your project!

Happy Tweening!

[Nihal]

Oh okay! thank you so much for your help