Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
Ali Farooq

Unexpected SVG behavior on IE/Edge

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

Hello!

I'm trying to do a simple animation. In this animation the hour hand and the minute hand of the clock animates to mimic a clock.  Everything is working as expected in all browsers except Internet Explorer/ Egde (surprise surprise). The problem I'm facing is that Internet Explorer/ Edge is not honoring the transform origin property being applied on the hour and minute hand of the clock.

Anyone else faced a similar problem before? Oddly enough I've made many complex animations using GSAP but Internet Explorer never behaved like this.

See the Pen vepRVa by Ali_Farooq_ (@Ali_Farooq_) on CodePen

Link to post
Share on other sites

Hi @Ali Farooq :)

 

Please try it with svgOrigin instead. That should make IE/Edge behave. (I just eyeballed the coordinates so you may have to tweak them a bit)

 

clockTl.to(minuteHand, 5, { svgOrigin: "-151 292", rotation: "+=720" });
clockTl.to(hourHand, 5, { svgOrigin: "-151 292", rotation: "+=70" }, 0);

 

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

Hopefully that helps. Happy tweening.

:)

  • Like 2
Link to post
Share on other sites

Thanks guys! didn't know about the svg origin property. This will definitely get me on the right track.

  • Like 2
Link to post
Share on other sites

Yep, that looks like an odd Edge bug related to how it reports the getBBox() (the bounding box) of <line> elements. Of course the solution @PointC offered is excellent, or you could convert those <line> elements to <path> elements. In fact, if you've got MorphSVGPlugin, it'll automate that for you - simply call: 

 

MorphSVGPlugin.convertToPath("line");

 

But for lines, it's super easy to manually convert those coordinates. Just format it in the "d" attribute like  x1,y1,x2,y2 and slap an "M" at the beginning. Here's a forked version that seems to work fine for me in Edge:

 

See the Pen b967c0b3df2134e1ce1ca8c32322c4f1 by GreenSock (@GreenSock) on CodePen

 

 

  • Like 2
  • Thanks 1
Link to post
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.

×