add example for CSS plugin

CreateJS · Dec 18, 2023 · 612f55c · 612f55c
1 parent 14c4ae7
commit 612f55c
Showing 1 changed file with 40 additions and 0 deletions.
diff --git a/examples/CSSPlugin_square.html b/examples/CSSPlugin_square.html
@@ -0,0 +1,40 @@
+<html>
+
+<head>
+	<script type="text/javascript" src="../lib/tweenjs-NEXT.js"></script>
+	<script type="text/javascript" src="../src/tweenjs/plugins/CSSPlugin.js"></script>
+</head>
+
+<body>
+    <!-- <div id="aap" style="background-color: blue; width: 100px; height: 100px;"> -->
+</body>
+
+<script>
+    timeMs = 0
+    createjs.Ticker.timingMode = createjs.Ticker.RAF;
+    createjs.Ticker.init();
+    createjs.CSSPlugin.install();
+    var box = document.createElement('div');
+    box.style.setProperty('background-color', '#008800');
+    box.style.setProperty('width', '100px');
+    box.style.setProperty('height', '100px');
+    box.style.setProperty('opacity', '0.4');
+    box.style.setProperty('margin-left', '0');
+    box.style.setProperty('transform', 'skew(30deg, 20deg) scale(0.5, 0.5) rotate(0.2turn)');
+    document.body.appendChild(box);
+
+    //    createjs.Ease["sineIn"] = (a) => { console.log("time: " + a); console.log("output from func: " + (1-Math.cos(a*Math.PI/2))); return 1-Math.cos(a*Math.PI/2)}
+
+    createjs.Tween.get(box)
+        .to({ "margin-left": 240, "top": 0 }, 1000, createjs.Ease["sineIn"]) // Move to (300, 200) in 1 second.
+   setTimeout(() => {createjs.Tween.get(box).to({ "opacity": 1.0 }, 1000, createjs.Ease["sineIn"])}, 1000) // Move to (300, 200) in 1 second.
+   setTimeout(() => {createjs.Tween.get(box).to({ "margin-left": 0, "top": 0 }, 1000, createjs.Ease["sineIn"])}, 1000) // Move to (300, 200) in 1 second.
+   setTimeout(() => {createjs.Tween.get(box).to({ "margin-left": 240, "top": 0 }, 1000, createjs.Ease["sineIn"])}, 3000) // Move to (300, 200) in 1 second.
+   setTimeout(() => {createjs.Tween.get(box).to({ "margin-left": 0, "top": 0 }, 1000, createjs.Ease["sineIn"])}, 5000) // Move to (300, 200) in 1 second.
+   setTimeout(() => {createjs.Tween.get(box).to({ "margin-left": 240, "top": 0 }, 1000, createjs.Ease["sineIn"])}, 7000) // Move to (300, 200) in 1 second.
+   setTimeout(() => {createjs.Tween.get(box).to({ "margin-left": 0, "top": 0 }, 1000, createjs.Ease["sineIn"])}, 9000) // Move to (300, 200) in 1 second.
+   setTimeout(() => {createjs.Tween.get(box).to({ "transform": "skew(1deg, 1deg) scale(1, 1) rotate(0turn)" }, 1000, createjs.Ease["sineIn"])}, 1000) // Move to (300, 200) in 1 second.
+//    setTimeout(() => {createjs.Tween.get(box).to({ "opacity": 0.0, "top": 0 }, 1000, createjs.Ease["sineIn"])}, 2000) // Move to (300, 200) in 1 second.
+</script>
+
+</html>