Problem with anime js timeline what to do?

Question

Why if I write translateX in add() it works fine but if I write it in timeline, strange things happen?

  [ let tl = anime.timeline({
            targets: '.time',
            duration: 1000,
            delay: function (el,i,len) {
                return (i+1) * 200
            }
            delay: 200,
            easing: 'easeOutExpo',
            direction: 'alternate',
            loop: true,
            translateX: 300, // <-- translateX causes problem here
        })

        tl
        .add({
            //translateX: 300,  <-- but not here
            easing: 'spring'
        })
        .add({
            scale: 2,
            opacity: 0.5
        })
        .add({
            targets: '.rectan',
            rotate: 360
        })
        .add({
            translateX: 0,
            opacity: 1,
            scale: 1
        })](https://stackoverflow.com)

I tried switching between.