Jump to content


Rotate causing slight shift on x axis?

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

Hi, have started getting familiar with JS from AS3, want to work with GSAP of course :D


I'm animating svgtags instead of divs, I'm not sure what is the cause of the issue, I'm doing a basic tween to rotate 360 degrees with repeat at -1. It starts off ok being centered where I want it and also ends at the same location, during the spin though it shifts to the side a bit for some reason. Any ideas?


I'll try get a codepen up after I've slept. Not sure if I'll be able to load the specific graphic via codepen or not.

Link to comment
Share on other sites

Just woken up, and with a fresh mind it occurs to me the pivot was probably at the center of the graphic but the graphic might not have been aligned correctly to have it's pivot at center(basically a bunch of circles). Could be the way I exported the SVG(pulling out separate elements for different animations), or that the SVG js lib I'm using is trimming/cropping the SVG layer instead of being the dimensions expected, thus not positioned correctly in the div. I'll look into this debugging with a css circle as a replacement first to verify if I'm right.


That's what I get for coding all night to the morning!

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.