Ali Farooq

@OSUblake thanks for the quick solution... I really apricate that...

I want to create a section like the video attached. If some one have experienced it will be a great help thanks. I have created animation along my svg path but want to stop it on different points like in the video. Untitled- Jun 17, 2021 6-30 PM.mp4

it ok, I will get it done, thank you for your response.

@ZachSaucier thanks for reply, yes i want to recreate my animation as viewport is resized during or end of the animation, but i want only to use JS not jQuery if possible thank you

my animation is doing manything but main issue hai scale , as i want my images to scale very close to large screen and scale less in small screens, its not about image size, i just want to be scalling specific sizes. is there any way to do that in gsap

@ZachSaucier thanks man for guidelines, will start working on it and sure will share the code here as they may come handy for others.

@ZachSaucier i am unable to snap it where i want it, secondly there is no innertia applied in my approach.

i can rotate my image using draggable, but now as i only move my mouse up and down in specific area , i want same rotation to happen as it happens on dragable plugin type : rotation. I want this to happen because of its "snap" and "inertia" functionality. sharing simplistic code to show what i am trying to do.

Thank you man, you saved my day. have a great day.

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?

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.

const draggable = Draggable.create("#fruitdetails", { type: "rotation", inertia: true, snap: function(value) { return Math.round(value / 13.85) * 13.85; }, minimumMovement: 10, // ease: Linear.easeNone, ease: Bounce.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;}, onDragEnd: function(){ audio.pause(); audio.currentTime = 0;}, });

@ZachSaucier thanks for reply, i will clear my question, the wheel behind can be rotated by using mouse as i used draggable plugin, there are 26 points in my wheel, i want it to make sound when each point of my wheel passes the specific point.

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.

Thanks @mikel for the innovative idea. I went with your solution. Although I had to modify my SVG and write some additional code but the result was just as I needed and totally worth the few extra lines of code. @PointC I didn't know we could use svg masks like that. Thanks for the info! I've updated my pen if you guys wish to see the final result.