Modified the behaviour of absolute transforms

This commit slightly modifies the behaviour of absolute transforms,
we will get them working soon :D

1 files changed, 22 insertions, 14 deletions

diff --git a/dirty.html b/dirty.html
index 3b9168a..a2507f4 100644
--- a/dirty.html
+++ b/dirty.html
@@ -17,7 +17,7 @@
 <div id="position"><label>Position: <input type="range" min="0" max="5" step="0.01"></slider></label><span></span></div>
 
 <!-- Making the svg -->
-<svg width=1000px height=1000px id="canvas">
+<svg width=1000px height=1000px id="canvas" viewbox="-1000 -1000 3000 3000">
   <rect x=50 y=100 width=200 height=100 stroke=none stroke-width=2 />
 </svg>
 
@@ -198,27 +198,35 @@ rectangle.animate().transform({
 
 
 let canvas = SVG('#canvas')
-// Make the green rectange
-canvas.rect(200, 400).move(200, 400)
-  .attr('opacity', 0.3)
-  .addClass('green')
+// // Make the green rectange
+// canvas.rect(200, 400).move(500, 400)
+//   .attr('opacity', 0.3)
+//   .addClass('green')
 
 // Make the pink rectangle
-let a = canvas.rect(200, 400).move(200, 400)
+let a = canvas.rect(200, 400).move(500, 400)
   .attr('opacity', 0.3)
   .addClass('pink')
   .transform({ px: 100, py: 500, origin: 'top-left' })
 
 
-  var timer = 0
-  a.timeline().source(() => {
-    timer += 1
-    document.querySelector('#absolute span').textContent = timer
-    return timer
-  })
+var timer = 0
+a.timeline().source(() => {
+  timer += 1
+  document.querySelector('#absolute span').textContent = timer
+  return timer
+})
+
+
+let obj = { rotate: 180, origin: [600, 600] }
+
+a.clone() // startPosition
+a.clone().transform(obj) // endPosition
+a.animate().transform(obj) // animation
+
+
 
-a.animate()
-  .transform({ translate: [200, 200], rotate: 500, origin: 'center' }, true)
+canvas.ellipse(30, 30)
 
 // Put an ellipse where we expect the object to be
 canvas.ellipse(30, 30).center(100, 500)