Jump to content
Search Community

tick sound on 26 points while rotation the circular image using draggable plugin

Ali Farooq test
Moderator Tag

Go to solution Solved by ZachSaucier,

Recommended Posts

I am new to GSAP, still learning its way, quite power library but now facing issue, i have a spin wheel animation, i have used draggable plugin to spin the wheel, now there are 26 small boxs in the image height "13.85" , so i move multiples of 13.85deg on single move , and add the tick sound on button, but when i drag the wheel i want the tick sound on each 13.85 positive and negative, so it feels like real wheel, i also want to add hand animation to it as finger is making the wheel go up and down. my design was complex but for easiness have put short code on codepen. I also have two images one for front and one for back, when i rotate it as 3d , i am seeing glitches , i will be very grateful if someone help me.

See the Pen VwjEExG?editors=0010 by irfansaeedkhan (@irfansaeedkhan) on CodePen

Link to comment
Share on other sites

const draggable = Draggable.create("#fruitdetails", {
    type"rotation",
    inertiatrue,
    snapfunction(value) {
        return Math.round(value / 13.85) * 13.85;
    },
    minimumMovement10,
    // ease: Linear.easeNone,
    easeBounce.easeOut,
    throwProps:true,
 onThrowUpdate: function(){
        var abcd =  getCurrentRotation(fruitDetails);
     if(abcd%13.85 ===  0){
       console.log(abcd);
          audio.play();
      }
     else{
           audio.pause();
         audio.currentTime = 0;
     }
        
  },
     onDragStart: function(){audio.play();audio.loop = true;},
    onDragEndfunction(){  audio.pause(); audio.currentTime = 0;},
    
 
  });
  
Link to comment
Share on other sites

Sir you are not getting my question, have you seen fortune wheels, there is arrow fixed at one point, whenever we push the wheel, the wheel start spinning and whenever the prize passes that arrow it makes tick sound, on each prize.  how will i do it using gsap.

Link to comment
Share on other sites

ohh! my bad! i didn't understood what were you saying,  thank you so much, this code works like charm.
just one more thing to ask if i also want to translateX()  another image, while this trigger hits and make sound as its doing, so i should simple put that animation inside handleself() function right?

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