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

# Rotating an element across an origin while keeping the orientation fixed

## Recommended Posts

Hello everyone,

I apologize in advance for the noob question. I've been learning GSAP and I'm loving it! Here a slight challenge that I'm currently facing.

• I have an element that I want to move in a circular motion across an origin.
• The element however, must keep its orientation fixed.

Think of how a Ferris Wheel rotates while the carts stay fixed. The following snippet won't work since the element will not keep its orientation.

```TweenMax.to('.cart', 5, {
rotation: '360_cw',
transformOrigin: "140 15",
ease: Power0.easeNone,
repeat: -1,
})```

Checkout the codepen below to see what I mean.

See the Pen qoQMeV by mhd1991 (@mhd1991) on CodePen

The only way I could solve this is to use the Bezier Plugin. Here is my attempts:

```const RADIUS = 125;

const getCoord = (index, num) => {
const angPI = index * 360 / num * Math.PI / 180;
return { x, y };
};

let points = [];
for (let index = 0; index < 360; index++) {
points.push(getCoord(index, 360));
}

TweenMax.to('.cart', 5, {
bezier: {
type: 'thru',
values: points,
},
ease: Power0.easeNone,
ease: Power0.easeNone,
repeat: -1,
})```

Here is the codepen link below:

See the Pen jzQeKV?editors=1111 by mhd1991 (@mhd1991) on CodePen

While it works, I was wondering if there is an easier approach in GSAP to achieve this behavior.

See the Pen qoQMeV by mhd1991 (@mhd1991) on CodePen

• 1
##### Share on other sites

Welcome to the forum.

See the Pen RMqevX by PointC (@PointC) on CodePen

I just grouped the contents of the circle and rotated it in the opposite direction with an equal duration and ease. Hopefully that helps.

Happy tweening and welcome aboard.

• 5
• 1
##### Share on other sites

From Sine eases to Cubic Beziers, this thread has you covered.  @PointC solution is good too!

• 4
##### Share on other sites

Waw thank you so much for the quick response .

@PointC Thank you for sharing your solution. It way more easier and concise!

@OSUblake This is exactly what I was looking for. This is such a great resource! I apologize for the duplicate question.

Again Thank you for the prompt response!

• 5
##### Share on other sites

@alahmadiq8 Oh wait, one more example using the ModifiersPlugin.

See the Pen pLQQvd by osublake (@osublake) on CodePen

• 6
##### Share on other sites

Well, there you go. If you want simple, I can handle that. If you want fun with math and trig, Blake is the man.

We're starring in a new buddy cop show this fall on CBS: "Math Whiz and Simple SVG Guy"

• 4
##### Share on other sites

Did someone say like a ferris wheel?

See the Pen wBbKs by GreenSock (@GreenSock) on CodePen

I had this laying around from 4 years ago.

Great stuff, Craig and Blake!

• 7
• 1
##### Share on other sites

11 minutes ago, PointC said:

We're starring in a new buddy cop show this fall on CBS: "Math Whiz and Simple SVG Guy"

They are always are hanging out in the Slack that @Carl recommend joining... so stop slacking and join.

But after seeing the steam, I figured out why they call themselves "The Keyframers". They are going to focus mostly on CSS/WAAPI keyframe animations. We need to move our show over to Twitch, and call it "The Timeliners". We'll battle back and forth between the simple and the complicated, SVG and canvas, jQuery and Angular, etc. And of course, we'll be sponsored by GSAP.

• 2
##### Share on other sites

2 hours ago, Carl said:

Did someone say like a ferris wheel?

See the Pen wBbKs by GreenSock (@GreenSock) on CodePen

I had this laying around from 4 years ago.

Great stuff, Craig and Blake!

That's so cool !!

I created mine few weeks ago. I used the bezier plugin I mentioned which is really an overkill compared on how simple yours it

See the Pen RMpGqR by mhd1991 (@mhd1991) on CodePen

• 1
##### Share on other sites

I created mine few weeks ago. I used the bezier plugin I mentioned which is really an overkill compared on how simple yours it

It's almost exactly like the ModifiersPlugin one I did, except using a Bezier like that will result in a lot more calculations. It's still a really nice animation though.

I just looked at your pens and noticed you had something with The Nature of Code. Really cool book. I was just telling somebody about that. Daniel Shiffman has a lot of great videos coding up stuff from it.

And here's the secret to getting mouse coordinates inside an SVG. Everything changes once you have a viewBox on it, which messes everybody up.

• 3
##### Share on other sites

Quote

We're starring in a new buddy cop show this fall on CBS: "Math Whiz and Simple SVG Guy"

@PointC I always got feeling of Blake as Goku and you as Krillin. Sadly krillin keeps dying.

• 3
##### Share on other sites

15 hours ago, OSUblake said:

We need to move our show over to Twitch, and call it "The Timeliners".

• 1
• 4
##### Share on other sites

12 hours ago, OSUblake said:

It's almost exactly like the ModifiersPlugin one I did, except using a Bezier like that will result in a lot more calculations. It's still a really nice animation though.

I just looked at your pens and noticed you had something with The Nature of Code. Really cool book. I was just telling somebody about that. Daniel Shiffman has a lot of great videos coding up stuff from it.

And here's the secret to getting mouse coordinates inside an SVG. Everything changes once you have a viewBox on it, which messes everybody up.

Thank you so much. these are awesome resources!  I recently started with this book. Now i'm more excited to check it out again. I'm also gonna check Daniel Shiffman's youtube channel!

• 2
##### Share on other sites

I love the show ideas and concept art! (seriously)

I even think Timeliners has potential as a thrilling amusement park ride. (not so seriously)

Blake, I wouldn't be surprised if someday you saw something about GSAP on the @keyframers show. I know Shaw uses it quite a bit (

See the Pen vJNMQY by shshaw (@shshaw) on CodePen

|

See the Pen eGYZOe by shshaw (@shshaw) on CodePen

).

He's a good guy.

• 3
##### Share on other sites

14 hours ago, Carl said:

Blake, I wouldn't be surprised if someday you saw something about GSAP on the @keyframers show.

Oh, I wouldn't be surprised either. I was making a generalization about the focus on CSS/WAAPI animations as it's a way to reach a larger audience. They do mention GSAP at the end when they were talking about how the animation isn't dynamic, so the user would always have 7 emails.

"It's a feature, not a bug."

• 1