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.

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 with drawSVG plugin or whether what I'm trying to achieve is possible at all that would be great. Thanks again.

Thanks guys! didn't know about the svg origin property. This will definitely get me on the right track.

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.

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 following the correct path. After many attempts I was able to get the dollars and eyes working. Yes that's a bad method. That's why these values looked so abrupt. I do have one question. I'm animating 8 elements that are in constant animating state. They rely only on "transforms" for their animations e.g transitions, rotations etc. I've read that using transforms is efficient. But in my case they are slowing the browser on some older mobile devices. Is their any way besides keeping the SVG code clean and concise, using transforms to help run the animation smoothly? Am I just animating too many elements at once and it's slowing the browsers on some older devices? I know that GSAP is highly efficient (I've seen benchmark scores and compared with other libraries) but maybe I'm writing the code in an inefficient way?

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 various "Eyes" that are following a path (I've highlighted the path for your convenience). The eyes are not following the path correctly on Firefox. What I wanted was to make the eyes appear from one mobile and go into the other mobile. This is happening on all browsers except firefox. I apologize for the long SVG code. The two paths I'm using for this are found at the very bottom of the svg code. One path for the "dollars" and the other for the "eyes". The relevant javascript code for this is from line 1 to line 16. Thanks!

Nice! I didn't take into account the slight rotation being applied and how it would affect the gear animation. Thanks a bunch!

Hi, I've encountered a small bug relating to the rotation property. As you can see in my codenpen I'm rotating a single Gear in the SVG. It is being animated to 360 degrees and is repeating indefinitely. The behavior is as expected except the fact that if you observe carefully, there is a slight jerk/glitch/delay whatever you call it, in the animation. It becomes more noticeable as we slow down the animation. I swear I saw a post regarding this bug on this forum some time ago but now I can't find that post that's why I'm asking again. Is there any way this can be fixed? Any help would be really appreciated. Many Thanks! Ali

Hi All, I've been using GSAP for 2 months now and It has saved me a LOT of time and headache. It is an awesome library. Recently I discovered that I can use Scroll Magic library with GSAP and I've been trying to make an animation using both of them. Here's the link to my codepen demo: The idea is that as we scroll down the page, the text "DESIGNWORX" should translate to the left and at the same time opacity should animate from 1 to 0. I've achieved that. The problem I'm facing is that I want to reverse this animation i.e the text "DESIGNWORX" should translate back and opacity animate from 0 to 1 ONLY when I reach the top of my page while scrolling back. I've tried to do that by using "triggerHook" method as you can see in my pen but sadly I've failed. I've also searched all over the internet for answers but all in vain. I was hoping if someone could help me in this regard. I'm not an expert in javascript and would really appreciate any tips or help. Thanks in advance! Ali

Sorry for bumping an old thread but I was searching for a way to indefinitely repeat a rotation animation using TweenLite. When I use the function stated above I get syntax error "Uncaught SyntaxError: Unexpected token :" I realize that maybe the plugin syntax has changed over the past 6 years. Is there another way in TweenLite to infinitely continue an animation? Due to size constraints I can't use TweenMax for this. Thanks!