Jump to content
Search Community

alahmadiq8

Members
  • Posts

    4
  • Joined

  • Last visited

About alahmadiq8

  • Birthday 07/15/1991

Contact Methods

Profile Information

  • Location
    Santa Barbara, CA

alahmadiq8's Achievements

9

Reputation

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