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

[twentytwo-jase]

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..?

 

Cheers,

J

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

[Jonathan]

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!

[Shaun Gorneau]

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.

[Shaun Gorneau]

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.

 

[PointC]

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:

https://greensock.com/gsap-1-16

 

 

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

 

Hopefully that helps. Happy tweening and welcome aboard.

 

 

 

[Shaun Gorneau]

@PointC never disappoints!

[twentytwo-jase]

@PointC legend! So helpful, thanks very much! 

 

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