…
Three ways to animate the same story. Open each inside the app webview and watch the FPS counter bottom left. Tap right side to advance, left side to go back.
1. CSS onlytransforms, opacity, keyframes. The baseline. 2a. Lottie, SVG rendererlottie-web drawing the tutorial clips as SVG. Text as real text, Inq font loaded. 2b. Lottie, canvas rendererlottie-web canvas drawing two shape-only sample clips (Lottie logo, boat loader). Our exports use masks, mattes and text, which this renderer cannot draw. Add &clip=tutorial to see that. 2c. dotLottie, WebGL@lottiefiles/dotlottie-web (ThorVG in WebAssembly) drawing the same clips. Masks and mattes render correctly. Text uses a built-in fallback font. Add &sw=1 for the software rasterizer. 3. MP4 videofullscreen autoplay clip with CSS text on top.