// create a timeline to interpolate x with time
// note: frame will be used as time
const timeline = new Timeline()

timeline
  .startAt(0)  // x start at 0
  .add({ to: 10, duration: 20 })  // x will move from 0 to 10 in the next 20 frames 
  .add({ to: 5, duration: 10 }) // then from 10 to 5 in the next 10 frames
  .add({ to: 20, duration: 15 }) // then from 5 to 20 in the next 15 frames
  .add({ to: 0, duration: 30 }) // and then from 20 to 0 in the next 30 frames

// component in remotion
const Logo = () => {
  const frame = useCurrentFrame()
  const x = timeline.play(frame)
  
  return <Circle x={x} />
}