[labs/motion] Fix transforms when scaling to or from zero #3886

justinfagnani · 2023-05-09T00:38:22Z

When scaling to zero with FLIP you need to scale to a small number instead so that you can calculate a finite inverse transform. Luckily we can do this by passing a small override value in the first keyframe of the animation. In this fix we scale to 1px and when the animation ends it'll pop to 0.

changeset-bot · 2023-05-09T00:38:25Z

🦋 Changeset detected

Latest commit: cad8548

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 1 package

Name	Type
@lit-labs/motion	Patch

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

github-actions · 2023-05-09T00:38:41Z

📊 Tachometer Benchmark Results

Summary

nop-update

lit-html-kitchen-sink: unsure 🔍 -9% - +11% (-1.92ms - +2.52ms)
^{this-change vs tip-of-tree}

render

lit-element-list: 68.58ms - 71.44ms
lit-html-kitchen-sink: unsure 🔍 -3% - +12% (-0.89ms - +3.58ms)
^{this-change vs tip-of-tree}
lit-html-repeat: unsure 🔍 -1% - +5% (-0.10ms - +0.50ms)
^{this-change vs tip-of-tree}
lit-html-template-heavy: unsure 🔍 -3% - +2% (-1.44ms - +1.03ms)
^{this-change vs tip-of-tree}
reactive-element-list: unsure 🔍 -2% - +2% (-1.06ms - +0.70ms)
^{this-change vs tip-of-tree}

update

lit-element-list: 787.86ms - 798.07ms
lit-html-kitchen-sink: unsure 🔍 -2% - +9% (-1.41ms - +6.71ms)
^{this-change vs tip-of-tree}
lit-html-repeat: unsure 🔍 -13% - +7% (-41.75ms - +22.33ms)
^{this-change vs tip-of-tree}
lit-html-template-heavy: unsure 🔍 -1% - +1% (-1.65ms - +1.41ms)
^{this-change vs tip-of-tree}
reactive-element-list: unsure 🔍 -1% - +2% (-5.03ms - +12.53ms)
^{this-change vs tip-of-tree}

update-reflect

lit-element-list: 748.09ms - 755.86ms
reactive-element-list: unsure 🔍 -1% - +1% (-4.39ms - +11.47ms)
^{this-change vs tip-of-tree}

Results

lit-element-list

Browser: chrome-headless 114.0.5735.198
Sample size: 50
Built by: Benchmarks #4979
Commit: 146ca2f

render

Version	Avg time	vs
	68.58ms - 71.44ms	-

update

Version	Avg time	vs
	787.86ms - 798.07ms	-

update-reflect

Version	Avg time	vs
	748.09ms - 755.86ms	-

lit-html-kitchen-sink

Browser: chrome-headless 114.0.5735.198
Sample size: 30
Built by: Benchmarks #4979
Commit: 146ca2f

render

Version	Avg time	vs this-change	vs tip-of-tree tip-of-tree	vs previous-release previous-release
this-change	29.03ms - 32.28ms	-	unsure 🔍 -3% - +12% -0.89ms - +3.58ms	unsure 🔍 -9% - +6% -2.67ms - +1.94ms
tip-of-tree tip-of-tree	27.78ms - 30.85ms	unsure 🔍 -12% - +3% -3.58ms - +0.89ms	-	unsure 🔍 -13% - +2% -3.95ms - +0.54ms
previous-release previous-release	29.39ms - 32.65ms	unsure 🔍 -6% - +9% -1.94ms - +2.67ms	unsure 🔍 -2% - +14% -0.54ms - +3.95ms	-

update

Version	Avg time	vs this-change	vs tip-of-tree tip-of-tree	vs previous-release previous-release
this-change	77.42ms - 82.84ms	-	unsure 🔍 -2% - +9% -1.41ms - +6.71ms	unsure 🔍 -4% - +4% -3.29ms - +3.31ms
tip-of-tree tip-of-tree	74.47ms - 80.49ms	unsure 🔍 -8% - +2% -6.71ms - +1.41ms	-	unsure 🔍 -8% - +1% -6.19ms - +0.91ms
previous-release previous-release	78.24ms - 82.00ms	unsure 🔍 -4% - +4% -3.31ms - +3.29ms	unsure 🔍 -1% - +8% -0.91ms - +6.19ms	-

