<script>
import { tick } from 'svelte'
import { tweened } from 'svelte/motion'
const timeline = [
{ duration: 1000, label: "add text"},
{ duration: 1000, label: "add more text"},
{ duration: 1000, label: "replace text"}
]
const totalDuration = timeline.reduce((acc, step) => acc + step.duration, 0)
const seconds = totalDuration / 1000
// sped up by a factor of 5
const pos = tweened(0, {duration: totalDuration/5})
$: currentTime = $pos / 1000
let state = 'paused'
function toggle() {
if (state == 'playing') {
pause()
} else {
play()
}
}
async function play() {
state = 'playing'
if ($pos == totalDuration)
pos.set(0, {duration: 0})
await pos.set(totalDuration)