xlf Posted April 10, 2021 Share Posted April 10, 2021 Hello world, i've installed gsap from "npm instal gsap" in my app.js file (called in html script) works fine with: import {gsap} from "gsap" gsap.from('nav', { y: 40, delay: 0.25 }); but i would like to use gsap from app.js for generic animations for all pages and others for specific pages in html , for example in about page <script> gsap.from('.about h1', { y: 40, delay: 0.25 }); </script> This codes return "gsap is not defined", how can I solve it? the same code inside app.js works, but not in this way. thank you Link to comment Share on other sites More sharing options...
Rodrigo Posted April 10, 2021 Share Posted April 10, 2021 Hi and welcome to the GreenSock forums. What tool are you using to create your bundle (parcel, Create React App, Vue CLI, Gatsby, Next, Nuxt, Svelte, Sapper, etc)? Basically the point is that the script being created by the bundle (which actually takes your code and packages and create a browser-ready file) is being added after the script tag you're adding manually. Happy Tweening!!! 1 Link to comment Share on other sites More sharing options...
xlf Posted April 10, 2021 Author Share Posted April 10, 2021 hi, thanks for your time I've used webpack (I'm studying a bit) const path = require('path'); const webpack = require('webpack'); module.exports = { mode: 'development', entry: [ './src/js/main.js', './src/js/owl-carousel.js', './src/js/gsap.js' ], output: { path: path.resolve(__dirname, 'dist/js'), filename: 'app.js', }, plugins: [ new webpack.ProvidePlugin({ $: 'jquery', jQuery: 'jquery', 'window.jQuery': 'jquery' }), ], module: { rules:[ { test: /.(scss|css)$/, use: [ { options: { reloadAll: true }, }, 'css-loader', 'sass-loader', 'node-sass' ] } ] } }; Link to comment Share on other sites More sharing options...
Rodrigo Posted April 10, 2021 Share Posted April 10, 2021 Ok, so I assume that the bundled file is being targeted inside an HTML file, like this: <script src="./app.js"></script> Basically you have to put your script after that tag and both should be before the closing <body> tag: <body> <!-- ALL YOUR HTML HERE --> <script src="./app.js"></script> <script> gsap.from('.about h1', { y: 40, delay: 0.25 }); </script> </body> Also keep in mind where exactly your HTML file resides in order to get the correct path to the app.js file. Happy Tweening!!! 1 Link to comment Share on other sites More sharing options...
xlf Posted April 11, 2021 Author Share Posted April 11, 2021 yes, I've your same code in my HTML taking another equal example <script src="dist/js/app.js"></script> <script> const header = document.querySelector('header'); gsap.from(header, { y: -40, delay: 0.25 } ) </script> in my gsap.js bundled in app.js import { gsap } from "gsap"; this solution returns in console "Uncaught ReferenceError: gsap is not defined at index.html" But if i move all my script inside gsap.js bundled in app.js the animation works correctly import { gsap } from "gsap"; const header = document.querySelector('header'); gsap.from(header, { y: -40, delay: 0.25 } ) it's the same code, written all in the js file it's ok, but if I put the animation script in the html I get the error in console... thank you Link to comment Share on other sites More sharing options...
GreenSock Posted April 12, 2021 Share Posted April 12, 2021 It's hard to know for sure because we can't see the issue in context, but you must have some code in your bundle that's trying to reference "gsap" before it's defined. It sounds like maybe a bundler issue, not a GSAP issue(?) Link to comment Share on other sites More sharing options...
xlf Posted April 12, 2021 Author Share Posted April 12, 2021 ok, I'll try to check, thank you Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now