[Rotating an element across an origin while keeping the orientation fixed]

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!

[Rotating an element across an origin while keeping the orientation fixed]

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

 

 

 

[Rotating an element across an origin while keeping the orientation fixed]

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! 

[Rotating an element across an origin while keeping the orientation fixed]

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