Is this way of writing reasonable?

[sagexiang]

Is this way of writing reasonable? When there are two divs in the panel that need to be animated simultaneously~Is there a more advanced way of writing it?

 

tl.to(".section .panel div:first-child", {
        duration: 1,
        x: "80vw",
        stagger: 1,
     })
   .to(".section .panel div:last-child", {
        duration: 1,
        x: "-80vw",
        stagger: 1,
    }, "<");

See the Pen yLwKeGM?editors=0010 by Sage-Xiang (@Sage-Xiang) on CodePen

[GreenSock]

Sure, that's fine. There's nothing wrong with that code. 

 

An alternate option: 

panels.forEach((panel, index) => {
  tl.to(panel.querySelectorAll("div:first-child, div:last-child"), {
    duration: 1,
    x: (i) => i ? "-80vw" : "80vw"
  }, index);
});

You can also simplify this:

document.addEventListener("DOMContentLoaded", () => {
      const liElements = document.querySelectorAll(".section .panel");

      liElements.forEach((li, index) => {
        li.style.zIndex = liElements.length - index;
      });
});

To this: 

gsap.set(panels, {
  zIndex: (i) => panels.length - i
});

See the Pen PoLRzpE?editors=0010 by GreenSock (@GreenSock) on CodePen

 

Have fun!

[sagexiang]

You solved my pain, thank you so much! Sorry, I am a perfectionist in details, thank you GSAP~🫡❤️