Jump to content
Search Community

How to pass an object as an argument to Gsap .play()?

GM_sql test
Moderator Tag

Go to solution Solved by OSUblake,

Recommended Posts

Hi, I'd like to produce something like below. Basically, based on the condition the function takes predefined key/value object - in my caseparam_1 = {yPercent: -100} or  {xPercent: -100}.
 

function showMenuModal() {
    (mainWrapper.getAttribute("data-layout") === "mobile") ? playMenu({yPercent: -100}).play() : playMenu({xPercent: -100}).play();
};

openMenuBtn.addEventListener("click", showMenuModal);

function playMenu([param_1]) {
return gsap.timeline({paused: true})
                     .set(".menu_container", {zIndex: 1})
                     .from(".menu_outer_modal", {delay: 0.2, param_1})
                     .to(".menu_inner_modal", {opacity: 1})
                     .to(".menu_outer_modal > .close svg", {opacity: 1}, "<");
}

 

Link to comment
Share on other sites

You can merge objects like this.

 

function showMenuModal() {
    (mainWrapper.getAttribute("data-layout") === "mobile") ? playMenu({yPercent: -100}).play() : playMenu({xPercent: -100}).play();
};

openMenuBtn.addEventListener("click", showMenuModal);

function playMenu(param_1) {
return gsap.timeline({paused: true})
   .set(".menu_container", {zIndex: 1})
   .from(".menu_outer_modal", {delay: 0.2, ...param_1})
   .to(".menu_inner_modal", {opacity: 1})
   .to(".menu_outer_modal > .close svg", {opacity: 1}, "<");
}

 

 

Link to comment
Share on other sites

  • Solution

You would need to call reverse on the instance you opened the modal with, so something like this...

 

let modalAnimation;

function showMenuModal() {
    modalAnimation = (mainWrapper.getAttribute("data-layout") === "mobile") ? playMenu({yPercent: 100}) : playMenu({xPercent: 100});
};


function hideMenuModal(e) {
    modalAnimation.reverse();
};


function playMenu(param_1) {
    return gsap.timeline()
               .set(".menu_container", {zIndex: 1})
               .to(".menu_outer_modal", {delay: 0.2, ...param_1})
               .to(".menu_inner_modal", {opacity: 1})
               .to(".menu_outer_modal > .close svg", {opacity: 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...