Rotating around a poin

[web_roll]

Hi!

When I load this onto our website, one version works fine. On another, the eyes rotate wildly. I checked the xPercent thinking this may have something to do with it, I also checked the version we are using which is the latest.

Any ideas why the eyes might go crazy when loaded onto webandroll.com.au?

Thanks!

See the Pen rqOKJK?editors=1010 by web_roll (@web_roll) on CodePen

[OSUblake]

When you set the transform origin for an SVG element with GSAP, it should look like this when you inspect the style.

element.style {
  transform-origin: 0px 0px 0px;
}

 

The transform origin on your .au site looks like this.

element.style {
  transform-origin: 0px center 0px;
}

 

If I manually change the eyes to use transform-origin: 0px 0px 0px; it works correctly. I don't know why the transform-origin is incorrect, but that's the problem. Make sure you're using the same SVG and code between both sites. I noticed the code in your .au file didn't have the same number of lines as your .uk file.

[web_roll]

Hi Blake,

Thanks for your help with that, I didn't notice that. I checked the code after you said that & realised it had to be UglifyJS which I recently updated. The defaults had changed! Not a GSAP issue so sorry to waste your time with this.

Problem solved though, thanks again. Phew!