Jump to content
Search Community

ScrollTrigger - with start/end using VH/VW units

limbo test
Moderator Tag

Recommended Posts

Hello

 

I'm working on a build and want to use GSAPs features to run a enter/leave functions. Got it working well so I can handle some class changes to the body but I'd love it if the trigger points could be vw as the grid is all based on vw units and everything scales from there.

 

Simplified code:

 

ScrollTrigger.create({
    trigger: '.my_elem',
    start: 'top 10vw',
    end: 'top 10vw',
    onEnter: enterFunc,
    onLeaveBack: leaveFunc
});

Those two vh units don't work in this usecase (as far as I got with it in any case)... any assistance or pointers would be grand.

Thanks

  • Like 1
Link to comment
Share on other sites

 

Could you tap into the window.innerWidth @limbo ?

 

ScrollTrigger.create({
    trigger: '.my_elem',
    start: () => 'top ' + window.innerWidth*0.1,
    end: () => 'top ' + window.innerWidth*0.1,
    onEnter: enterFunc,
    onLeaveBack: leaveFunc
});

 

If not, a demo would really help claryfying your scenario and finding out what could work best for you

 

See the Pen cf50ebc76a4f144ab1fab97c62aa979a by akapowl (@akapowl) on CodePen

 

  • Like 3
Link to comment
Share on other sites

Nice. That worked a treat. As you added that I also found another post here that demo'd a great way to calc vh/vw to then use as variables:

 

const vh = (coef) => window.innerHeight * (coef/100);
const vw = (coef) => window.innerWidth * (coef/100);

 

Which can be used like:

 

ScrollTrigger.create({
    trigger: '.my_elem',
    start: vw(10) + ' top',
    end: vw(10) + ' top',
    onEnter: enterFunc,
    onLeaveBack: leaveFunc
});

 

Thanks for the pointer

 

  • Like 2
Link to comment
Share on other sites

  • 1 month later...

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.
×
×
  • Create New...