Lottie-web: Shape layers cropping when stroke width is too high

Created on 4 Mar 2017  路  4Comments  路  Source: airbnb/lottie-web

I'm animating a few shape layers and when I export them, bodymovin is cropping the corners.
It's apparently because the stroke width I have in there is 10px but when I lower it to anything below 7, the cropping seems to stop.

Is there something I'm not doing or a work around for this?
Here's my ae file - https://dl.dropboxusercontent.com/u/113452155/z_bodymovinAELinks/shape_problem.aep

Thanks!

Most helpful comment

@phantomboogie sure
here is your animation with the example
if you expand the layer named "SQUARE" > Contents
There is a second "Rectangle 2" with a path as large as the stroke in Rectangle 1. The fill has opacity 0 so it won't render anything visible.
shape_problem.zip

All 4 comments

Having a similar issue with strokes getting cropped on shape layers (both Chrome and Edge browsers tested and having the same issue).

yes, this is an issue with all browsers. They don't handle correctly masked strokes.
If you add a rectangle with transparent fill that covers the surface of the shape including it's stroke on each layer, it should solve the issue.
Let me know if you need a demo file.

Thanks. Not sure what you mean there.
Could I get that demo file please?

@phantomboogie sure
here is your animation with the example
if you expand the layer named "SQUARE" > Contents
There is a second "Rectangle 2" with a path as large as the stroke in Rectangle 1. The fill has opacity 0 so it won't render anything visible.
shape_problem.zip

Was this page helpful?
0 / 5 - 0 ratings

Related issues

samiam2017 picture samiam2017  路  3Comments

ochanje210 picture ochanje210  路  3Comments

Ipaulsen picture Ipaulsen  路  4Comments

leantide picture leantide  路  3Comments

joelponce picture joelponce  路  4Comments