Jump to content
Search Community

Creating a circular motion with svgs

katawura 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 katawura, and Welcome to the GreenSock Forum!


What I would do is first start off with your drawn SVG circular shapes in a state where they are flat. Meaning not to have them already drawn in a  rotated and perspective state. Since animating your current SVG could look weird since the smaller circular shapes are smaller in the background then those circular shapes in the foreground. Then when the smaller ones come to the foreground, and the bigger ones rotate to the background it can ruin the effect of depth and perspective.


If it was me i would basically draw the SVG in a 2D flat state. With all your circular shapes around your "L" equally the same size. Then once you have that you would use GSAP and CSS to have it rotated slightly in the Y-AXIS (y). And then rotate all the circular paths parent. This way when the circular shapes get rotated around the "L" shape they will have the proper perspective.


Usually just getting all the pieces your animating in place first and then it makes it easier to animate them with GSAP. So instead of drawing the circular shapes in an already rotated state with  perspective in your paths. You use CSS and GSAP to position and animate your circular shapes around your "L" to achieve the right perspective.


Does that make sense? :)

  • Like 2
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...