Mike790 Posted October 24, 2020 Share Posted October 24, 2020 Hi everyone! I want to make sure that I'm taking the right approach to animating a forEach function. Between the two scripts below, which would be the better approach? They both appear to be equal in performance, so I'm not sure if it's just a matter of preference at this point or if one approach outweighs the other. Thanks in advance for any guidance on my question! function sectionFadeAnimations(btn, selectedSection) { gsap.to(onPageSections, { opacity: 0, duration: 0.2, display: 'none', onComplete: () => { document.querySelectorAll(selectedSection).forEach(section => { section.style.display = 'block'; gsap.to(section, { opacity: 1, duration: 0.2 }); }); } }); } document.querySelectorAll('.on-page-menu button').forEach(btn => { btn.addEventListener('click', () => { let selectedSection = btn.classList[0]; sectionFadeAnimations(btn, selectedSection); }); }); --------------------------------------------------------------------------------------------------- gsap.utils.toArray('.on-page-menu button').forEach(btn => { btn.addEventListener('click', () => { let selectedSection = btn.classList[0]; gsap.to(onPageSections, { opacity: 0, duration: 0.2, display: 'none', onComplete: () => { document.querySelectorAll(selectedSection).forEach(section => { section.style.display = 'block'; gsap.to(section, { opacity: 1, duration: 0.2 }); }); } }); }); }); Link to comment Share on other sites More sharing options...
ZachSaucier Posted October 24, 2020 Share Posted October 24, 2020 Hey Mike. They're pretty equivalent, mostly just programming style being different. A couple of comments (not about the difference between the two) though: Are you really wanting to select all of the "selectedSection"s and change their opacity? There's likely a better way to write that section but given the lack of context it's pretty hard to make a recommendation. If you made a minimal demo of your situation that'd be really helpful: gsap.set() is a good way to avoid having to do elem.style.property (especially useful if you are setting a lot of properties at the same time). Link to comment Share on other sites More sharing options...
Mike790 Posted October 25, 2020 Author Share Posted October 25, 2020 Thanks for your quick reply and mentioning the set() function! I created a quick version of what I'm trying to accomplish on Codepen. See the Pen mdEWdNa by agaisab (@agaisab) on CodePen Link to comment Share on other sites More sharing options...
ZachSaucier Posted October 26, 2020 Share Posted October 26, 2020 I'd probably set it up this way: See the Pen MWepQaV?editors=0100 by GreenSock (@GreenSock) on CodePen In general it's best to avoid inline styles in your HTML when you can. 2 Link to comment Share on other sites More sharing options...
hilarync Posted March 15, 2022 Share Posted March 15, 2022 I just wanted to say thank you for this helpful thread! I was able to reduce my code a ton with your method, Zach. 🥰 1 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