Jump to content
Search Community

Two timelines from window size

Xsander775 test
Moderator Tag

Recommended Posts

Hey guys
Need advice

There are two timelines, depending on the size of the window, the Timeline starts.

The difference is only xPercent & yPercent

Can ? Place xPercent/xPercent in a variable and change depending on the parameter

 

let sizeBnr = bnr.offsetWidth;
let pr = gsap.timeline();
window.onresize = function() {
        setTimeout(function() {
         sizeBnr = bnr.offsetWidth;
         stAn(sizeBnr);
    }, 500);
 }
function stAn(raz) {
    if (raz >= 560) {
       an1();
    } else if (raz >= 300) {
       an2();
    }
}
function an1() {
    pr.add("st1")
        .from('.rpanel', { xPercent: "+=100", delay: 0.5, duration: 0.65, ease: "power2.out" })
}
function an2() {
    pr.add("st1")
        .from('.rpanel', { yPercent: "+=100", delay: 0.5, duration: 0.65, ease: "power2.out" })
}

Or tell me how to properly separate streams / scripts

Link to comment
Share on other sites

Hey Xsander775.

 

I'm not fully understanding the context here. Based on the code you're want an animation to play every resize? Maybe explaining the context or including a minimal demo can help us help you further.

 

In terms of your actual question, you can use logic when getting the values:

let timeout;
window.addEventListener("resize", function() {
  if(timeout) clearTimeout(timeout);
  
  timeout = setTimeout(function() {
    const raz = bnr.offsetWidth;
    
    if(raz >= 300) {
      gsap.from('.rpanel', { 
        xPercent: raz >= 560 ? "+=100" : 0,
        yPercent: raz >= 300 ? "+=100" : 0,
        delay: 0.5, 
        duration: 0.65, 
        ease: "power2.out",
        overwrite: 'auto'
      });
    }
  }, 500);
});

 

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