Jump to content
Search Community

Rotating an element across an origin while keeping the orientation fixed

alahmadiq8 test
Moderator Tag

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

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

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

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 ?editors=0010 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

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.
×
×
  • Create New...