Janky SVG on iOS

[leydar]

I'm loading an SVG I created in Inkscape and using it as a control in an Ionic hybrid app with help from GSAP. When a user clicks on the L/R it spins about and disappears to reveal other options. Using it in the browser and on Android works great. On iOS however it's occasionally spotty. This mostly occurs after a reboot. Subsequent interactions are at the desired speed. This might be difficult to reproduce as it's possibly specific to the device I'm using. 

 

Having said that, I'm open to completely redesigning how the thing disappears. I just need it to hide and show itself in some aesthetically pleasing manner. Incidentally, I tried using autoAlpha: 0 and it didn't change the opacity or hide the elements.

 

I've isolated the control in an otherwise blank project to better illustrate the issue (github). The video attached shows the control running on an iPhone SE, iOS 11.4, 64-bit A9 SoC processor (two 1.8GHz cores), 2GB RAM, PowerVR GT7600 (six-core graphics).

 

  addEventHandlers () {
    const yingyang: any = document.getElementById("select-side");

    yingyang.addEventListener("load", function() {
      const content = yingyang.contentDocument;
      const ying = content.getElementById("ying");

      ying.addEventListener('click', function() {
          TweenMax.to(ying, 0.4, {
            scale: 2, x: "+100%", y: "-50%",
            transformOrigin:"100% 0%",
            opacity: 0,
            force3D:false,
            autoRound: false
          });
          this.animateSelectSide(yingyang);
      }.bind(this));
    }.bind(this));
  };

  animateSelectSide(yingyang: HTMLElement) {
    TweenMax.to(yingyang, 0.7, {
      rotation: -270,
      opacity: 0,
      force3D:false,
      autoRound: false,
      onComplete: function() {
        yingyang.style.left = '-500px';
      }
    });
  };

 

 

yingyang.svg

See the Pen gKybxV by leydar (@leydar) on CodePen

[Carl]

Hi and welcome to the GreenSock forums,

 

Sorry to hear you are having some trouble. Not really sure why this would behave like this sometimes (more likely after a reboot) on that specific device.

In order to get the most eyes and devices on this, the best thing to do would be to create a very simple online demo that we can test and edit.

 

We recommend CodePen for this, but there are plenty of similar services (jsfiddle, jsbin, plunkr, etc) that work the same:

 

 

 

The demo only needs to contain the SVG and the animation code.

[leydar]

That's really only true if I could replicate the problem online  It works fine in the browsers. Including Safari. And Safari running an iPhone emulator. FWIW here's a working codepen. 

[GreenSock]

Hm, that sure doesn't look GSAP-related at all because GSAP uses a time-based ticker that always updates the animations according to the current time (rather than moving a certain amount/pixels on each "tick"). In other words, it's resolution-independent time-wise. A 1-second tween will always take 1 second (although the very last update might be a tad late if the device is under tons of pressure). The video you showed had the whole animation slowing waaaay down and each update wasn't synchronized with the actual time. That tells me it's likely something with Ionic or the timing mechanism or something deeper, NOT GSAP. 

 

Unfortunately, I'm not really familiar with Ionic or what kind of idiosyncrasies it may have (or how to fix them). 

 

Oh, and if the thing you're animating is an SVG, it won't help anything to set force3D:true because browsers don't 3D-accelerate SVGs. It shouldn't hurt you either - it just won't help. 

 

I wish I had better news for ya. It may very well be a problem specific to that device, though I have no idea. It's a good sign that it runs so well in all the browsers.