Pandy Posted August 25, 2021 Share Posted August 25, 2021 Hi. I am writing this code with bootstrap and gsap. When the web page loads appears with animation. I wrote a reverse, it supose when the user clicks on any item on the navbar, the animation occurs in reverse, but this is not working. ¿Why? 😐 See the Pen ExXaGyR by sandy-reyes-the-sans (@sandy-reyes-the-sans) on CodePen Link to comment Share on other sites More sharing options...
PointC Posted August 25, 2021 Share Posted August 25, 2021 Hi @Pandy I'm not seeing any reverse in your demo so I don't understand the question. Just FYI - you don't need to animate each nav link individually. You have a stagger on your first tween which isn't doing anything since it's targeting one item, but if you target the .nav-link class, your whole timeline could look like this. let tl = gsap.timeline({ defaults: { duration: 0.6, ease: "power1" } }); tl.from(".nav-link, .animation", { opacity: 0, y: -50, stagger: 0.2 }); tl.from( ".mypr", { opacity: 0, y: 11 }, "-=0.2" ); But as I said, I don't understand the reverse question since there is nothing reversing in the demo. Hopefully that helps. Happy tweening 3 Link to comment Share on other sites More sharing options...
Pandy Posted August 25, 2021 Author Share Posted August 25, 2021 My apologies. Here is the corrected code with the reverse. Link to comment Share on other sites More sharing options...
PointC Posted August 26, 2021 Share Posted August 26, 2021 The way you have it structured now, the listener is only be added to the first .nav-link. You'd need to loop through your NodeList and add the listener to each one. document.querySelectorAll(".nav-link").forEach((obj) => { obj.addEventListener("click", (event) => { event.preventDefault(); tl.reverse(); }); }); Happy tweening. 4 Link to comment Share on other sites More sharing options...
Solution PointC Posted August 26, 2021 Solution Share Posted August 26, 2021 I'd be remiss if I didn't also mention that you can use GSAP's toArray() utility method too. const targets = gsap.utils.toArray(".nav-link"); targets.forEach((obj) => { obj.addEventListener("click", (e) => { e.preventDefault(); tl.reverse(); }); }); Happy tweening. 6 Link to comment Share on other sites More sharing options...
Pandy Posted August 28, 2021 Author Share Posted August 28, 2021 Thank u very much, Sir. 😃 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