rotation acceleration

[zlobul]

I'm new to PIXI and GSAP . I'm building a wheel of fortune game and almost made it . I'm just struggling to fine tune some things like the wheel rotation. I would like the rotation to start smoothly and accelerate then slowly decrease the speed until it stops at the desired position .

 

I have added a codepen which I used as an example to build my code. As you see it starts spinning with maximum speed on click.

 

Any ideas how to made the acceleration on spin start ?

 

Here is the part of my code:

    let rounds = this.getRandomNumber(1, 3)
    const winingSector = this.getRandomNumber(0, 53)
    const rotation = this.piTwo * rounds + this.finalPoisition(winingSector)
    const timeLine = new TimelineMax()   
    timeLine.to(
      this.wheelSprite,
      gameConfig.rotationTime,
      {
        rotation: `+=${rotation}`,
        onComplete: () => {
          this.drawWiningLine(winingSector)
          this.showPrizeText(winingSector)
        }
      }
    )

 

See the Pen oNZBzzz by zlobul (@zlobul) on CodePen

[elegantseagulls]

Hey @zlobul,

 

I think an easing tweak/custom ease could/would help with that maybe try 'sine.inOut', or create your own custom ease: https://greensock.com/docs/v3/Eases

Also, we highly recommend upgrading to GSAP v3 -- It has a much smaller file size more features, and an easier to use syntax (

.

[zlobul]

Thanks a lot , that did it !

I'm already using GSAP v3 in my project !