Instead of a CSS-animated spinner, Slack uses a Lottie animation of its logo bouncing and wiggling. The JSON file is 12KB vs a 300KB GIF.
"v": "5.9.6", // Version "fr": 30, // Frame rate "w": 500, // Width "h": 500, // Height "layers": [...], // Array of layer objects "assets": [...], // Images or pre-comps "layers[0].shapes[0].it": // Shape path data "ty": "sh", "ks": "k": [ "i": [...], "o": [...], "v": [...] ] bodymovin plugin after effects
Linear and radial gradients in After Effects often render with different color stops or angles in Lottie-iOS vs. Lottie-web due to differing interpretation of gradient matrices. Instead of a CSS-animated spinner, Slack uses a
// Runtime control animation.play(); animation.setSpeed(0.5); animation.goToAndStop(60, true); A critical understanding for motion designers is that Bodymovin does not support 100% of After Effects . Instead of a CSS-animated spinner