GSAP-Trial + "local.loremipsum"-domain ?

March 25, 2025

Hi Folks,
is it possible to try out the "scrollsmoother" from the npm pack gsap-trial
on a simple website with the domain "local.loremipsum"?

I get redirected to gsap.com, does the local domain contains "localhost", or is the scrollsmoother not intended to be tried out?

I really just for the purpose of trying out placed this inside the header:

Thank you in advance.

March 25, 2025

Hi,

The GSAP Trial package should work on any development local environment whose URL starts with http://localhost regardless of the build tool you use, it even works with this VSCode extension I use sometimes:

https://github.com/ritwickdey/vscode-live-server-plus-plus

Also it works without any issues on Codepen, Stackblitz and Codesandbox URLs.

In this case though:

local.loremipsum

Is not going to work, same as in any domain/subdomain other than the ones I already mentioned.

Hopefully this clear things up.

Happy Tweening!

March 25, 2025

Thanks for the very quick response!
I changed the format of the local domain just to "https://localhost.gsaptest/"
I do see the trial-info but it does not redirect me as previously.

I see in the devtools that there is an error, of which i am unsure what it means.

my index file

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
     
    <link rel="stylesheet" href="styles.css">

    <script src="./node_modules/gsap-trial/dist/gsap.js"></script>
    <script src="./node_modules/gsap-trial/dist/ScrollTrigger.js"></script>
    <script src="./node_modules/gsap-trial/dist/ScrollSmoother.js"></script>

    <script src="jquery.js"></script>
    <script src="script.js"></script>

    <title>Document</title>
</head>
<body>

    <div id="smooth-wrapper">
        <div id="smooth-content">
          <!--- ALL YOUR CONTENT HERE --->
          <div class="box"></div>
          <div class="box"></div>
        </div>
      </div>

</body>
</html>

my script.js file:

gsap.registerPlugin(ScrollTrigger, ScrollSmoother);

console.log('ScrollSmoother', ScrollSmoother);

//waiting for dom to be loaded....
$(function () {

    ScrollSmoother.create({
        smooth: 1,
        effects: true,
    });

});

the error i get is that:
Uncaught TypeError: Cannot read properties of undefined (reading 'indexOf')

Can someone explain why it works when i put "script.js" at the very bottom of body?
I thought the

$(function () {})

would take care of that?

March 25, 2025

doh...found the "error":
just place the "registerPlugin"-stuff INSIDE of jquerys "ready"-method:

$(function () {
    console.log('DOMREADY');

    gsap.registerPlugin(ScrollTrigger, ScrollSmoother);

    ScrollSmoother.create({
        smooth: 1,
        effects: true,
    });

});

everything works as it should.
Hope i also could help someone with this.

Thanks for the help Rodrigo!

March 25, 2025

Hi,

Try putting the <script> tags before the closing <body> tag, like this:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="styles.css">
    <title>Document</title>
  </head>
  <body>

    <div id="smooth-wrapper">
      <div id="smooth-content">
        <div class="box"></div>
        <div class="box"></div>
      </div>
    </div>

    <script src="./node_modules/gsap-trial/dist/gsap.js"></script>
    <script src="./node_modules/gsap-trial/dist/ScrollTrigger.js"></script>
    <script src="./node_modules/gsap-trial/dist/ScrollSmoother.js"></script>
    <script src="script.js"></script>
  </body>
</html>

The script has to run when the elements are present in the DOM, right now is running before.

Give that a try and let us know.

Happy Tweening!

Notifications

Messages

GSAP-Trial + "local.loremipsum"-domain ?

Recommended Posts

beenjamin

Rodrigo

beenjamin

beenjamin

Rodrigo

Create an account or sign in to comment

Create an account

Sign in

Recently Browsing 0 members