Joe165 Posted September 8, 2021 Share Posted September 8, 2021 Hi. I've used the search function, but can't find it. Very basic question: How do I make code work for certain viewport sizes? I have the very simple code blocks underneath and I want to either change the yPercentage per viewport size - or maybe disable the code altogether for some other viewports. I've tried to find out how to do it, but each time I seem to be doing something wrong. Regards gsap.fromTo("#div_block-24-10", { yPercent: 33 }, { yPercent: -33, ease: "none", scrollTrigger: { trigger: "#section-21-10", scrub: true }, }); gsap.fromTo("#div_block-74-10", { yPercent: 33 }, { yPercent: -33, ease: "none", scrollTrigger: { trigger: "#section-61-10", scrub: true }, }); gsap.fromTo("#div_block-125-10", { yPercent: 33 }, { yPercent: -33, ease: "none", scrollTrigger: { trigger: "#section-95-10", scrub: true }, }); gsap.fromTo("#div_block-162-10", { yPercent: 33 }, { yPercent: -33, ease: "none", scrollTrigger: { trigger: "#section-160-10", scrub: true }, }); gsap.fromTo("#div_block-142-10", { yPercent: 33 }, { yPercent: -33, ease: "none", scrollTrigger: { trigger: "#section-134-10", scrub: true }, }); Link to comment Share on other sites More sharing options...
nico fonseca Posted September 8, 2021 Share Posted September 8, 2021 Hey @Joe165 you can use the ScrollTrigger.matchMedia() 🙂https://greensock.com/docs/v3/Plugins/ScrollTrigger/static.matchMedia() 3 Link to comment Share on other sites More sharing options...
iDad5 Posted September 8, 2021 Share Posted September 8, 2021 I'm not sure if I understand you fully. I assume that by viewport-sizes you refer certain/proportions of the window. You could use conditional statement depended on window.clientWIdth of height, you could work with window.matchMedia or try to set up you whole construction that all of that isn't necessary of only in certain cases.... Hard to say without an clearer picture of why you want what you wand. As basic example in code-pen would help. 3 Link to comment Share on other sites More sharing options...
Shaun Gorneau Posted September 8, 2021 Share Posted September 8, 2021 Hi @Joe165, You can look into Window.matchMedia() https://developer.mozilla.org/en-US/docs/Web/API/Window/matchMedia to check conditions to determine how/when you want certain tweens/timelines to fire. 4 Link to comment Share on other sites More sharing options...
Shaun Gorneau Posted September 8, 2021 Share Posted September 8, 2021 Wow ... i guess we all hit submit at the same time! 🤣 1 3 Link to comment Share on other sites More sharing options...
Cassie Posted September 8, 2021 Share Posted September 8, 2021 Hah! Nice triple team effort! 3 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