how to use gsap (installed with npm) inside HTML script for specific pages?

xlf · 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

Rodrigo · 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!!!

xlf · 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'
          ]
       }
      ]
   }
};

Rodrigo · 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!!!

xlf · 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

GreenSock · 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(?)

xlf · April 12, 2021

ok, I'll try to check, thank you

Notifications

Messages

how to use gsap (installed with npm) inside HTML script for specific pages?

Recommended Posts

xlf

Link to comment

Share on other sites

Rodrigo

Link to comment

Share on other sites

xlf

Link to comment

Share on other sites

Rodrigo

Link to comment

Share on other sites

xlf

Link to comment

Share on other sites

GreenSock

Link to comment

Share on other sites

xlf

Link to comment

Share on other sites

Create an account or sign in to comment

Create an account

Sign in

Recently Browsing 0 members