[Reversing animations in a function]

i see that on toggeling we get the animation back. like i have a simple animation div that goes from 0 to 600px in y axis. the problem is when it reaches 600px it suddenly gets 0px instead of coming back as 599px , 598px ... to 0px. how can we do this without toggeling ? i even used reversed but i didnt got it reversed. im new to gsap
 

  useEffect(() => {

    const container = containerRef.current;

    var tl = gsap.timeline({ repeat: -1, repeatDelay: 1 });

 

    tl.from(container, {

      y: "600px",

      backgroundColor: "yellow",

      color: "black",

      duration: 1,

      ease: "power1.inOut",

    });

 

    tl.to(

      container,

      {

        y: "1px",

        backgroundColor: "red",

        color: "black",

        duration: 1,

        ease: "power1.inOut",

      },

      "+=1"

    );

 

  }, []);