nop-update

Version	Avg time	vs this-change	vs tip-of-tree tip-of-tree	vs previous-release previous-release
this-change	21.23ms - 24.23ms	-	unsure 🔍 -9% - +11% -1.92ms - +2.52ms	unsure 🔍 -6% - +13% -1.22ms - +2.80ms
tip-of-tree tip-of-tree	20.79ms - 24.07ms	unsure 🔍 -11% - +8% -2.52ms - +1.92ms	-	unsure 🔍 -8% - +12% -1.63ms - +2.60ms
previous-release previous-release	20.60ms - 23.28ms	unsure 🔍 -12% - +5% -2.80ms - +1.22ms	unsure 🔍 -11% - +7% -2.60ms - +1.63ms	-

lit-html-repeat

Browser: chrome-headless 114.0.5735.198
Sample size: 30
Built by: Benchmarks #4979
Commit: 146ca2f

render

Version	Avg time	vs this-change	vs tip-of-tree tip-of-tree	vs previous-release previous-release
this-change	9.68ms - 10.11ms	-	unsure 🔍 -1% - +5% -0.10ms - +0.50ms	unsure 🔍 -3% - +4% -0.27ms - +0.36ms
tip-of-tree tip-of-tree	9.48ms - 9.91ms	unsure 🔍 -5% - +1% -0.50ms - +0.10ms	-	unsure 🔍 -5% - +2% -0.47ms - +0.16ms
previous-release previous-release	9.61ms - 10.08ms	unsure 🔍 -4% - +3% -0.36ms - +0.27ms	unsure 🔍 -2% - +5% -0.16ms - +0.47ms	-

update

Version	Avg time	vs this-change	vs tip-of-tree tip-of-tree	vs previous-release previous-release
this-change	291.70ms - 331.64ms	-	unsure 🔍 -13% - +7% -41.75ms - +22.33ms	unsure 🔍 -14% - +7% -47.66ms - +23.12ms
tip-of-tree tip-of-tree	296.33ms - 346.44ms	unsure 🔍 -7% - +14% -22.33ms - +41.75ms	-	unsure 🔍 -13% - +11% -41.05ms - +35.94ms
previous-release previous-release	294.71ms - 353.17ms	unsure 🔍 -8% - +15% -23.12ms - +47.66ms	unsure 🔍 -11% - +13% -35.94ms - +41.05ms	-

lit-html-template-heavy

Browser: chrome-headless 114.0.5735.198
Sample size: 50
Built by: Benchmarks #4979
Commit: 146ca2f

render

Version	Avg time	vs this-change	vs tip-of-tree tip-of-tree	vs previous-release previous-release
this-change	51.14ms - 52.83ms	-	unsure 🔍 -3% - +2% -1.44ms - +1.03ms	unsure 🔍 -2% - +2% -0.95ms - +1.26ms
tip-of-tree tip-of-tree	51.29ms - 53.09ms	unsure 🔍 -2% - +3% -1.03ms - +1.44ms	-	unsure 🔍 -2% - +3% -0.79ms - +1.51ms
previous-release previous-release	51.12ms - 52.55ms	unsure 🔍 -2% - +2% -1.26ms - +0.95ms	unsure 🔍 -3% - +2% -1.51ms - +0.79ms	-

update

Version	Avg time	vs this-change	vs tip-of-tree tip-of-tree	vs previous-release previous-release
this-change	111.89ms - 113.94ms	-	unsure 🔍 -1% - +1% -1.65ms - +1.41ms	unsure 🔍 -1% - +2% -0.86ms - +2.00ms
tip-of-tree tip-of-tree	111.90ms - 114.17ms	unsure 🔍 -1% - +1% -1.41ms - +1.65ms	-	unsure 🔍 -1% - +2% -0.82ms - +2.20ms
previous-release previous-release	111.36ms - 113.33ms	unsure 🔍 -2% - +1% -2.00ms - +0.86ms	unsure 🔍 -2% - +1% -2.20ms - +0.82ms	-

reactive-element-list

Browser: chrome-headless 114.0.5735.198
Sample size: 50
Built by: Benchmarks #4979
Commit: 146ca2f

render

