Dial Rotation Throwing not works ( Angular - ts)

[vestels]

Hi everyone,

I’ve been converting a GSAP draggable + inertia demo into Angular with TypeScript. Everything works perfectly fine — the dragging, rotation, snapping, and the continuous spin timeline — except for one thing: the onThrow callbacks.

When I throw the circle, instead of continuing with the velocity of the throw and gradually slowing down back to the default spin speed, it just immediately resumes the original timeline speed (spin.play() with its init speed).

Right now they don’t seem to do anything at all. Even if I completely remove the onThrowUpdate and onThrowComplete callbacks, the result is exactly the same.
 

Here’s the relevant part of my code:
 

  const spin = gsap
    .timeline({ repeat: -1, defaults: { duration: 50, ease: 'none' } })
    .to(circle, { rotation: 360 })
    .to(images, { rotation: -360 }, 0);

  Draggable.create(circle, {
    type: 'rotation',
    inertia: true,
    throwResistance: 16000,
    onPressInit: () => {
      spin.pause();
    },
    onDrag: function (this: any) {
      const angle = (this.rotation + 360 * 100000) % 360;
      spin.progress(angle / 360);
    },
    onRelease: function () {
      spin.play();
    },
    onThrowUpdate: function (this: any) {
      const angle = (this.rotation + 360 * 100000) % 360;
      spin.progress(angle / 360);
    },
    onThrowComplete: function (this: any) {
      spin.resume();
      gsap.fromTo(
        spin,
        { timeScale: 0 },
        { duration: 1, timeScale: 1, ease: 'power1.in' }
      );
    },
  });

 

[GreenSock]

That's likely because you forgot to load/register InertiaPlugin. 

gsap.registerPlugin(InertiaPlugin); 

Obviously you'll need to load that file too. 🙂

[vestels]