Jump to content


can't rotate png image around it's center

Go to solution Solved by deanpien,

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

The codepen shows what I am trying to do. A pretty simple action. However, when I try do the same with a png image it doesn't turn around it's center. It turns around a center outside of the image. How can the center be placed inside the png? Thanks in advance.

See the Pen ZYyOEj by anon (@anon) on CodePen

Link to comment
Share on other sites

I didn't see the png image in your codepen. Did I miss something? Can you show us the problematic version, not the one that works the way you expect? Thanks a bunch. 


It sounds like a box model issue, like you've got your img set to position:absolute and you're trying to rotate the container which collapsed or something unrelated to GSAP. Are you animating the actual <img> element? And has the image fully loaded when you start animating? 

  • Like 1
Link to comment
Share on other sites

The png in my project is wrapped inside a div, inside an li tag. The li tag has the css property "display: block; " I have not had a problem animating the other div's inside the same li tag, but trying to rotate this div around it's center is giving a problem. The image has fully loaded when I start animating.

Link to comment
Share on other sites

  • Solution

Thanks a lot, that solved my issue. I was rotating the div in which the image was wrapped, instead of rotating the image itself.

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.