Animates from very start

[fredriktre]

``https://youtu.be/tQu8ojxiwT8

I may just be missunderstanding how it works, but here it goes.

I am trying to make a small animation with grid placements here. using a setup like this: {
grid-start: num,
grid-end: num,
row-span: num
}

And somehow, I get the result from that video.
It comes from the wrong direction, becomes larger than the grid itself sometimes. Many things that just looks weird.

Again, probably just something stupid on my end, but thought this was the fastest way to get a response 😓

here's my code:
`
import Layout from '@/components/basic/PublicLayout'
import { useEffect, useRef, useState } from 'react'
import { wrapGrid } from 'animate-css-grid'

export default function Home() {
    const [animationActive, setAnimationActive] = useState<boolean>(false)
    const [currAnimated, setCurrAnimated] = useState({
        box0 : {
            cols: 1,
            cole: 3,
            row: 1
        },
        box1 : {
            cols: 3,
            cole: 5,
            row: 1,
        },
        box2 : {
            cols: 1,
            cole: 4,
            row: 1,
        },
        box3 : {
            cols: 4,
            cole: 5,
            row: 1,
        },
    })
    const animation = {
        box0: [
            {
                cols: 1,
                cole: 3,
                row: 1,
            }, 
            {
                cols: 1,
                cole: 4,
               row: 1,
  },
  {
    cols: 1,
    cole: 4,
    row: 1,
  },
  {
    cols: 1,
    cole: 4,
    row: 1,
  },
  {
    cols: 1,
    cole: 4,
    row: 1,
  },
],
box1: [
  {
    cols: 3,
    cole: 5,
    row: 1,
  },
  {
    cols: 4,
    cole: 5,
    row: 1,
  },
  {
    cols: 4,
    cole: 5,
    row: 1,
  },
  {
    cols: 4,
    cole: 5,
    row: 2,
  },
  {
    cols: 4,
    cole: 5,
    row: 1,
  },
],
box2: [
  {
    cols: 1,
    cole: 4,
    row: 1,
  },
  {
    cols: 1,
    cole: 4,
    row: 1,
  },
  {
    cols: 1,
    cole: 3,
    row: 1,
  },
  {
    cols: 1,
    cole: 3,
    row: 1,
  },
  {
    cols: 1,
    cole: 3,
    row: 1,
  },
],
box3: [
  {
    cols: 4,
    cole: 5,
    row: 1,
  },
  {
    cols: 4,
    cole: 5,
    row: 1,
  },
  {
    cols: 3,
    cole: 5,
    row: 1,
  },
  {
    cols: 3,
    cole: 4,
    row: 1,
  },
  {
    cols: 3,
    cole: 5,
    row: 1,
  },
]

}
const gridRef = useRef(null)

useEffect(() => {
if (!gridRef) return
if (gridRef != null){
const current:any = gridRef.current
wrapGrid(current, {
stagger: 0,
duration: 500,
easing: 'easeInOut'
})
if (!animationActive) {
handleAnimation(0)
setAnimationActive(true)
}
}
}, [gridRef])

const handleAnimation = (interval:number) => {
let newInterval = 0
setCurrAnimated({
box0: animation.box0[interval],
box1: animation.box1[interval],
box2: animation.box2[interval],
box3: animation.box3[interval],
})

if (interval < animation.box0.length - 1) {
  newInterval = interval + 1
} else {
  newInterval = 0
}

console.log(newInterval)

setTimeout(() => {
  handleAnimation(newInterval)
}, 1500)

}

return (

  <div className='w-4/5 h-full mx-auto flex flex-col justify-center items-center gap-10'>
    <h1 className='text-4xl'>Management dashboard</h1>

    {
      <div ref={gridRef} className='grid grid-cols-4 grid-rows-2 w-80 h-40 gap-5 border-2 border-black overflow-hidden'>
        <div className={`bg-black w-full h-full ${`col-start-${currAnimated.box0.cols} col-end-${currAnimated.box0.cole}`} ${`row-span-${currAnimated.box0.row}`}`}></div>
        <div className={`bg-black w-full h-full ${`col-start-${currAnimated.box1.cols} col-end-${currAnimated.box1.cole}`} ${`row-span-${currAnimated.box1.row}`}`}></div>
        <div className={`bg-black w-full h-full ${`col-start-${currAnimated.box2.cols} col-end-${currAnimated.box2.cole}`} ${`row-span-${currAnimated.box2.row}`}`}></div>
        <div className={`bg-black w-full h-full ${`col-start-${currAnimated.box3.cols} col-end-${currAnimated.box3.cole}`} ${`row-span-${currAnimated.box3.row}`}`}></div>
      </div>
    }
  </div>

</Layout>

)
}
`