ScrollTrigger: Toggle class on fixed element once user has scrolled and before hitting end of viewport

[Duo]

Hi,

 

I have a fixed social-share element that appears on scroll but I am wanting to implement ScrollTrigger to have it add a class of active if the user has scrolled 20% of the viewport and then remove the class of active once the user is 20% from the bottom of the viewport.

 

I've tried messing with this CodePen but am having no luck: 

 

You can see how it currently behaves here: https://atmos.earth/raveena-aurora-ashas-awakening-leads-with-love/

 

This is my code currently:

gsap.to(socialShare, {
  autoAlpha: 1, 
  scrollTrigger: {
    trigger: "body",
    markers: true,
    start: "top -20%",
    end: "top -20%"
  }
});

 

Any help would be greatly appreciated as it seems quite simply but it might be early morning brain fog haha.

 

Thanks,

Dayne

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

[mvaneijgen]

In these kind of situations it's always best to turn on markers to see what the triggers are doing. In the example the viewport triggers are placed outside the viewport, I find that hard to wrap my head around and it would also not work for your end trigger. So I would get the viewport height multiply it by 0.2 to get 20% of it and do the same for the bottom trigger. Hope it helps and happy tweening! 

 

See the Pen ZEMxoNr?editors=0110 by mvaneijgen (@mvaneijgen) on CodePen

[Duo]

mvaneijgen this has worked perfectly! thanks so much for your help and quick reply! it's greatly appreciated.