Search the Community
Showing results for tags 'importing'.
Found 3 results
-
Hello, im trying to use SplitText club plugin, but i can't make it work. I've searched in forum but no similar issue found. 1. Club token added to `.npmrc` //npm.greensock.com/:_authToken=xxxxxxx @gsap:registry=https://npm.greensock.com 2. transpile gsap in `nuxt.config.ts` build: { transpile: ['gsap'] } 3. Register plugins in `/plugins/gsap.ts` (this also doesn't work `/plugins/gsap.client.ts`) such as: import gsap from 'gsap' import { ScrollTrigger } from 'gsap/ScrollTrigger' import { SplitText } from 'gsap/SplitText' export default defineNuxtPlugin(() => { gsap.registerPlugin(ScrollTrigger) if (process.client) { gsap.registerPlugin(SplitText) } }) Everthing works fine in local build, but not in actual build on server, this is my error: * Also I find here https://github.com/hypernym-studio/nuxt-gsap/pull/41 this comment: (actually same error using nuxt-gsap) So maybe somehow `gsap/SplitText` is not visible for build ? I tried to make minimal repo, which is oddly working fine (just add authToken to `.npmrc`): https://stackblitz.com/edit/github-fhtp4t-jgbsnt?file=nuxt.config.ts,pages%2Findex.vue,.npmrc
-
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?
