value() — svelte Function Reference

Architecture documentation for the value() function in spring.js from the svelte codebase.

Function javascript SharedInternal DOMUtils calls 5

Entity Profile

SharedInternal→ DOMUtils→ value() — svelte Function Reference

Dependency Diagram

graph TD
  938b712b_1a7d_f851_13bc_11eabf638f12["value()"]
  9dd00a1e_af31_d3bc_bd26_41f120a8c8f9["Spring"]
  938b712b_1a7d_f851_13bc_11eabf638f12 -->|defined in| 9dd00a1e_af31_d3bc_bd26_41f120a8c8f9
  5d33d764_c539_b815_fe49_97b00f61f68e["update()"]
  938b712b_1a7d_f851_13bc_11eabf638f12 -->|calls| 5d33d764_c539_b815_fe49_97b00f61f68e
  a360a3a5_5250_4fe5_418b_2dcc66c19942["set()"]
  938b712b_1a7d_f851_13bc_11eabf638f12 -->|calls| a360a3a5_5250_4fe5_418b_2dcc66c19942
  06e615dd_b546_019b_150f_91f3aec71a6b["now()"]
  938b712b_1a7d_f851_13bc_11eabf638f12 -->|calls| 06e615dd_b546_019b_150f_91f3aec71a6b
  185b398a_1ddd_d231_9999_8110452fa052["loop()"]
  938b712b_1a7d_f851_13bc_11eabf638f12 -->|calls| 185b398a_1ddd_d231_9999_8110452fa052
  3ad2c03a_74ef_9f21_8ca8_e0d5cefd8eff["tick_spring()"]
  938b712b_1a7d_f851_13bc_11eabf638f12 -->|calls| 3ad2c03a_74ef_9f21_8ca8_e0d5cefd8eff
  style 938b712b_1a7d_f851_13bc_11eabf638f12 fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

packages/svelte/src/motion/spring.js lines 241–285

	#update(value) {
		set(this.#target, value);

		this.#current.v ??= value;
		this.#last_value ??= this.#current.v;

		if (!this.#task) {
			this.#last_time = raf.now();

			var inv_mass_recovery_rate = 1000 / (this.#momentum * 60);

			this.#task ??= loop((now) => {
				this.#inverse_mass = Math.min(this.#inverse_mass + inv_mass_recovery_rate, 1);

				// clamp elapsed time to 1/30th of a second, so that longer pauses
				// (blocked thread or inactive tab) don't cause the spring to go haywire
				const elapsed = Math.min(now - this.#last_time, 1000 / 30);

				/** @type {import('./private').TickContext} */
				const ctx = {
					inv_mass: this.#inverse_mass,
					opts: {
						stiffness: this.#stiffness.v,
						damping: this.#damping.v,
						precision: this.#precision.v
					},
					settled: true,
					dt: (elapsed * 60) / 1000
				};

				var next = tick_spring(ctx, this.#last_value, this.#current.v, this.#target.v);
				this.#last_value = this.#current.v;
				this.#last_time = now;
				set(this.#current, next);

				if (ctx.settled) {
					this.#task = null;
				}

				return !ctx.settled;
			});
		}

		return this.#task.promise;
	}