tick_spring() — svelte Function Reference

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

Function javascript SharedInternal DOMUtils calls 1 called by 2

Entity Profile

SharedInternal→ DOMUtils→ tick_spring() — svelte Function Reference

Dependency Diagram

graph TD
  3ad2c03a_74ef_9f21_8ca8_e0d5cefd8eff["tick_spring()"]
  5230511f_b608_2c86_cb6b_11014fdf94b5["spring.js"]
  3ad2c03a_74ef_9f21_8ca8_e0d5cefd8eff -->|defined in| 5230511f_b608_2c86_cb6b_11014fdf94b5
  1be4451f_f9ee_5df1_6b9b_d5f88ec472fd["spring()"]
  1be4451f_f9ee_5df1_6b9b_d5f88ec472fd -->|calls| 3ad2c03a_74ef_9f21_8ca8_e0d5cefd8eff
  938b712b_1a7d_f851_13bc_11eabf638f12["value()"]
  938b712b_1a7d_f851_13bc_11eabf638f12 -->|calls| 3ad2c03a_74ef_9f21_8ca8_e0d5cefd8eff
  2c01da3b_6fe8_7031_6c99_5ae208e44c66["is_date()"]
  3ad2c03a_74ef_9f21_8ca8_e0d5cefd8eff -->|calls| 2c01da3b_6fe8_7031_6c99_5ae208e44c66
  style 3ad2c03a_74ef_9f21_8ca8_e0d5cefd8eff fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

packages/svelte/src/motion/spring.js lines 23–57

function tick_spring(ctx, last_value, current_value, target_value) {
	if (typeof current_value === 'number' || is_date(current_value)) {
		// @ts-ignore
		const delta = target_value - current_value;
		// @ts-ignore
		const velocity = (current_value - last_value) / (ctx.dt || 1 / 60); // guard div by 0
		const spring = ctx.opts.stiffness * delta;
		const damper = ctx.opts.damping * velocity;
		const acceleration = (spring - damper) * ctx.inv_mass;
		const d = (velocity + acceleration) * ctx.dt;
		if (Math.abs(d) < ctx.opts.precision && Math.abs(delta) < ctx.opts.precision) {
			return target_value; // settled
		} else {
			ctx.settled = false; // signal loop to keep ticking
			// @ts-ignore
			return is_date(current_value) ? new Date(current_value.getTime() + d) : current_value + d;
		}
	} else if (Array.isArray(current_value)) {
		// @ts-ignore
		return current_value.map((_, i) =>
			// @ts-ignore
			tick_spring(ctx, last_value[i], current_value[i], target_value[i])
		);
	} else if (typeof current_value === 'object') {
		const next_value = {};
		for (const k in current_value) {
			// @ts-ignore
			next_value[k] = tick_spring(ctx, last_value[k], current_value[k], target_value[k]);
		}
		// @ts-ignore
		return next_value;
	} else {
		throw new Error(`Cannot spring ${typeof current_value} values`);
	}
}