Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
Joe165

Different code for different viewports

Recommended Posts

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

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.

  • Like 3
Link to comment
Share on other sites

Wow ... i guess we all hit submit at the same time! 🤣

  • Like 1
  • Haha 3
Link to comment
Share on other sites

Hah! Nice triple team effort!

  • Haha 3
Link to comment
Share on other sites

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.
×