Search the Community
Showing results for tags 'stuck'.
Found 2 results
-
http://clients.super-agency.com/test/index.html Hello, I made a menu with gsap, but after clicking on a different link from this menu and going back, the menu remains open, I couldn't find a solution, can you help? Where am I doing wrong? Menu code const ham = document.querySelector(".ham"); const menu = document.querySelector('.main-menu'); const links = menu.querySelectorAll('li a'); const menulist = document.querySelectorAll('.menu-list'); var tl = gsap.timeline({ paused: true }); tl.to(menu, { duration: 1, opacity: 1, height: '100vh', ease: 'expo.inOut', width: "100%", }) tl.from(menulist, { duration: .5, opacity: 0, height: '100vh', left: '0', ease: 'expo.inOut', }, "-=0.5"); tl.from(links, { opacity: 0, duration: 1.2, ease: "power4.out", y: 320, stagger: 0.1, }, "-=0.1"); tl.reverse(); ham.addEventListener('click', () => { menuBar.reversed(!menuBar.reversed()); tl.reversed(!tl.reversed()); }); var menuBar = gsap.timeline(); menuBar.to('.bar-1', 0.5, { attr: { d: "M8,2 L2,8" }, x: 1, ease: Power2.easeInOut }, 'start') menuBar.to('.bar-2', 0.5, { autoAlpha: 0 }, 'start') menuBar.to('.bar-3', 0.5, { attr: { d: "M8,8 L2,2" }, x: 1, ease: Power2.easeInOut }, 'start') menuBar.reverse(); Menu Codepen Code https://codepen.io/r3khchand/pen/MWbJOwz
-
I'm wondering if anyone has seen this or knows something I could try to fix it. I am flipping a card over and animating it to the center using a timeline. To return it to its former position, I reverse the timeline. Most of the time it works great, but in 5-10% of the cases, the timeline will not complete all the steps when reversed. Sometimes the card gets "stuck" in the center of the screen or the z-index isn't set back to default. To demonstrate, go to this site: http://gaylord.dluxstudio.co/home.html. Click on the "Brain" card and then any other card to show the flip. Clicking the "X" reverses the flipped card animation. My technique is to iterate through the child cards, creating a new timeline: var tl = new TimelineLite({paused:true}); tl .add('grow', 0) .set(element, {className:'+=flipped'}) .set(element, {zIndex:999}) .to(element, 0.05, {width: flippedWidth, height: flippedHeight, x: leftOffset, y: topOffset}, 'grow') .add('flip', 'grow+=0.15') .to(frontCard, 0.35, {rotationY:180}, 'flip') .to(backCard, 0.35, {rotationY:0}, 'flip') .to(element, 0.35, {z:50}, 'flip') .to(element, 0.35, {z:0}, 'flip+=0.15'); I then add the timeline to the element using: element.animation = tl; When the "X" button is clicked I reverse the animation: card[0].animation.reverse(); If there is a better way to reverse these timelines, I'd love to know. I really can't figure out why only in some cases the reversed timeline does not complete all the steps. Thanks for any help you might have for me.
