Jump to content
GreenSock

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

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 ARROW_RADIUS = 15;

const getCoord = (index, num) => {
  const angPI = index * 360 / num * Math.PI / 180;
  const x = Math.cos(angPI) * RADIUS + RADIUS - ARROW_RADIUS;
  const y = Math.sin(angPI) * RADIUS + RADIUS - ARROW_RADIUS;
  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

  • Like 1
Link to comment
Share on other sites

Hi @alahmadiq8 :)

 

Welcome to the forum.

 

How about something like this?

 

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.

:)

 

  • Like 5
  • Thanks 1
Link to comment
Share on other sites

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

 

 

  • Like 4
Link to comment
Share on other sites

Waw thank you so much for the quick response :-D.

 

@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! 

  • Like 5
Link to comment
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" :D

  • Haha 4
Link to comment
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!

  • Like 7
  • Thanks 1
Link to comment
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" :D

 

Oh, I like that. Did you hear about this stream on Twitch?

https://twitter.com/keyframers

 

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. :-D

 

  • Like 2
Link to comment
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

 

 

 

  • Like 1
Link to comment
Share on other sites

2 hours ago, alahmadiq8 said:

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.

 

 

 

 

 

  • Like 3
Link to comment
Share on other sites

Quote

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

 

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

  • Haha 3
Link to comment
Share on other sites

15 hours ago, OSUblake said:

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

 

rofuWPa.jpg

  • Like 1
  • Haha 4
Link to comment
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!

  • Like 2
Link to comment
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.

 

  • Like 3
Link to comment
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." :lol:

https://www.twitch.tv/videos/247102814?t=01h52m32s

 

  • Like 1
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    No registered users viewing this page.

×