Search the Community
Showing results for tags 'menu gsap'.
Found 6 results
-
Hello, I'm new to GSAP and JS in general, but I wanted to add animation to my burger menu on click. let typeSplit = new SplitType(".mobile-menu-page-container", { types: "lines, words, chars", tagName: "span", }); // plain JavaScript version document.querySelector(".burger-wrap").addEventListener("click", function () { setTimeout(function() { gsap.from(".mobile-menu-page-txt .char", { y: "110%", opacity: 1, rotationZ: "10", duration: 0.2, ease: "power1.out", stagger: 0.05, }); }, 200); }); Everything works on the first click, but if I open and close the menu, it looks strange. What can I do? Thanks RPReplay_Final1706268273.mp4
-
Hello everyone, As someone new to GSAP and animation, I am trying to implement this specific animation into my Nuxt.js project. However, I am encountering difficulties and would appreciate any help or guidance you can provide. Here are the dependencies I am currently working with: "nuxt": "^2.15.8" "vue": "^2.7.10" And here are the relevant devDependencies: "nuxt-gsap-module": "^1.7.3" I want to click on the hamburger the menu will open and the hamburger will change to the close button very smoothly same as clicking on the close button. I would like to know how I can successfully implement the menu animation in my Nuxt.js project using these dependencies. Any advice or assistance you can offer would be greatly appreciated. Thank you! reference link: https://www.wilsoncreative.se/
-
It is necessary that when clicked, the animation of the menu would work out and when clicked again, the menu would simply close, without reverse. But when you open the menu again, so that the animation is played again. I will be very grateful for your help) It is necessary that after opening the menu, the menuItemsAnimation animation is triggered.And after the menu was closed, it simply left with it, without reverse, so that the user would not wait until it worked.That is, so that it simply works every time it is opened
-
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 working on a menu that needs to react differently for mobile vs desktop. I got it working but when I change the viewport width, the animation and reverse animation are bugged one time, after that they adept to the 'new' situation. On browser refresh it also works correctly. Can anyone point out why the animations don't work correctly when changing the viewport width the first time? If I look in the inspector I see the values being being used are still from the other timeline, even though the new screensize is active.. Item 2 slides out a sub-menu, other items should do the same but I left that out for now.
-
Hello, The design of my site include a floating menu built with bootstrap. On landing page which is a kind of one page site with 8 areas, the menu stays static on the bottom of screen, so when the content scrolls, part of this content is hidden by the fixed menu. I would appreciate to be able to reduce its width from all the width to a round image on its left. Clicking the image would deploy horizontally the menu bar on/off. On others pages it behaves more as a fixed top bootstrap menu but with a height which eats part of the page. Here I would appreciate to have it automatically reducing it height when the mouse is not over its area. But I want to keep all this cool enough to avoid trying to click on already reduced part of it. I hope my explanations are clear. Thanks for a direction to start.
