Jump to content
GreenSock

ceindeg

DrawSVG & MorphSVG Mask animation iOS issue

Recommended Posts

I'm experiencing an issue with an SVG mask animation in iOS only. Happens in iOS Safari & Chrome.

I'm using the MorphSVG and Draw SVG plugins to create the animation (see codepen -sorry the html is a mess - it's generated dynamically so I've done a copy/paste)

 

On iOS the animation doesn't run at all, in fact nothing shows up. It works fine on Android, also works on all desktops and I'm totally baffled. Any ideas? 

 

image.png.cc112f63a7d5eaff3f26a5a53a221920.png

 

All help much appreciated!!

 

Thanks

Louisa

See the Pen GdWLxy by clkdigital (@clkdigital) on CodePen

Link to comment
Share on other sites

I tried sending the "full page" view of your demo to my phone and got this warning: http://prntscr.com/jcdsx1

 

I think you should try testing the demo on your phone in "full page" or "debug" mode.

The codepen editor sometimes causes problems on mobile.

 

If the problem still persists, please try to reduce your demo to single tween on a single shape. It will be much easier for us to help you.

  • Like 1
Link to comment
Share on other sites

Hi @ceindeg :)

 

I can't test on iOS to see what you're seeing, but my guess would be that it's being fussy with drawing circles in the mask. One thing to try would be converting those circles to paths. You can do that in your vector software or the MorphSVG plugin has a convert to path method.

 

https://greensock.com/docs/Plugins/MorphSVGPlugin

 

Circles present some strange issues from time to time. We have a big circles thread that may also have some useful info for you.

Hopefully that helps. Happy tweening.

:)

 

  • Like 2
Link to comment
Share on other sites

Hi Craig, I mentioned in my post I'm already using the MorphSVG plugin so that wouldnt be the issue.

Link to comment
Share on other sites

Your pen is loading the Morph plugin, but you're not converting the circles to paths. It doesn't do it automatically. You'd need to add this code:

 

MorphSVGPlugin.convertToPath("circle");

 

Happy tweening.

:)

 

  • Like 1
Link to comment
Share on other sites

@Carl thanks for pointing that out I didn't realise! I've now verified my email so it should work. 

 

@PointC

Thanks for the spot - I had included the MorphSVG code into my original code I just forgot to include it in my codepen.

 

I've now added to my codepen 

See the Pen GdWLxy by clkdigital (@clkdigital) on CodePen

 but the problem persists. Even in full screen mode the charts don't render...

 

image.png.6786c6915f44332da03d6f3aa29bb5ec.png

Link to comment
Share on other sites

I've create a new copdepen with a single shape / mask animation

 

See the Pen KRWjmv by clkdigital (@clkdigital) on CodePen

 

This also doesn't render at all on iOS... any ideas? MorphSVG plugin definitely incuded and the issue persists.

Link to comment
Share on other sites

I just tested on my iPad. Everything looks fine to me in Safari and Chrome. I don't have a Mac so I can't test desktop versions of those browsers on iOS, but maybe someone else can check for you.

  • Like 1
Link to comment
Share on other sites

@PointC thanks that's really interesting, my iPad is really old and doesn't play it (not overly worried about that) but it definitely doesn't work on iPhones  - even new ones :-\

Link to comment
Share on other sites

I have an older iPad 2 for testing and it played on that for me. I wish I could test more for you.

  • Like 1
Link to comment
Share on other sites

@PointC thank you that's so nice! I've got an iPad 4 and it doesn't play on that... Safari or Chrome. I wonder if I've found a GSAP bug? I can't see anything amiss with my code?

Link to comment
Share on other sites

o.k. -  i grabbed another iPad from someone else. This is a 3 and it's running iOS 10.3.3. The animation does not work on that one. 

 

My iPad 2 running iOS 9.3.3 is playing the animation. The old clunker with an outdated operating system works fine. Weird. :blink:

  • Like 1
Link to comment
Share on other sites

This has nothing to do with GSAP - it's a rendering issue with Safari. GSAP is setting all the values properly, but Safari is ignoring the updates and basically not drawing the revised graphics to the screen. To force Safari to redraw things properly, you can change the transform of the affected (masked) elements. It's like Safari says "oh, okay, something significant changed about this thing, so let me rasterize it again and redraw the pixels". In this case, it's the <g> elements. Even if you literally change x (or y or rotation or whatever) by 0.01, it'll trigger it. Here's a fork: 

 

See the Pen 44b8cb94f2be7e0e1e6110bca2c01d7a by GreenSock (@GreenSock) on CodePen

 

Does that help? 

  • Like 1
  • Thanks 1
Link to comment
Share on other sites

That sounds like what we've been seeing in Edge and its sudden fussiness with masks. I guess a slight rotation to mask animations is just a new fact of life. Browsers sure are fun.

 

  • Like 1
Link to comment
Share on other sites

Jack that works like a charm!! Thank you so much. 

 

I already had a tiny rotation on the mask tween to fix an IE/Edge bug...


If only IE & Safari could use the same bug fixes that would make it easier!!

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