limbo Posted January 10, 2022 Share Posted January 10, 2022 Hello I wondered if anyone had a good example I can start with — when using scrollTo (and I assume ScrollTrigger) with a list of links (like this example pen attached) where each link would update with a class when it corresponds with the current 'slide' (either by scrolling or clicking). Maybe using hashes? (my slides will all correspond with an anchor point so they can be linked from external sources... I expect this has been asked before a few times, but a few searches didn't turn anything up... See the Pen bGVjLwG by GreenSock (@GreenSock) on CodePen Link to comment Share on other sites More sharing options...
OSUblake Posted January 10, 2022 Share Posted January 10, 2022 Hi limbo, You can use callbacks, like onEnter and onEnterBack to set the class. I only did the first 2 panels here, but you should be able to figure out the rest. Navigation links compatibility - ScrollTrigger (codepen.io) 2 Link to comment Share on other sites More sharing options...
limbo Posted January 10, 2022 Author Share Posted January 10, 2022 Thanks for the reply. That's put me on the right track — Ended up doing this // create array const sections = gsap.utils.toArray("section.service"); // then loop through 'sections' sections.forEach( section => { // get data attribute var theService = section.getAttribute('data-theservice'); // run GSAP on all sections gsap.from(section.querySelectorAll("section.service"), { duration: 1.5, stagger: 0.5, scrollTrigger: { trigger: section, start: "top 100%-=20px", // account for a little extra end: "bottom 100%-=20px", // account for a little extra markers: true, onEnter: checkData, onLeave: checkData, onEnterBack: checkData, onLeaveBack: checkData, } }); // check data attr against service position with scrolltrigger function hooks: function checkData() { console.clear(); console.log(">>>>" + theService); root.classList.toggle(theService); } // checkData }); // for each 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