Jump to content
GreenSock

limbo

Approach — Active link to "slide"

Recommended Posts

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

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.

 

See the Pen bGVjLwG by GreenSock (@GreenSock) on CodePen

 

  • Like 2
Link to comment
Share on other sites

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

 

  • Like 1
Link to comment
Share on other sites

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 account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×