Jump to content
GreenSock

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

GM_sql

Members
  • Posts

    7
  • Joined

  • Last visited

Recent Profile Visitors

The recent visitors block is disabled and is not being shown to other users.

GM_sql's Achievements

  1. I had used this approach before but going through the tutorials I've wanted to improve my code and simplify it a bit. Unfortunately I have 2 conditions to apply (horizontal and vertical movement) so seems I have to stick to my original findings. Thank you.
  2. Hi, I have defined initial element position in css and Gsap anim target xPercent: transform: translate(-100%, 0); {duration: 1, delay: 0.2, xPercent: 0, yPercent: 0} The problem is that it doesn't work at all, and in case I put xPercent as 100% the output is expressed in px - and that is not responsive. What to do in order the code I've provided above is working?
  3. Than you @OSUblake. All these resources look really interesting and inspiring.
  4. Thank you very much for your prompt reply. Works as expected. I will have to incorporate reverse() as well.
  5. 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}, "<"); }
  6. Dear Gsap users, I realize that similar topis was raised several times, but seems I need more guidance. I have 2 modals, one over another. The question is how to set visibility (visible / hidden) in order to have an access to both of them. As for me, seems visibility is the solution. AutoAlpha doesn't work in my case. JS describes animation and setting for the "menu_container"; exactly the same code applies to "cookie_container". .menu_container { width: 100vw; max-width: var(--screen_width); height: 100vh; overflow: hidden; position: absolute; visibility: hidden; } .cookie_container { width: 100vw; max-width: var(--screen_width); height: 100vh; overflow: hidden; position: absolute; visibility: hidden; } function showMenuModal(e) { headerGlobal.classList.add("freeze"); playMenu.play(); }; function hideMenuModal(e) { headerGlobal.classList.remove("freeze"); playMenu.reverse(); }; openMenuBtn.addEventListener("click", showMenuModal); closeMenuBtn.addEventListener("click", hideMenuModal); const playMenu = gsap.timeline({paused: true}) .to("menu_container", {autoAlpha: 1}) .to(".menu_outer_modal", {opacity: 1}) .from(".menu_outer_modal", {delay: 0.2, xPercent: -100}) .to(".menu_inner_modal", {opacity: 1});
×