Joolyan
commented
4 weeks ago Just realised that the issue was introduced in v5.12.1 of the renderer, so downgrading to v5.12.0 is another temporary solution. This can be tested in the above CodePen example by changing the JS settings to https://cdnjs.cloudflare.com/ajax/libs/lottie-web/5.12.0/lottie.min.js Unfortunately v5.12.0 doesn't include some important new features and fixes. So hopefully this will be helpful to someone.
Calling resize() with the canvas renderer, correctly resizes the canvas element but breaks shape layer rendering.
Tell us about your environment Reproduced on macOS 13.6.9 and Windows 10 Browser: Firefox, Chrome, Edge, Safari After Effects 24.5 Bodymovin 5.12.1
What did you do? Please explain the steps you took before you encountered the problem. Called resize() with the canvas renderer.
What did you expect to happen? Resize the canvas element after changes to viewport window - without breaking shape layer formatting.
What actually happened? Please include as much relevant detail as possible. Canvas element correctly resized, but with some shape layers reverting to default settings.
Please provide a download link to the After Effects file that demonstrates the problem. https://codepen.io/e-media/pen/BagwWOr?editors=1111
The CodePen should open with the correctly formatted Lottie animation (Red dots with white trails) but when you resize the window, some of the formatting reverts to defaults.
Lottie hasn't been updated for over a year, but hopefully someone will have a possible solution. My temporary solution when the canvas renderer is requested, is to destroy the animation instance and reload, which is not ideal.