Jump to content
GreenSock

Arpi

Not working in IE 11, MS Edge

Recommended Posts

Hi guys,

 

Thank you for your awesome work,

 

I've created an animation with TweenMax (I know my code is far from good code you'ld like to see), however for now I have two  concerns: 

1. I can't get it work in IE 11 and MS Edge, tried different versions but can't find the issue

2. Wanted to play animation when user in that section, I've tried with Scrollmagic, but after that my page started infinite loading.

Can you advise please? You can see the code in the Codepen URL. Thanks in advance.

See the Pen MXvYZK by arpine-arakelyan (@arpine-arakelyan) on CodePen

Link to comment
Share on other sites

I am not sure what is going on here but but IE is doing really weird stuff. I would definitely recommend getting club membership and using drawSVGPlugin.

 

I reduced the demo to 2 paths and I am noticing following behavior,

  1. If I don't use getTotalLength method then animation works but ofcourse you want to get length of path so not the solution.
  2. If I remove stroke-width from path then animation works even if I use getTotalLength.
  3. So basically using getTotalLength and stroke-width together causes animation to freeze.
  4. If I use both and instead of animating single path if I animate all paths then animation works.
  5. If I remove all other paths and use 'path' query selector then animation freezes again.
  6. I tried using different svg and it behaves same

@GreenSock what is going on here? This has to be weirdest thing I have seen so far. I can understand that it can be rendering issue but how does getting total length affects it. Super weird.

 

See the Pen gKxaqx?editors=1010 by Sahil89 (@Sahil89) on CodePen

 

  • Like 3
Link to comment
Share on other sites

IE, Edge, and Firefox all have various bugs related to these types of animations which DrawSVGPlugin works around. That's why @Sahil recommended getting a Club GreenSock membership so you can use it. You can try it for free here: 

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

 

Examples of the bugs: if you call getTotalLength() on a <path>, IE locks the repaint area of the stroke to whatever the current dimensions are on that tick. Firefox throws errors if the element isn't visible. Edge won't repaint things correctly if stroke-linecap isn't a particular value, and some browsers render artifacts if there's a very small dash. Again, we've implemented various workarounds in DrawSVGPlugin to solve all of these things - that's why we don't recommend doing a raw strokeDashoffset animation.

 

Happy tweening!

  • Like 4
Link to comment
Share on other sites

Before DrawSVG it was maddening trying to work with SVG's across browsers. 

  • 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.
×