chnobli 0.1.3 → 0.1.4

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "chnobli",
-	"version": "0.1.3",
+	"version": "0.1.4",
 	"author": "Sören Meier <info@soerenmeier.ch>",
 	"type": "module",
 	"scripts": {

package/src/animation/property.js

@@ -144,8 +144,8 @@ export class TransformXY extends Property {
 	}
 
 	getValue(target) {
-		const x = target.getTransformValue('translateX');
-		const y = target.getTransformValue('translateY');
+		const x = target.getTransformValue('x');
+		const y = target.getTransformValue('y');
 
 		const def = this.defaultValue();
 
@@ -156,13 +156,13 @@ export class TransformXY extends Property {
 	}
 
 	setValue(target, val) {
-		target.setTransformValue('translateX', val.x.withDefaultUnit('px'));
-		target.setTransformValue('translateY', val.y.withDefaultUnit('px'));
+		target.setTransformValue('x', val.x.withDefaultUnit('px'));
+		target.setTransformValue('y', val.y.withDefaultUnit('px'));
 	}
 
 	removeValue(target) {
-		target.removeTransformValue('translateX');
-		target.removeTransformValue('translateY');
+		target.removeTransformValue('x');
+		target.removeTransformValue('y');
 	}
 }
 

package/src/tests/properties.test.js

@@ -2,7 +2,7 @@ import { describe, expect, it } from 'vitest';
 import TestTicker from '../timing/testticker.js';
 import TestResponsiveEvent from '../responsive/testevent.js';
 import { animate, timeline } from '../chnobli.js';
-import { responsive } from '../utils/utils.js';
+import { responsive, curve } from '../utils/utils.js';
 import { el } from '../target/testdomnode.js';
 import { timeout } from 'fire/util.js';
 
@@ -147,4 +147,32 @@ describe('properties', () => {
 		respEv.resize();
 		expect(div.style.width).toBe('33.333px');
 	});
+
+	it('xy', () => {
+		const ticker = new TestTicker;
+
+		const div = el();
+		const tl = timeline()
+			.add(div, {
+				xy: curve([
+					{ x: 0, y: 10 },
+					{ x: 100, y: 10 },
+					{ x: 50, y: 20 }
+				]),
+				duration: 10
+			});
+
+		tl.play();
+		ticker.run(0);
+		expect(div.style.transform)
+			.toBe('translate3d(0.000px,10.000px,0.000px)');
+
+		ticker.run(5);
+		expect(div.style.transform)
+			.toBe('translate3d(100.000px,10.000px,0.000px)');
+
+		ticker.run();
+		expect(div.style.transform)
+			.toBe('translate3d(50.000px,20.000px,0.000px)');
+	});
 });