Thanks to visit codestin.com
Credit goes to github.com

Skip to content

Conversation

@justinfagnani
Copy link
Collaborator

@justinfagnani justinfagnani commented Oct 24, 2021

Adds SpringController and SpringController2D that you can use to simulate springs that drive host updates, like so:

@customElement('goo-element')
export class GooElement extends LitElement {
  _mouse = new MouseController(this);
  _spring1 = new SpringController2D(this, fast);

  render() {
    // Set the spring to go to the mouse
    this._spring1.toPosition = this._mouse.position;
    // Position a div based on the current position of the spring.
    return html`
      <div
        class="b1"
        style=${positionStyle(this._spring3.currentPosition)}
      ></div>
    `;
  }
}

const fast = {
  stiffness: 1200,
  damping: 400,
};

const positionStyle = ({x, y}: Position2D) =>
  styleMap({
    transform: `translate3d(${x}px,${y}px,0) translate3d(-50%,-50%,0)`,
  });

@justinfagnani justinfagnani requested a review from sorvell October 24, 2021 02:12
@changeset-bot
Copy link

changeset-bot bot commented Oct 24, 2021

🦋 Changeset detected

Latest commit: 4b07938

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 Minor

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

@google-cla google-cla bot added the cla: yes label Oct 24, 2021
@github-actions
Copy link
Contributor

github-actions bot commented Oct 24, 2021

📊 Tachometer Benchmark Results

Summary

nop-update

  • lit-html-kitchen-sink: unsure 🔍 -2% - +3% (-0.49ms - +0.81ms)
    this-change vs tip-of-tree
  • this-change, tip-of-tree, previous-release: unsure 🔍 -5% - +10% (-0.63ms - +1.19ms)
    this-change vs tip-of-tree

render

  • lit-element-list: unsure 🔍 -1% - +3% (-1.02ms - +2.39ms)
    this-change vs tip-of-tree
  • lit-html-kitchen-sink: unsure 🔍 -1% - +2% (-0.35ms - +0.48ms)
    this-change vs tip-of-tree
  • lit-html-repeat: unsure 🔍 -2% - +2% (-0.24ms - +0.23ms)
    this-change vs tip-of-tree
  • lit-html-template-heavy: unsure 🔍 -2% - +2% (-1.25ms - +1.16ms)
    this-change vs tip-of-tree
  • reactive-element-list: unsure 🔍 -4% - +1% (-1.95ms - +0.47ms)
    this-change vs tip-of-tree
  • this-change: 48.16ms - 61.75ms
  • this-change, tip-of-tree, previous-release: unsure 🔍 -5% - +4% (-1.00ms - +0.78ms)
    this-change vs tip-of-tree
  • this-change, tip-of-tree, previous-release: unsure 🔍 -2% - +1% (-0.81ms - +0.47ms)
    this-change vs tip-of-tree
  • this-change, tip-of-tree, previous-release: unsure 🔍 -1% - +1% (-0.67ms - +0.73ms)
    this-change vs tip-of-tree

update

  • lit-element-list: unsure 🔍 -1% - +1% (-6.44ms - +9.56ms)
    this-change vs tip-of-tree
  • lit-html-kitchen-sink: unsure 🔍 -2% - +5% (-1.76ms - +4.40ms)
    this-change vs tip-of-tree
  • lit-html-repeat: unsure 🔍 -1% - +1% (-3.28ms - +2.00ms)
    this-change vs tip-of-tree
  • lit-html-template-heavy: unsure 🔍 -1% - +2% (-1.07ms - +2.52ms)
    this-change vs tip-of-tree
  • reactive-element-list: unsure 🔍 -2% - +1% (-12.45ms - +4.32ms)
    this-change vs tip-of-tree
  • this-change: 459.59ms - 466.66ms
  • this-change, tip-of-tree, previous-release: unsure 🔍 -3% - +5% (-1.11ms - +1.75ms)
    this-change vs tip-of-tree
  • this-change, tip-of-tree, previous-release: unsure 🔍 -1% - +2% (-0.96ms - +1.08ms)
    this-change vs tip-of-tree
  • this-change, tip-of-tree, previous-release: unsure 🔍 -1% - +1% (-4.44ms - +3.70ms)
    this-change vs tip-of-tree

