Permalink
Browse files

Changes to support CSS tweening

  • Loading branch information...
ntibbles committed Jan 15, 2012
1 parent a3a7710 commit eafa3d75620d512642015f8daf33754f9d770874
@@ -14,7 +14,7 @@
<script type="text/javascript" src="../src/Easing.js"></script>
<script type="text/javascript" src="../src/SimpleSynchro.js"></script>
<script type="text/javascript" src="../src/SimpleTween.js"></script>
- <script type="text/javascript" src="../src/SimpleTimeline.js"></script>
+
<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.min.js"></script>
<style>
@@ -43,7 +43,6 @@
position:absolute;
background-color:#0000FF;
margin-bottom:2px;
- /*-webkit-transform:rotate(45deg);*/
cursor:pointer;
}
@@ -79,8 +79,8 @@
<script>
var tween1, tween2, cbHandler = {};
- tween1 = SimpleTween.to(document.getElementById('sqA'), 3, { left: 100, top:100 }, { delay: 1, callback: cbHandler, trigger: {callback: triggerHandler, top: 90}, ease: Easing.backEaseOut, pause:true });
- tween2 = SimpleTween.to(document.getElementById('sqB'), 2, { left: 300, top:100 }, { ease: Easing.backEaseOut, pause: true, trigger: {callback: trigger2Handler, left: 310} });
+ tween1 = SimpleTween.to(document.getElementById('sqA'), 3, { left: 100, top:100 }, { delay: 1, callback: cbHandler, trigger: {callback: triggerHandler, top: 50}, ease: Easing.backEaseOut, pause:true, useJS:false });
+ tween2 = SimpleTween.to(document.getElementById('sqB'), 2, { left: 300, top:100 }, { ease: Easing.backEaseOut, pause: true, trigger: {callback: trigger2Handler, left: 310}, useJS:false });
cbHandler.onComplete = handleTweenComplete;
cbHandler.onStart = handleTweenStart;
@@ -109,12 +109,14 @@ <h1>PRESS START</h1><input type="button" onclick="timeline.start();" value="Star
* (A 1px pad for the border)
*/
function completeHandler() {
+
var target = document.getElementById(getRandomDiv()),
handler = {
onComplete: function() {
SimpleTween.to(target, 1, {backgroundPositionX:0, backgroundPositionY:0, width:799, height:599}, {ease: Easing.backEaseInOut });
}
};
+ console.log("complete: ",target);
target.style.zIndex = 99;
SimpleTween.to(target, 1, {top:0, left:0}, {trigger: { left:50, callback: triggerHandler }, callback: handler, ease: Easing.strongEaseOut});
@@ -37,8 +37,8 @@
.square {
top:10px;
left:10px;
- width:25px;
- height:25px;
+ width:250px;
+ height:250px;
border:1px solid #000;
position:absolute;
background-color:#0000FF;
@@ -49,6 +49,10 @@
}
+ .endOp {
+ opacity:1;
+ }
+
#status {
font: 82% Arial, sans-serif;
text-transform:capitalize;
@@ -74,8 +78,8 @@
// notice the 'rotate' parameter in the props object
- tween1 = SimpleTween.to(document.getElementById('sqA'), 5, {left: 100, width:200, height:200, top: 100, opacity:1, transform: { rotate: 405 } }, {callback: cbHandler, ease: Easing.strongEaseOut, pause:true, useJS:false});
- //tween2 = SimpleTween.to(document.getElementById('sqA'), 1, {rotate:45}, {ease: Easing.elasticEaseOut, pause:true});
+ tween1 = SimpleTween.to(document.getElementById('sqA'), 5, { opacity:1 }, {callback: cbHandler, ease: Easing.backEaseOut, pause:true});
+
cbHandler.onComplete = handleTweenComplete;
cbHandler.onStart = handleTweenStart;
cbHandler.onStop = handleTweenStop;
@@ -103,10 +107,10 @@
var complete = {
onComplete: function() {
- SimpleTween.to(document.getElementById('sqA'), 2, { left:220, transform: { rotate:360 } }, {ease: Easing.strongEaseOut});
+ SimpleTween.to(document.getElementById('sqA'), 2, { left:220, transform: { rotate:405 } }, {ease: Easing.strongEaseOut});
}
}
- SimpleTween.to(document.getElementById('sqA'), 2, { left:0, transform: { rotate:-180 } }, { ease: Easing.strongEaseOut, callback: complete });
+ SimpleTween.to(document.getElementById('sqA'), 2, { left:0, transform: { rotate:-225 } }, { ease: Easing.strongEaseOut, callback: complete });
};
@@ -43,10 +43,7 @@
position:absolute;
background-color:#0000FF;
margin-bottom:2px;
- /*opacity: 0.2;
filter: alpha(opacity=20);
- -webkit-transform:rotate(45deg) skew(45deg); -moz-transform:rotate(45deg);*/
-
}
#status {
@@ -68,7 +65,7 @@
</div>
</div>
<script>
- var tween1, cols = 15, rows = 15, tl = new SimpleTimeline();
+ var tween1, cols = 10, rows = 10, tl = new SimpleTimeline();
for(var i = 0; i < rows; i++){
for(var j = 0; j < cols; j++) {
@@ -79,7 +76,7 @@
el.style.top = j * 30 + "px";
el.style.backgroundColor = getRandomColor();
document.getElementById("container").appendChild(el);
- tl.addTween(SimpleTween.to(document.getElementById("sq"+i+"_"+j), 5, {left: 100, width:200, height:200, top: 100, opacity:1, transform: { rotate: 405 } }, { delay: getRandomDelay(), ease: Easing.strongEaseOut, useJS:true}), 0);
+ tl.addTween(SimpleTween.to(document.getElementById("sq"+i+"_"+j), 5, {left: 100, width:200, height:200, top: 100, opacity:1, transform: { rotate: getRandomRotation() } }, { delay: getRandomDelay(), ease: Easing.strongEaseOut }), 0);
}
};
@@ -92,17 +89,15 @@
return color;
};
+ function getRandomRotation() {
+ return Math.ceil((Math.random() * 405)*100)/100;
+ }
+
function getRandomDelay() {
return Math.ceil((Math.random() * 5)*100)/100;
- //return Math.random() * 20;
}
- console.log("nodes: ",cols*rows);
-
-
- // notice the 'rotate' parameter in the props object
- //tween1 = SimpleTween.to(document.getElementById('sqA'), 5, {left: 100, width:200, height:200, top: 100, opacity:1, transform: { rotate: 405 } }, {callback: cbHandler, ease: Easing.strongEaseOut, pause:true, useJS:false});
-
+ //console.log("nodes: ",cols*rows);
</script>
</body>
</html>
View

Some generated files are not rendered by default. Learn more.

Oops, something went wrong.

Some generated files are not rendered by default. Learn more.

Oops, something went wrong.
Oops, something went wrong.

0 comments on commit eafa3d7

Please sign in to comment.