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.
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:
While it works, I was wondering if there is an easier approach in GSAP to achieve this behavior.