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

Members

4

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

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. ## Rotating an element across an origin while keeping the orientation fixed

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
3. ## 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!
4. ## 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. 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.
×