sagexiang Posted February 1 Share Posted February 1 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 Link to comment Share on other sites More sharing options...
Solution GreenSock Posted February 1 Solution Share Posted February 1 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! 1 1 Link to comment Share on other sites More sharing options...
sagexiang Posted February 1 Author Share Posted February 1 You solved my pain, thank you so much! Sorry, I am a perfectionist in details, thank you GSAP~🫡❤️ 3 Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now