Issue with Mask in lottie svg.

thnkling commented 4 years ago

Tell us about your environment We're using an in-app browser (webkit browser) within a native ios app.

Browser and Browser Version: cordova in app browser CDVWK
After Effects Version: 17.0.2

What did you do? Please explain the steps you took before you encountered the problem. I'm trying to animate shapes in a mask, I've tried alpha matte and additive mask. Additive works on canvas but canvas is causing a bunch of other issues in the app.

What did you expect to happen? The shapes should not expand outside the shape its inside. It renders fine in After Effects and in the browser, but when it goes to an in-app webkit browser, masks stop working.

What actually happened? Please include as much relevant detail as possible. The animating shapes go outside the shape I want to mask.

Please provide a download link to the After Effects file that demonstrates the problem. https://www.dropbox.com/s/l5hz8mv1wcavsts/printer-precomlinescards.aep?dl=0

JohnathanWhite commented 4 years ago

This issue is occurring with renderer: 'svg'. Switching to canvas solves this but causes massive performance problems within the in app browser making that not an option. Here is the config for the svg version:

   Lottie.loadAnimation({
      container: document.getElementById('bm'),
      renderer: 'svg',
       loop: true,
       autoplay: true,
       animationData: ...

and here is the canvas setup

  const c = document.getElementById('bm');
  const ctx = c.getContext('2d');

  Lottie.loadAnimation({

    renderer: 'canvas',
    rendererSettings: {
      context: ctx,
      scaleMode: 'noScale',
    },
    loop: true,
    autoplay: true,
    animationData:

bodymovin commented 4 years ago

Hi, using track matte masks can have a big performance impact. Probably using an in-app browser makes it worse. Can you clarify what are the issues you are seeing with the canvas / svg renderers using regular additive masks?

airbnb / lottie-web

Issue with Mask in lottie svg. #1977