limbo Posted April 28, 2021 Share Posted April 28, 2021 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 1 Link to comment Share on other sites More sharing options...
akapowl Posted April 28, 2021 Share Posted April 28, 2021 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 3 Link to comment Share on other sites More sharing options...
limbo Posted April 28, 2021 Author Share Posted April 28, 2021 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 2 Link to comment Share on other sites More sharing options...
PatrickRoppel Posted June 19, 2021 Share Posted June 19, 2021 dear all i guess this concept could be easily adapted to also use vmax and vmin? but as i am a complete newbie to scrolltrigger and js, i am worried that my guess is completely wrong. thanks in advance for any hint, most appreciated. Link to comment Share on other sites More sharing options...
OSUblake Posted June 19, 2021 Share Posted June 19, 2021 You could use Math.min() for vmin and Math.max() for vmax. const vh = (coef) => window.innerHeight * (coef/100); const vw = (coef) => window.innerWidth * (coef/100); ScrollTrigger.create({ trigger: '.my_elem', start: () => Math.min(vw(10), vh(10)) + ' top', // vmin }); 4 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