airbnb/lottie-ios

Trim Paths timing is out of sync

Open

#1717 opened on Aug 12, 2022

View on GitHub
 (14 comments) (0 reactions) (0 assignees)Swift (26,751 stars) (3,831 forks)batch import
bughelp wanted

Description

Hi there, I am having issues with Trim Paths and an Alpha Inverted Matte being out of sync. On Android/ Web it plays as expected: the Trim Paths and the Matte play in sync with the animation of the "diamond" shape, so it always trails behind the "diamond" shape. But on iOS, the Trim Paths renders out of sync with a different timing, or could be interpreting different "Start/End" values perhaps? The Trim Path jumps out in front of the "diamond" shape, and breaks the illusion of a motion trail always staying behind the "diamond" shape.

Secondly, the Alpha Inverted Matte is out of sync, creating a stuttering effect. The Alpha Inverted Matte is parented to another layer, but it's not moving in sync with its parent. So it's creating a stuttering, time delay that's visually apparent due to the Matte layer's position being out of sync with it's parent.

Lastly, when the AlphaInverted Matte is in use, it crashes my LottieFiles previewer app on iOS. For some reason, the Alpha Matte seems to be too much to process?

Here is the AEP: https://www.dropbox.com/s/gwbvdo281s3dfno/TrimPathsBug_public.aep?dl=0

Which Version of Lottie are you using?

Lottie 3.3.0 iOS 15.6 iPhone 12 mini

Expected Behavior

ExpectedBehavior

Actual Behavior

iOS_bug

Animation JSON

https://lottiefiles.com/share/thkvqxz3

Contributor guide

Tech stack
swiftios
Domain
mobile
Issue type
bug
DifficultyEstimated implementation difficulty for a new contributor, from 1 for very small changes to 5 for expert-level work.
4
Estimated timeA rough time range for an experienced contributor to investigate, implement, test, and prepare a pull request.
over 1 week
Activity statusHow available the issue appears right now: fresh, active, stale, blocked, or waiting on maintainer input.
stale
ClarityHow clearly the issue explains the expected change, acceptance criteria, and next step.
needs investigation
Prerequisites
SwiftiOS developmentanimation rendering
Newbie friendlinessA 1-100 score estimating how approachable this issue is for first-time contributors.
25
Research direction
Investigate the Trim Path node timing calculations in the Lottie iOS renderer, particularly in the context of Alpha Inverted Mattes. Check the render pipeline for timing synchronization between Trim Paths and parent layer animations. Look at recent changes in the master branch or any related issues/PRs that might have addressed similar timing issues. The community may need to reproduce the bug using the provided AEP and JSON files.