Why, hello there! How are you? I'm good!
Once upon a time...
500ms
There was a dramatic pause!
this text will be deleted
500ms
500ms
told you :P
This will repeat three times!
This will repeat forever!
1s
No need to skimp out on
flair!
I am a spooky spooky SPOOKY robot!
{
"types": [
{
"name": "robot",
"properties": {
"data-char-interval": "0ms",
"data-word-interval": "100ms"
}
}
]
}
I am the coolest in the whole entire world.
{
"types": [
{
"name": "cool",
"properties": {
"data-char-interval": "20ms"
},
"style": "color:blue;"
}
]
}
cool
{
"processing": [
{
"tag": "span",
"pre": function(el) {
el.textContent +=
";DROP TABLE users --";
},
"post": function(el) {
el.onclick = function() {
alert("cool (:");
}
}
}
]
}
How can I run these myself?
To run each of these examples on your own, copy the html and configuration as it is presented above
into the designated spaces in the html below.
<html>
<head>
<title>tply animation</title>
<style>
#tply-source {
display: none; /* we don't want our template to be visible */
}
</style>
<script src="tply.js"></script> <!-- a reference to the tply file -->
</head>
<body>
<div id="tply-source">
<!-- the html you see in each example goes here -->
</div>
<div id="tply-destination">
<!-- this is where stuff is rendered-->
</div>
<script>
tply.animate(
document.getElementById("tply-source"),
document.getElementById("tply-destination"),
{ /*this is where the configuration you see would go */ });
</script>
</body>
</html>