timeline.js

const easeInOutCubic = t => (t < 0.5 ? 4 * t * t * t : (t - 1) * (2 * t - 2) * (2 * t - 2) + 1)

function timeline(t, number, slot, cb) {
  const range = slot * (1 / number)
  if (t >= range && t <= range + 1 / number) cb(easeInOutCubic((t - range) * number))
}

function useTimeline(factor = 1, number, offset, callback) {
  useFrame(state => {
    const t = (Math.sin(state.clock.getElapsedTime() * factor) + 1) / 2
    timeline(t, number, offset, callback)
  })
}

function A00({ speed, number = 2, offset = 0, ...props }) {
  const [sketch, model, outlines] = useRefs(3, null)

  useTimeline(speed, number, offset + 0, t => {
    sketch.current.traverse(obj => {
      if (obj.material) {
        obj.material.opacity = t
        if (obj.material.dashed) {
          obj.material.dashSize = obj.userData.length * t
          obj.material.gapSize = (1 - t) * obj.userData.length
        }
      }
    })
  })

  useTimeline(speed, number, offset + 1, t => {
    outlines.current.material.opacity = t
    outlines.current.scale.y = t
    outlines.current.position.y = 0.6 * t
    model.current.material.opacity = t
    model.current.scale.y = t
    model.current.position.y = 0.6 * t
  })
  
..
  
export default function Modeling() {
  return (
    <group position={[-3, 0, 0]}>
      <A00 speed={0.5} number={6} offset={0} />
      <A00 speed={0.5} number={6} offset={2} position={[3, 0, 0]} />
      <A00 speed={0.5} number={6} offset={4} position={[6, 0, 0]} />