I’m new to Lottie but I’ve managed to create several Lottie animations for my WordPress website using Synfig Studio. They look wonderful in Windows and on my Android phone, but when testing on iPhone and iPad they are horribly choppy (dropping frames and playing back at about 2 fps).
If I switch the renderer mode from SVG to Canvas, I get super smooth playback in iOS. HOWEVER, Canvas mode renders everything in the same color (red) so the animation appears as a silhouette. And I’ve found no reference to this problem online.
I’ve tried using the Elementor Lottie plugin, Lordicon, and a dotlottie plugin called AM LottiePlayer with the same results, so I think it might be something in the files themselves, but I don’t know how to fix the problem. Can anyone shed some light?
UPDATE: Through a lot of trial and error I determined that by ungrouping my layers the animation played smoothly. Originally I had about a half dozen layers organized into nested groups, with waypoints defined on both the layers themselves and on the groups (to scale/move/rotate objects together). But merely grouping layers in Synfig (even if the groups didn’t have any waypoints on them) caused a severe performance hit in the exported Lottie file. Any idea why this is?