GM_sql Posted December 3, 2021 Share Posted December 3, 2021 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 More sharing options...
OSUblake Posted December 3, 2021 Share Posted December 3, 2021 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 More sharing options...
GM_sql Posted December 3, 2021 Author Share Posted December 3, 2021 Thank you very much for your prompt reply. Works as expected. I will have to incorporate reverse() as well. Link to comment Share on other sites More sharing options...
OSUblake Posted December 3, 2021 Share Posted December 3, 2021 We have some stuff in the blog and learning center. For something more in depth, @Carl has some excellent courses over at his Creative Coding Club. And then @PointC has some really nice tutorials at MotionTricks. 3 Link to comment Share on other sites More sharing options...
GM_sql Posted December 4, 2021 Author Share Posted December 4, 2021 Than you @OSUblake. All these resources look really interesting and inspiring. Link to comment Share on other sites More sharing options...
Solution OSUblake Posted December 4, 2021 Solution Share Posted December 4, 2021 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 More sharing options...
GM_sql Posted December 6, 2021 Author Share Posted December 6, 2021 That's what I needed. Thanks. 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