update-reflect

  • lit-element-list: unsure 🔍 -1% - +1% (-8.05ms - +8.15ms)
    this-change vs tip-of-tree
  • reactive-element-list: unsure 🔍 -1% - +1% (-7.56ms - +11.14ms)
    this-change vs tip-of-tree
  • this-change: 443.17ms - 448.22ms
  • this-change, tip-of-tree, previous-release: unsure 🔍 -1% - +0% (-5.59ms - +1.76ms)
    this-change vs tip-of-tree

Results

lit-element-list

render

VersionAvg timevs this-change
vs tip-of-tree
tip-of-tree
vs previous-release
previous-release
this-change
76.25ms - 79.35ms-unsure 🔍
-1% - +3%
-1.02ms - +2.39ms
faster ✔
18% - 22%
17.52ms - 21.38ms
tip-of-tree
tip-of-tree
76.40ms - 77.82msunsure 🔍
-3% - +1%
-2.39ms - +1.02ms
-faster ✔
20% - 22%
18.78ms - 21.49ms
previous-release
previous-release
96.09ms - 98.39msslower ❌
22% - 28%
17.52ms - 21.38ms
slower ❌
24% - 28%
18.78ms - 21.49ms
-

update

VersionAvg timevs this-change
vs tip-of-tree
tip-of-tree
vs previous-release
previous-release
this-change
813.52ms - 825.32ms-unsure 🔍
-1% - +1%
-6.44ms - +9.56ms
faster ✔
7% - 9%
61.44ms - 78.23ms
tip-of-tree
tip-of-tree
812.46ms - 823.27msunsure 🔍
-1% - +1%
-9.56ms - +6.44ms
-faster ✔
7% - 9%
63.34ms - 79.45ms
previous-release
previous-release
883.28ms - 895.23msslower ❌
7% - 10%
61.44ms - 78.23ms
slower ❌
8% - 10%
63.34ms - 79.45ms
-

update-reflect

VersionAvg timevs this-change
vs tip-of-tree
tip-of-tree
vs previous-release
previous-release
this-change
905.29ms - 916.37ms-unsure 🔍
-1% - +1%
-8.05ms - +8.15ms
faster ✔
4% - 6%
36.86ms - 53.32ms
tip-of-tree
tip-of-tree
904.87ms - 916.69msunsure 🔍
-1% - +1%
-8.15ms - +8.05ms
-faster ✔
4% - 6%
36.66ms - 53.63ms
previous-release
previous-release
949.84ms - 962.01msslower ❌
4% - 6%
36.86ms - 53.32ms
slower ❌
4% - 6%
36.66ms - 53.63ms
-
lit-html-kitchen-sink

render

VersionAvg timevs this-change
vs tip-of-tree
tip-of-tree
vs previous-release
previous-release
this-change
30.80ms - 31.39ms-unsure 🔍
-1% - +2%
-0.35ms - +0.48ms
faster ✔
14% - 17%
5.05ms - 6.51ms
tip-of-tree
tip-of-tree
30.74ms - 31.32msunsure 🔍
-2% - +1%
-0.48ms - +0.35ms
-faster ✔
14% - 18%
5.11ms - 6.57ms
previous-release
previous-release
36.21ms - 37.54msslower ❌
16% - 21%
5.05ms - 6.51ms
slower ❌
16% - 21%
5.11ms - 6.57ms
-

update

VersionAvg timevs this-change
vs tip-of-tree
tip-of-tree
vs previous-release
previous-release
this-change
89.29ms - 93.61ms-unsure 🔍
-2% - +5%
-1.76ms - +4.40ms
unsure 🔍
-6% - +2%
-5.89ms - +1.47ms
tip-of-tree
tip-of-tree
87.93ms - 92.33msunsure 🔍
-5% - +2%
-4.40ms - +1.76ms
-unsure 🔍
-8% - +0%
-7.23ms - +0.18ms
previous-release
previous-release
90.68ms - 96.64msunsure 🔍
-2% - +6%
-1.47ms - +5.89ms
unsure 🔍
-0% - +8%
-0.18ms - +7.23ms
-

nop-update

VersionAvg timevs this-change
vs tip-of-tree
tip-of-tree
vs previous-release
previous-release
this-change
26.45ms - 27.46ms-unsure 🔍
-2% - +3%
-0.49ms - +0.81ms
faster ✔
13% - 18%
4.17ms - 5.84ms
tip-of-tree
tip-of-tree
26.39ms - 27.20msunsure 🔍
-3% - +2%
-0.81ms - +0.49ms
-faster ✔
14% - 18%
4.38ms - 5.94ms
previous-release
previous-release
31.29ms - 32.62msslower ❌
15% - 22%
4.17ms - 5.84ms
slower ❌
16% - 22%
4.38ms - 5.94ms
-
lit-html-repeat

