Jump to content


Why does my bike break in some browsers? Rotation? and transformOrigin?

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 guys, just a bit of fun - I had a play around with animating some svg elements recently, but in some browsers the frame detaches from the wheels when you click to wheelie.


I just wondered whether anyone had any ideas around this really..?




Screen Shot 2018-05-02 at 10.20.15.png

Screen Shot 2018-05-02 at 10.20.11.png

See the Pen WZENbr by twentytwo-jase (@twentytwo-jase) on CodePen

Link to comment
Share on other sites

Hello @twentytwo-jase and Welcome to the GreenSock Forum!


Sorry your having an issue! We have some questions so we can help you better:

  • What browsers is this in?
  • What browser versions is this in?
  • What operating system is this in?

Thanks! :)

Link to comment
Share on other sites

Yeah, tested in MacOS 10.13.4 with Safari 11.1, Chrome 66, Firefox 59, Opera 52, and iOS 11.3 Safari ... issue shows up in Safari (MacOS and iOS) and nowhere else.

Link to comment
Share on other sites

This fixes it in Safari, but of course breaks it everywhere else. But I really don't know why Safari is treating it so differently. @PointC is the SVG master ... so maybe he'll know :)


See the Pen zjwMxP?editors=1010 by sgorneau (@sgorneau) on CodePen


  • Like 1
Link to comment
Share on other sites

Hi @twentytwo-jase :)


Welcome to the forum.


I see that behavior in a few browsers. You may have some loose bolts in your SVG. ;) 


What you're seeing there is some browsers incorrectly rotating groups of groups. You'll find that using svgOrigin is far better than transformOrigin for rotations involving groups. So you'd write it like this:


tlwheelie.to(frameanddaryl, 0.2, {css:{rotation: 2, svgOrigin:"270 340"}})

// you also don't need the CSS wrapper
// you can write it like this
tlwheelie.to(frameanddaryl, 0.2, {rotation: 2, svgOrigin:"270 340"})


I made the change for Daryl and the frame. I think it's okay now, but if you see other groups that look odd, you may have to use svgOrigin for those too.


One other thing that was happening is you were creating all three wheelie timelines each time you clicked. If you click again during the wheelie, your positions starting getting messed up with tween overwrites so I'd recommend creating those timelines once outside of that function. You then play(0) them when you click. You could also add some logic to check if they are active and prevent additional clicks if true. That's entirely up to you.


As I noted above, the CSS wrapper isn't necessary for the tweens. You can use it if you like, but it will save some typing if you skip it. You also don't need to set the svgOrigin on each tween. (unless you're changing it) You'll see in my fork, that I added the svgOrigin to the first tween of the daryl/frame rotation, but didn't add it for the other tweens.


You can read more about svgOrigin here:




See the Pen VxbgXx by PointC (@PointC) on CodePen


Hopefully that helps. Happy tweening and welcome aboard.





  • Like 5
Link to comment
Share on other sites

@PointC legend! So helpful, thanks very much! :D:D:D


I guess I wasn't a million miles away from getting it working - being a Greensock novice anyway.

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