Skip to content

Commit

Permalink
Add some docs for layer time start and stretch (#53)
Browse files Browse the repository at this point in the history
* Add some docs for layer time start and stretch

* Define for precomp layers only

* Add sample
  • Loading branch information
fmalita authored Jun 20, 2024
1 parent 19c8736 commit 48e8e31
Show file tree
Hide file tree
Showing 4 changed files with 625 additions and 10 deletions.
21 changes: 21 additions & 0 deletions docs/specs/layers.md
Original file line number Diff line number Diff line change
Expand Up @@ -50,3 +50,24 @@ The `ty` property defines the specific layer type based on the following values:
{schema_string:layers/precomposition-layer/description}

{schema_object:layers/precomposition-layer}

The `st` property specifies a start time offset, while `sr` defines a time stretch factor,
to be applied when evaluating animated properties pertaining to the layer:

$$t\prime = \dfrac{t}{stretch} - start$$

`sr` values less than $1$ increase the layer playback speed, while values greater than $1$
decrease it ("stretching" the layer timeline).

<lottie-playground example="time_stretch.json">
<title>Example</title>
<form>
<input type="range" min="0.5" max="2" value="1" step="0.01" title="Time Stretch"/>
</form>
<json>lottie.layers[0]</json>
<script>
var layer = lottie.layers[0];
layer.sr = Number(data["Time Stretch"]);
</script>
</lottie-playground>

Loading

0 comments on commit 48e8e31

Please sign in to comment.