Version	Avg time	vs this-change	vs tip-of-tree tip-of-tree	vs previous-release previous-release
this-change	45.23ms - 46.41ms	-	unsure 🔍 -2% - +2% -1.06ms - +0.70ms	unsure 🔍 -1% - +3% -0.39ms - +1.25ms
tip-of-tree tip-of-tree	45.35ms - 46.65ms	unsure 🔍 -2% - +2% -0.70ms - +1.06ms	-	unsure 🔍 -1% - +3% -0.25ms - +1.47ms
previous-release previous-release	44.83ms - 45.96ms	unsure 🔍 -3% - +1% -1.25ms - +0.39ms	unsure 🔍 -3% - +1% -1.47ms - +0.25ms	-

update

Version	Avg time	vs this-change	vs tip-of-tree tip-of-tree	vs previous-release previous-release
this-change	804.28ms - 816.75ms	-	unsure 🔍 -1% - +2% -5.03ms - +12.53ms	unsure 🔍 -0% - +2% -3.74ms - +15.33ms
tip-of-tree tip-of-tree	800.58ms - 812.94ms	unsure 🔍 -2% - +1% -12.53ms - +5.03ms	-	unsure 🔍 -1% - +1% -7.45ms - +11.55ms
previous-release previous-release	797.50ms - 811.93ms	unsure 🔍 -2% - +0% -15.33ms - +3.74ms	unsure 🔍 -1% - +1% -11.55ms - +7.45ms	-

update-reflect

Version	Avg time	vs this-change	vs tip-of-tree tip-of-tree	vs previous-release previous-release
this-change	779.42ms - 791.22ms	-	unsure 🔍 -1% - +1% -4.39ms - +11.47ms	unsure 🔍 -1% - +1% -5.53ms - +10.09ms
tip-of-tree tip-of-tree	776.48ms - 787.08ms	unsure 🔍 -1% - +1% -11.47ms - +4.39ms	-	unsure 🔍 -1% - +1% -8.63ms - +6.11ms
previous-release previous-release	777.92ms - 788.16ms	unsure 🔍 -1% - +1% -10.09ms - +5.53ms	unsure 🔍 -1% - +1% -6.11ms - +8.63ms	-

_{tachometer-reporter-action v2 for Benchmarks}

justinfagnani · 2023-06-21T03:45:09Z

ping @sorvell

rictic · 2023-06-23T23:59:13Z

packages/labs/motion/src/animate.ts

            op['transform']
          }`;
+          if (op.override !== undefined) {
+            Object.assign(fromFrame, op.override);


fromFrame and override should probably have more descriptive names here

fromFrame is more like, transformToIntoFromFrame, and override is specifically overriding that

…o motion-zero

justinfagnani added 3 commits May 8, 2023 17:29

Depend on build:ts in dev

3271fff

Add simple-scaling demo

e2f61f8

Fix scale-to-zero bug

7ef1152

justinfagnani requested review from rictic and sorvell May 9, 2023 00:38

justinfagnani requested a review from kevinpschaaf as a code owner May 9, 2023 00:38

Small cleanup

427e26b

rictic approved these changes Jun 23, 2023

View reviewed changes

justinfagnani added 2 commits July 6, 2023 12:03

Change name of override option to overrideFrom

e319085

Merge branch 'motion-zero' of https://github.com/Polymer/lit-html int…

cad8548

…o motion-zero

justinfagnani merged commit 0c3ce9b into main Jul 6, 2023

justinfagnani deleted the motion-zero branch July 6, 2023 20:14

lit-robot mentioned this pull request Aug 2, 2023

Version Packages #4066

Merged

[labs/motion] Fix transforms when scaling to or from zero #3886

[labs/motion] Fix transforms when scaling to or from zero #3886

Uh oh!

Conversation

justinfagnani commented May 9, 2023

Uh oh!

changeset-bot bot commented May 9, 2023 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

🦋 Changeset detected

Uh oh!

github-actions bot commented May 9, 2023 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

📊 Tachometer Benchmark Results

Summary

nop-update

render

update

update-reflect

Results

render

update

update-reflect

render

update

nop-update

render

update

render

update

render

update

update-reflect

Uh oh!

justinfagnani commented Jun 21, 2023

Uh oh!

rictic Jun 23, 2023

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

changeset-bot bot commented May 9, 2023 •

edited

Loading

github-actions bot commented May 9, 2023 •

edited

Loading