Jump to content

Search In
  • More options...
Find results that contain...
Find results in...

Ali Farooq

  • Content Count

  • Joined

  • Last visited

Community Reputation

7 Newbie

About Ali Farooq

  • Rank
  • Birthday 08/15/1993

Profile Information

  • Gender
  • Location
  • Interests
    Video Games, Travelling.

Recent Profile Visitors

The recent visitors block is disabled and is not being shown to other users.

  1. @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
  2. 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
  3. @ZachSaucier thanks man for guidelines, will start working on it and sure will share the code here as they may come handy for others.
  4. @ZachSaucier i am unable to snap it where i want it, secondly there is no innertia applied in my approach.
  5. 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.
  6. 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?
  7. 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.
  8. 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.pau
  9. @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.
  10. 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 on
  11. 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.
  12. Hello guys, I'm trying to do some animation using draw SVG plugin. What I want to achieve seems really simple but I cannot do it. I've searched on the internet and the GSAP forum to see if someone faced a situation similar to mine but all in vain. Hence I'm posting the issue here. If you take a look at my codepen you can see the logo animating. What I need is the bottom two lines of the logo to "Un draw" themselves from the center upto a certain point. I'm attaching an image to show you how the final state of the bottom two lines will be. If anyone can help me figure out how to do this w
  13. Thanks guys! didn't know about the svg origin property. This will definitely get me on the right track.