Detecting Div the current scroll is on

[mimeartist]

What's the simplest way of detecting what is the main section the user is on with scrollTrigger... e.g. if each section is  stacked ontop of one another  and 100% of the viewport height when the user scrolls?

 

Love the new site by the way!

[GSAP Helper]

It's pretty tough to answer without a minimal demo. In general, it’s probably as simple as setting up a ScrollTrigger for each section and you can use the callbacks like onToggle or you can check isActive anytime you want for each instance. Again, it’s hard to offer advice when we don’t have a minimal demo to look at.

 

Here's a starter CodePen that loads all the plugins. Just click "fork" at the bottom right and make your minimal demo: 

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

 

Using a framework/library like React, Vue, Next, etc.? 

CodePen isn't always ideal for these tools, so here are some Stackblitz starter templates that you can fork and import the gsap-trial NPM package for using any of the bonus plugins: 

• React (please read this article!)
• Next
• Svelte
• Sveltekit
• Vue
• Nuxt