Leaderboard

Hi swaranan Something like this?

I'm sure it can be done alot better, but just added a function for clicking the circle to make it jump back to its original position. Click it again to animate it.

Ya I have updated the demo, I am using snap property of draggable and setting throwProps to true. The snap is calculated as follows, It takes the current rotation value as parameter. (Because draggable type is rotation) You first divide the value by 90 because 360/4 is 90 as you have 4 states. Then multiply it with 90. The resulting value is used to snap the draggable. I hope that you spend time understanding the code, also it will be good idea to visit the docs of draggable. Most of the stuff is pretty straight forward to understand there. Though one problem, the current version of draggable has some issue with calculating the snap and sometimes element jumps. This problem doesn't happen with version 1.20.2, following thread has a link to beta preview file see if you can download it otherwise use 1.20.2. Edit: You can use this.rotation to get current position of draggable using onThrowComplete callback.

It rotates, but it's transform origin is center and you have changed it's border radius so rotation is not visible. In order for it to rotate as per that circle you need to "tell" it how to do that. In following thread, there is a demo that does same thing as you are doing. It uses svg but you can replace it with html easily.

From what I could check before it started showing 404, your javascript file is being loaded before any other library files. With javascript disabled, your page still doesn't show anything.

I've found the issue.

Great, that's it Thank you and merry X-Mas

Hi chapolote Adding to Sahil's answer... You can use the onComplete event to trigger a new timeline and use that as a "repeat" where you initialize it with new values.

You don't have to say sorry, it's alright. It will just give you unexpected results when you switch to latest version or some of the features won't work in old files, so best is to check which files you are using.

CommaClub is a real thing. You just have to follow the rules. 1st Rule: You do not talk about COMMA CLUB. 2nd Rule: You DO NOT talk about COMMA CLUB. For anyone missing the joke -- check out one of my all-time favorite films: 'Fight Club'. It's the perfect feel-good movie for the holidays. Merry Christmas everyone!

You should be able to almost copy and paste it. I didn't test this, but something like... var star = this.star_mc; var points = [ { x: -490, y: -170 }, { x: -400, y: -490 }, { x: -105, y: -485 }, { x: 20, y: -285 }, { x: -320, y: 70 } ]; var speed = 300; // pixels per second var prevPoint = points[0]; TweenLite.set(star, { x: prevPoint.x, y: prevPoint.y }); var tl = new TimelineMax({ paused: true }) for (var i = 1; i < points.length; i++) { var point = points[i]; var duration = getDuration(prevPoint, point, speed); tl.to(star, duration, { x: point.x, y: point.y, ease: Linear.easeNone }); prevPoint = point; } TweenMax.to(tl, tl.duration(), { delay: 0.5, progress: 1, ease: Power1.easeOut // whatever ease you want }); function getDuration(point1, point2, speed) { var dx = point2.x - point1.x; var dy = point2.y - point1.y; return (Math.sqrt(dx * dx + dy * dy) / speed) || 0; }