Jump to content
GreenSock

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

Ali Farooq

ShockinglyGreen
  • Content Count

    19
  • Joined

  • Last visited

Community Reputation

7 Newbie

About Ali Farooq

  • Rank
    Member
  • Birthday 08/15/1993

Profile Information

  • Gender
    Male
  • Location
    Pakistan
  • Interests
    Video Games, Travelling.

Recent Profile Visitors

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

  1. @ZachSaucier thanks man for guidelines, will start working on it and sure will share the code here as they may come handy for others.
  2. @ZachSaucier i am unable to snap it where i want it, secondly there is no innertia applied in my approach.
  3. 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.
  4. 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?
  5. 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.
  6. 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
  7. @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.
  8. 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
  9. 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.
  10. 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
  11. Thanks guys! didn't know about the svg origin property. This will definitely get me on the right track.
  12. Hello! I'm trying to do a simple animation. In this animation the hour hand and the minute hand of the clock animates to mimic a clock. Everything is working as expected in all browsers except Internet Explorer/ Egde (surprise surprise). The problem I'm facing is that Internet Explorer/ Edge is not honoring the transform origin property being applied on the hour and minute hand of the clock. Anyone else faced a similar problem before? Oddly enough I've made many complex animations using GSAP but Internet Explorer never behaved like this.
  13. Hi! Sorry for the delayed response. There were three national holidays here so I couldn't get to my laptop. Blake thanks for your codepen. I had a similar suspicion regarding my SVG. Since my SVG animation was just a practice exercise, I didn't bother cleaning the code. Big mistake. To see if I was doing everything correctly I animated a simple svg object along a path in an another SVG and everything was working fine. Regarding those values for "xPercent/yPercent", I obtained them by doing "trial and error" approach. I kept on changing values until the objects perfectly started follow
  14. Okay I'm fairly new to GSAP but I think I've found a bug. Maybe I'm using something wrong or maybe it's a bug. Whatever it is I wanted to just highlight it to the GSAP experts incase it really is a bug and not me using the animation library incorrectly. First and foremost I should Tell you that I've tested the codepen animation on ALL major browsers. The animation works correctly on IE, Edge, Chrome, Various Mobile Browsers. The only browser that doesn't render the animation correctly is Firefox. I'm using the latest version of Firefox by the way. Okay so the bug I'm referring to is the
×