Search the Community
Showing results for tags 'importing'.
-
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 able to import and use TweenMax in Angular2 with ES6 and it's working great in the environment. I've include the gsap libs into my build through npm and I'm importing the module using ES6 like so: /** * Import Libs */ import * as TweenMax from 'gsap'; /** * Exports for others scripts to use */ window.TweenMax = TweenMax; but when attempting to import the Draggable utility import * as Draggable from '../node_modules/gsap/src/minified/utils/Draggable.min'; I get the following error: Draggable.min.js:15 Uncaught Error: Cannot find module "TweenLite" In ES6 do I have to export TweenMax first for the Draggable module or is there another method for making the TweenMax module available for the Draggable module?