render

VersionAvg timevs this-change
vs tip-of-tree
tip-of-tree
vs previous-release
previous-release
this-change
11.41ms - 11.69ms-unsure 🔍
-2% - +2%
-0.24ms - +0.23ms
faster ✔
6% - 8%
0.73ms - 1.03ms
tip-of-tree
tip-of-tree
11.37ms - 11.75msunsure 🔍
-2% - +2%
-0.23ms - +0.24ms
-faster ✔
5% - 9%
0.68ms - 1.08ms
previous-release
previous-release
12.38ms - 12.50msslower ❌
6% - 9%
0.73ms - 1.03ms
slower ❌
6% - 9%
0.68ms - 1.08ms
-

update

VersionAvg timevs this-change
vs tip-of-tree
tip-of-tree
vs previous-release
previous-release
this-change
312.97ms - 315.79ms-unsure 🔍
-1% - +1%
-3.28ms - +2.00ms
faster ✔
31% - 32%
142.42ms - 149.38ms
tip-of-tree
tip-of-tree
312.78ms - 317.24msunsure 🔍
-1% - +1%
-2.00ms - +3.28ms
-faster ✔
31% - 32%
141.38ms - 149.15ms
previous-release
previous-release
457.09ms - 463.46msslower ❌
45% - 48%
142.42ms - 149.38ms
slower ❌
45% - 48%
141.38ms - 149.15ms
-
lit-html-template-heavy

render

VersionAvg timevs this-change
vs tip-of-tree
tip-of-tree
vs previous-release
previous-release
this-change
56.84ms - 57.91ms-unsure 🔍
-2% - +2%
-1.25ms - +1.16ms
faster ✔
15% - 18%
10.14ms - 12.16ms
tip-of-tree
tip-of-tree
56.35ms - 58.49msunsure 🔍
-2% - +2%
-1.16ms - +1.25ms
-faster ✔
14% - 18%
9.73ms - 12.47ms
previous-release
previous-release
67.67ms - 69.37msslower ❌
18% - 21%
10.14ms - 12.16ms
slower ❌
17% - 22%
9.73ms - 12.47ms
-

update

VersionAvg timevs this-change
vs tip-of-tree
tip-of-tree
vs previous-release
previous-release
this-change
133.62ms - 136.18ms-unsure 🔍
-1% - +2%
-1.07ms - +2.52ms
faster ✔
11% - 13%
16.74ms - 20.90ms
tip-of-tree
tip-of-tree
132.91ms - 135.43msunsure 🔍
-2% - +1%
-2.52ms - +1.07ms
-faster ✔
11% - 14%
17.48ms - 21.61ms
previous-release
previous-release
152.08ms - 155.35msslower ❌
12% - 16%
16.74ms - 20.90ms
slower ❌
13% - 16%
17.48ms - 21.61ms
-
reactive-element-list

render

VersionAvg timevs this-change
vs tip-of-tree
tip-of-tree
vs previous-release
previous-release
this-change
53.26ms - 55.08ms-unsure 🔍
-4% - +1%
-1.95ms - +0.47ms
unsure 🔍
-4% - +1%
-2.13ms - +0.42ms
tip-of-tree
tip-of-tree
54.11ms - 55.71msunsure 🔍
-1% - +4%
-0.47ms - +1.95ms
-unsure 🔍
-2% - +2%
-1.31ms - +1.09ms
previous-release
previous-release
54.13ms - 55.91msunsure 🔍
-1% - +4%
-0.42ms - +2.13ms
unsure 🔍
-2% - +2%
-1.09ms - +1.31ms
-

update

VersionAvg timevs this-change
vs tip-of-tree
tip-of-tree
vs previous-release
previous-release
this-change
813.33ms - 826.38ms-unsure 🔍
-2% - +1%
-12.45ms - +4.32ms
unsure 🔍
-2% - +0%
-18.05ms - +0.22ms
tip-of-tree
tip-of-tree
818.66ms - 829.19msunsure 🔍
-1% - +2%
-4.32ms - +12.45ms
-unsure 🔍
-2% - +0%
-13.13ms - +3.44ms
previous-release
previous-release
822.38ms - 835.17msunsure 🔍
-0% - +2%
-0.22ms - +18.05ms
unsure 🔍
-0% - +2%
-3.44ms - +13.13ms
-

