Welcome to the website of KBTween and JSTween!
Download them from GitHub!
View the documentation?
KBTween v2
KBTween is a tween library for Kaboom that allows easy creation of animation.
KBTween Examples
These are a set of examples showing what you can do with KBTween.
Code is usually interchangeable between the two, so any examples you like in KBTween, can easily be implemented in JSTween.
You can play with the examples by simply editing the code. It automatically changes!
Introduction - Flashing and Bouncing Bean
var k = kaboom();
var twnlib = KBTween(k);
loadBean();
var bean = add([
sprite("bean"),
pos(64, 64),
color(255, 255, 255)
]);
twnlib.tween(bean.pos, [ "x" ], {
from: 0,
to: width() - 64,
time: 3.2,
type: twnlib.tweentypes.PINGPONG
});
twnlib.tween(bean.pos, [ "y" ], {
from: 0,
to: height() - 64,
time: 2,
type: twnlib.tweentypes.PINGPONG
});
twnlib.tween(bean.color, [ "g", "r" ], {
from: 255,
to: 0,
time: 0.5,
type: twnlib.tweentypes.PINGPONG
});
Jumping Bean
var k = kaboom();
var twnlib = KBTween(k);
loadBean();
var bean = add([
sprite("bean"),
pos(64, 64),
color(255, 255, 255)
]);
twnlib.tween(bean.pos, [ "x" ], {
from: 0,
to: width() - 64,
time: 4,
type: twnlib.tweentypes.PINGPONG
});
twnlib.tween(bean.pos, [ "y" ], {
from: height() / 2,
to: height() - 64,
time: 1,
type: twnlib.tweentypes.PINGPONG
}, {
ease: easings.easeInQuad,
onFinish: (_, con, loop) => {
if (loop % 2 == 0) {
con.ease = easings.easeInQuad
} else {
con.ease = easings.easeOutQuad
}
}
});
Unorthodox Usages - Nice Score!
var k = kaboom();
var twnlib = KBTween(k);
var score = add([
text("Score: 0", {size: 48}),
pos(24),
{value: 0}
]);
twnlib.tween(score, [ "value" ], {
from: 0,
to: 100,
time: 1,
type: twnlib.tweentypes.CONTINUE
}, {
onUpdate: () => {
score.text = "Score: " + Math.round(score.value)
}
});
JSTween
JSTween is a tween library for web JavaScript that allows easy creation of animation.
It works on Firefox, Chrome, and modern Edge.
JSTween Examples
These are a set of examples showing what you can do with JSTween.
Code is usually interchangeable between the two, so any examples you like in JSTween, can easily be implemented in KBTween.
Introduction - Like <marquee> But Not Old
<div id="container" style="border:1px solid black;overflow:hidden;">
<p id="move" style="position: relative;left:0;top:0;display: inline-block;margin:0;">Hello!</p>
</div>
<script type="module">
import { JSTween } from "https://cdn.jsdelivr.net/gh/MeowcaTheoRange/KBTween@master/JSTween.js";
import { easings } from "https://cdn.jsdelivr.net/gh/MeowcaTheoRange/KBTween@master/easingpackage.js";
var twnlib = JSTween();
var move = document.getElementById("move");
var container = document.getElementById("container");
twnlib.tween(move.style, [ "left" ], {
from: -move.offsetWidth,
to: container.offsetWidth,
time: 5,
type: twnlib.tweentypes.FOREVER
}, {
suffix: "px"
});
</script>
Like <marquee> But Not Old and Alternating
<div id="container" style="border:1px solid black;overflow:hidden;height: 200px;width: 200px;">
<p id="move" style="position: relative;left:0;top:0;display: inline-block;margin:0;">Hello!</p>
</div>
<script type="module">
import { JSTween } from "https://cdn.jsdelivr.net/gh/MeowcaTheoRange/KBTween@master/JSTween.js";
import { easings } from "https://cdn.jsdelivr.net/gh/MeowcaTheoRange/KBTween@master/easingpackage.js";
var twnlib = JSTween();
var move = document.getElementById("move");
var container = document.getElementById("container");
twnlib.tween(move.style, [ "left" ], {
from: 0,
to: container.offsetWidth - move.offsetWidth,
time: 3.2,
type: twnlib.tweentypes.PINGPONG
}, {
suffix: "px"
});
twnlib.tween(move.style, [ "top" ], {
from: 0,
to: container.offsetHeight - move.offsetHeight,
time: 2,
type: twnlib.tweentypes.PINGPONG
}, {
suffix: "px"
});
</script>
Unorthodox Usages - Nice Score!
<p>Points: <span id="score">0</span></p>
<script type="module">
import { JSTween } from "https://cdn.jsdelivr.net/gh/MeowcaTheoRange/KBTween@master/JSTween.js";
import { easings } from "https://cdn.jsdelivr.net/gh/MeowcaTheoRange/KBTween@master/easingpackage.js";
var twnlib = JSTween();
var score = document.getElementById("score");
twnlib.tween(score, [ "innerHTML" ], {
from: 0,
to: 100,
time: 10,
type: twnlib.tweentypes.NORMAL
});
</script>