Draggable dial with images always upright

[skylarkitchen]

Hey Greensocks, I'd like all of these images to be upright at all times. It works fine until I drag the wheel. The wheel will rotate, but the images do not rotate in the opposite direction. 

See the Pen dyrgyXg by skylarkitchen (@skylarkitchen) on CodePen

[Rodrigo]

Hi,

 

Maybe this demo is a better starting point:

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

 

Hopefully this helps.

Happy Tweening!

[skylarkitchen]

Thanks Rodrigo! That was my starting point, but I'd like to have the images always into the upright position. For reference, this is what I'm hoping to achieve. Thank you! 

[Rodrigo]

Hi,

 

Just don't rotate the images in the initial setup so all keep a zero degrees rotation and then just use a Quick Setter in order to update their rotation using the onDrag and onThrowUpdate callbacks:

https://gsap.com/docs/v3/GSAP/gsap.quickSetter()

 

const rotationSetter = gsap.quickSetter(images, "rotation", "deg");

function setup() {
  let radius = wheel.offsetWidth / 2,
      center = radius,
      slice = 360 / images.length,
      DEG2RAD = Math.PI / 180;
  gsap.set(images, {
    x: i => center + radius * Math.sin(i * slice * DEG2RAD),
    y: i => center - radius * Math.cos(i * slice * DEG2RAD),
    xPercent: -50,
    yPercent: -50
  });
}

setup();

window.addEventListener("resize", setup);
Draggable.create(wheel, {
  allowContextMenu: true,
  type: "rotation",
  trigger: wheel,
  inertia: true,
  snap: {
    rotation: gsap.utils.snap(360 / images.length)
  },
  onDrag() {
    rotationSetter(-this.rotation);
  },
  onThrowUpdate() {
    rotationSetter(-this.rotation);
  }
});

Here is a fork of our demo:

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

 

Hopefully this helps.

Happy Tweening!

[skylarkitchen]

This is perfect, thanks so much for your help!

[skylarkitchen]

One last request, any way to integrate the automatic rotation on start with your solution? I think I'm close, but they rotation does something weird after the drag.

See the Pen vYPQxqX by skylarkitchen (@skylarkitchen) on CodePen

 

[Rodrigo]

Hi,

 

Just create a timeline instance that rotates the wheel and the images and just kill it in the onPress callback:

const tl = gsap.timeline({
  repeat: -1,
  defaults: {
    duration: images.length,
    ease: "none",
  }
})
.to(wheel, { rotation: -360 })
.to(images, { rotation: 360 }, 0)

window.addEventListener("resize", setup);
Draggable.create(wheel, {
	allowContextMenu: true,
	type: "rotation",
	trigger: wheel,
	inertia: true,
  snap: {
    rotation: gsap.utils.snap(360 / images.length)
  },
  onPress() {
    // Kill the timeline here
    tl.kill();
  },
  onDrag() {
    rotationSetter(-this.rotation);
  },
  onThrowUpdate() {
    rotationSetter(-this.rotation);
  }
});

That should work the way you intend.

 

Hopefully this helps.

Happy Tweening!

[skylarkitchen]

Thank you Rodrigo, that worked perfectly!  How would I go about restarting the rotation after the drag ends? 

See the Pen vYPQxqX by skylarkitchen (@skylarkitchen) on CodePen

[Rodrigo]

Hi,

 

Just use the onThrowComplete callback to create the endless timeline again:

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

 

Hopefully this helps.

Happy Tweening!

[skylarkitchen]

🙏🙏🙏 Perfect, thanks so much!

[nobuzlata]

So wonderful, thank you very much 👍👍👍👍👍