update-reflect

VersionAvg timevs this-change
vs tip-of-tree
tip-of-tree
vs previous-release
previous-release
this-change
930.86ms - 944.08ms-unsure 🔍
-1% - +1%
-7.56ms - +11.14ms
unsure 🔍
-2% - +0%
-16.95ms - +0.46ms
tip-of-tree
tip-of-tree
929.07ms - 942.29msunsure 🔍
-1% - +1%
-11.14ms - +7.56ms
-faster ✔
0% - 2%
1.32ms - 18.75ms
previous-release
previous-release
940.05ms - 951.38msunsure 🔍
-0% - +2%
-0.46ms - +16.95ms
slower ❌
0% - 2%
1.32ms - 18.75ms
-
this-change

render

VersionAvg timevs
48.16ms - 61.75ms-

update

VersionAvg timevs
459.59ms - 466.66ms-

update-reflect

VersionAvg timevs
443.17ms - 448.22ms-
this-change, tip-of-tree, previous-release

render

VersionAvg timevs this-change
vs tip-of-tree
tip-of-tree
vs previous-release
previous-release
this-change
18.68ms - 19.82ms-unsure 🔍
-5% - +4%
-1.00ms - +0.78ms
unsure 🔍
-1% - +7%
-0.12ms - +1.32ms
tip-of-tree
tip-of-tree
18.68ms - 20.04msunsure 🔍
-4% - +5%
-0.78ms - +1.00ms
-unsure 🔍
-1% - +8%
-0.10ms - +1.52ms
previous-release
previous-release
18.22ms - 19.09msunsure 🔍
-7% - +1%
-1.32ms - +0.12ms
unsure 🔍
-8% - +0%
-1.52ms - +0.10ms
-

update

VersionAvg timevs this-change
vs tip-of-tree
tip-of-tree
vs previous-release
previous-release
this-change
35.96ms - 37.80ms-unsure 🔍
-3% - +5%
-1.11ms - +1.75ms
unsure 🔍
-4% - +3%
-1.41ms - +1.28ms
tip-of-tree
tip-of-tree
35.47ms - 37.65msunsure 🔍
-5% - +3%
-1.75ms - +1.11ms
-unsure 🔍
-5% - +3%
-1.86ms - +1.08ms
previous-release
previous-release
35.96ms - 37.94msunsure 🔍
-3% - +4%
-1.28ms - +1.41ms
unsure 🔍
-3% - +5%
-1.08ms - +1.86ms
-

nop-update

VersionAvg timevs this-change
vs tip-of-tree
tip-of-tree
vs previous-release
previous-release
this-change
11.87ms - 13.22ms-unsure 🔍
-5% - +10%
-0.63ms - +1.19ms
unsure 🔍
-8% - +7%
-0.97ms - +0.93ms
tip-of-tree
tip-of-tree
11.65ms - 12.87msunsure 🔍
-9% - +5%
-1.19ms - +0.63ms
-unsure 🔍
-10% - +5%
-1.21ms - +0.61ms
previous-release
previous-release
11.89ms - 13.24msunsure 🔍
-7% - +8%
-0.93ms - +0.97ms
unsure 🔍
-5% - +10%
-0.61ms - +1.21ms
-
this-change, tip-of-tree, previous-release

render

VersionAvg timevs this-change
vs tip-of-tree
tip-of-tree
vs previous-release
previous-release
this-change
34.65ms - 35.53ms-unsure 🔍
-2% - +1%
-0.81ms - +0.47ms
unsure 🔍
-2% - +2%
-0.63ms - +0.69ms
tip-of-tree
tip-of-tree
34.80ms - 35.72msunsure 🔍
-1% - +2%
-0.47ms - +0.81ms
-unsure 🔍
-1% - +2%
-0.47ms - +0.87ms
previous-release
previous-release
34.56ms - 35.54msunsure 🔍
-2% - +2%
-0.69ms - +0.63ms
unsure 🔍
-2% - +1%
-0.87ms - +0.47ms
-

update

VersionAvg timevs this-change
vs tip-of-tree
tip-of-tree
vs previous-release
previous-release
this-change
68.25ms - 69.71ms-unsure 🔍
-1% - +2%
-0.96ms - +1.08ms
unsure 🔍
-2% - +1%
-1.32ms - +0.90ms
tip-of-tree
tip-of-tree
68.21ms - 69.64msunsure 🔍
-2% - +1%
-1.08ms - +0.96ms
-unsure 🔍
-2% - +1%
-1.37ms - +0.83ms
previous-release
previous-release
68.35ms - 70.03msunsure 🔍
-1% - +2%
-0.90ms - +1.32ms
unsure 🔍
-1% - +2%
-0.83ms - +1.37ms
-
this-change, tip-of-tree, previous-release

