[chnobli] add keepValues options to timeline, this will not reset the…

… values if the timeline is destroyed

chnobli/src/animation/Animation.ts

@@ -7,6 +7,7 @@ import Timing, {
 import Property, { ParseableValue, newProperty } from '../property/Property.js';
 import Ticker from '../timing/Ticker.js';
 import { Target } from '../target/Target.js';
+import { DestroyOptions } from '../timeline/public.js';
 
 export default class Animation {
 	timing: Timing;
@@ -95,9 +96,11 @@ export default class Animation {
 		}
 	}
 
-	destroy() {
-		for (const prop of this._props) {
-			prop.restoreBefore(this.target);
+	destroy(opts: DestroyOptions) {
+		if (!opts.keepValues) {
+			for (const prop of this._props) {
+				prop.restoreBefore(this.target);
+			}
 		}
 
 		this._ticker.unregisterTarget(this.target.inner());

chnobli/src/tests/properties.test.ts

@@ -79,6 +79,47 @@ describe('properties', () => {
 		expect(res).toBe('div');
 	});
 
+	it('keep values', () => {
+		const ticker = new TestTicker();
+
+		const div = el();
+		const tl = timeline()
+			.add(div, {
+				x: 100,
+				duration: 10,
+			})
+			.play();
+
+		ticker.run(5);
+		expect(div.style.transform).toBe(
+			'translate3d(50.000px,0.000px,0.000px)',
+		);
+
+		tl.destroy({ keepValues: true });
+		expect(div.style.transform).toBe(
+			'translate3d(50.000px,0.000px,0.000px)',
+		);
+
+		const tl2 = timeline()
+			.add(div, {
+				x: 100,
+				duration: 10,
+			})
+			.play();
+		expect(div.style.transform).toBe(
+			'translate3d(50.000px,0.000px,0.000px)',
+		);
+
+		ticker.run();
+		expect(div.style.transform).toBe(
+			'translate3d(100.000px,0.000px,0.000px)',
+		);
+		tl2.destroy({ keepValues: true });
+		expect(div.style.transform).toBe(
+			'translate3d(100.000px,0.000px,0.000px)',
+		);
+	});
+
 	it('update timeline', () => {
 		const ticker = new TestTicker();
 		const respEv = new TestResponsiveEvent();

chnobli/src/timeline/Timeline.ts

@@ -10,6 +10,7 @@ import Timing, {
 import Ticker from '../timing/Ticker.js';
 import Animation from '../animation/Animation.js';
 import AnimationFrameTicker from '../timing/AnimationFrameTicker.js';
+import { DestroyOptions } from './public.js';
 
 type Entry = {
 	type: 'label' | 'animation' | 'timeline';
@@ -325,17 +326,17 @@ export default class Timeline {
 		this.ticker.applyTargets();
 	}
 
-	destroy() {
+	destroy(opts: DestroyOptions) {
 		for (const entry of this.entries) {
 			if (entry.type === 'timeline') {
-				entry.value.destroy();
+				entry.value.destroy(opts);
 				continue;
 			}
 
 			if (entry.type !== 'animation') continue;
 
 			const animation = entry.value;
-			animation.destroy();
+			animation.destroy(opts);
 		}
 
 		this.entries = [];

chnobli/src/timeline/public.ts

@@ -38,12 +38,21 @@ export type TimelineProps = {
 	// alternate
 	// reversed
 
+	/**
+	 * When set will keep all values when destroy is called
+	 */
+	keepValues?: boolean;
+
 	// other properties
 	[key: string]: any;
 };
 
 export type Offset = number | string | Stagger<number | string>;
 
+export type DestroyOptions = {
+	keepValues?: boolean;
+};
+
 export default class PublicTimeline {
 	/**
 	 * @ignore
@@ -60,13 +69,14 @@ export default class PublicTimeline {
 	private _triggeredStart: boolean;
 
 	private _state: number;
-	private _renderedOnce: boolean;
 	private _runningTicker: any;
 	private _responsiveBlocks: { responsive: () => void }[];
 	private _responsiveEvent: any;
 	private _smoothSeek: SmoothSeek | null;
 	private _seekTo: number;
 
+	private _destroyOpts: DestroyOptions;
+
 	constructor(props: TimelineProps = {}) {
 		this._defaults = takeProp(props, 'defaults', {});
 		this._responsive = takeProp(props, 'responsive', true);
@@ -81,14 +91,19 @@ export default class PublicTimeline {
 		);
 		this._seekTo = 0;
 
+		this._destroyOpts = {
+			// we set this to undefined so we can have other default values
+			// for example in chnobli-svelte
+			keepValues: takeProp(props, 'keepValues', undefined),
+		};
+
 		this._inner = new Timeline(props);
 
 		// 'start', 'end'
 		this._events = new Events();
 		this._triggeredStart = false;
 
 		this._state = STATE_PAUSED;
-		this._renderedOnce = false;
 		this._runningTicker = null;
 		this._responsiveBlocks = [];
 		if (this._responsive) {
@@ -331,9 +346,11 @@ export default class PublicTimeline {
 	/**
 	 * Destroys this timeline and resets all props
 	 */
-	destroy() {
+	destroy(opts: DestroyOptions = {}) {
+		opts.keepValues = opts.keepValues ?? this._destroyOpts.keepValues;
+
 		this._stopTicker();
-		this._inner.destroy();
+		this._inner.destroy(opts);
 		this._events.destroy();
 		this._responsiveEvent?.remove();
 		this._responsiveBlocks = [];
@@ -424,9 +441,6 @@ export default class PublicTimeline {
 		_a: { width: number; height: number },
 		_b: { remove: () => void },
 	) {
-		// // make sure we don't render something if we never did
-		// if (!this._renderedOnce)
-		// 	return;
 		this._inner.update();
 	}
 }