import { tweened } from './discreteTween'

const values = [0, 90, 180, 360]

const degrees = tweened({values, duration: 1000})

const color = tweened({values: [0x990066, 0xFF3399, 0x6633CC], duration: 1000})

const text = tweened({values: ["I'm a box", "...", "#cray", "so fun!!"], duration: 1000})

const scale = tweened({values: [1, 1.5, 1.2, 2.1, 1.8], duration: 1000})

function start() {

degrees.run()

color.run()

text.run()

scale.run()

}

function stop() {

degrees.reverse()

color.reverse()

text.reverse()

scale.reverse()

}

</script>

<div class="container">

<h1>Discrete tween</h1>

<p>A <code>tweened()</code> store that uses a discrete series of values,<br/> instead of a continuous series.</p>

<pre>

degrees = {$degrees}deg

color = #{$color.toString(16)}

text = "{$text}"

scale = {$scale}

</pre>

<div>