render

VersionAvg timevs this-change
vs tip-of-tree
tip-of-tree
vs previous-release
previous-release
this-change
102.83ms - 103.77ms-unsure 🔍
-1% - +1%
-0.67ms - +0.73ms
unsure 🔍
-0% - +1%
-0.44ms - +0.76ms
tip-of-tree
tip-of-tree
102.76ms - 103.79msunsure 🔍
-1% - +1%
-0.73ms - +0.67ms
-unsure 🔍
-0% - +1%
-0.50ms - +0.77ms
previous-release
previous-release
102.77ms - 103.51msunsure 🔍
-1% - +0%
-0.76ms - +0.44ms
unsure 🔍
-1% - +0%
-0.77ms - +0.50ms
-

update

VersionAvg timevs this-change
vs tip-of-tree
tip-of-tree
vs previous-release
previous-release
this-change
452.43ms - 458.47ms-unsure 🔍
-1% - +1%
-4.44ms - +3.70ms
unsure 🔍
-1% - +1%
-5.19ms - +2.83ms
tip-of-tree
tip-of-tree
453.09ms - 458.55msunsure 🔍
-1% - +1%
-3.70ms - +4.44ms
-unsure 🔍
-1% - +1%
-4.60ms - +2.98ms
previous-release
previous-release
453.99ms - 459.27msunsure 🔍
-1% - +1%
-2.83ms - +5.19ms
unsure 🔍
-1% - +1%
-2.98ms - +4.60ms
-

update-reflect

VersionAvg timevs this-change
vs tip-of-tree
tip-of-tree
vs previous-release
previous-release
this-change
462.67ms - 468.07ms-unsure 🔍
-1% - +0%
-5.59ms - +1.76ms
unsure 🔍
-1% - +1%
-4.01ms - +3.98ms
tip-of-tree
tip-of-tree
464.80ms - 469.78msunsure 🔍
-0% - +1%
-1.76ms - +5.59ms
-unsure 🔍
-0% - +1%
-1.95ms - +5.76ms
previous-release
previous-release
462.45ms - 468.33msunsure 🔍
-1% - +1%
-3.98ms - +4.01ms
unsure 🔍
-1% - +0%
-5.76ms - +1.95ms
-

tachometer-reporter-action v2 for Benchmarks

@justinfagnani justinfagnani force-pushed the spring branch 2 times, most recently from d6ddb28 to a7205c8 Compare December 9, 2021 01:54
@justinfagnani justinfagnani marked this pull request as ready for review December 9, 2021 01:54
Copy link
Contributor

@AndrewJakubowicz AndrewJakubowicz left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Missing domain knowledge so did a syntax and manual test code review.

The demo is so amazing. Otherwise very minor nits and clarifications mostly for my own understanding. This is great!

From an API standpoint my only question is around integration with animate() directive. I ask this as an alternative to needing to supply a styleMap directive for the spring. Non blocking.

Great stuff!

@justinfagnani
Copy link
Collaborator Author

@AndrewJakubowicz thanks for the review from so long ago!

I addressed you comments and then rebased onto the 3.0 branch.

I have one important change I want to make to the 2D controller before I think this is mergable.

@bencbradshaw
Copy link
Collaborator

Very cool controller and demo! Code looks great. Documentation is thorough enough that I could confidently use the controller.

Copy link
Contributor

@AndrewJakubowicz AndrewJakubowicz left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Nice! Proposed some simplifications to the demo styles.

Also I think I'd prefer we use the scalar name speed instead of velocity when in 2d since I think that's what is currently being calculated.

Base automatically changed from 3.0 to main October 9, 2023 16:54
@github-actions
Copy link
Contributor

github-actions bot commented Dec 2, 2025

The size of lit-html.js and lit-core.min.js are as expected.

@justinfagnani justinfagnani merged commit ace127b into main Dec 3, 2025
10 checks passed
@justinfagnani justinfagnani deleted the spring branch December 3, 2025 00:58
@lit-robot lit-robot mentioned this pull request Dec 18, 2025
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

Projects

None yet

Development

Successfully merging this pull request may close these issues.

3 participants