<script>
import { onMount } from 'svelte'
import { quadInOut } from 'svelte/easing'
import { tweened } from 'svelte/motion'
let timeline = [
{ year: 1995, label: "DHTML" },
{ year: 2006, label: "jQuery" },
{ year: 2010, label: "Angular 1" },
{ year: 2013, label: "React" },
{ year: 2019, label: "Svelte3" },
]
const width = 900
let duration = 1000
let index = tweened(0, {duration, easing: quadInOut})
let dotSize = tweened(3, {duration: 200, easing: quadInOut})
onMount(() => {
const interval = setInterval(next, 1500)
return () => {
clearInterval(interval)
}
})
function next() {
$dotSize = 3
if ($index < timeline.length - 1) {
$index++
} else {
$index = 0
}
setTimeout(() => $dotSize = 8, 500)
}