[ScrollToPlugin does not work with rollup bundle]

I seem to have identified the cause of my problem.
At least ScrollToPlugin is now working.

As it turns out, it had nothing to do with GSAP, but I'll leave my solution in this forum for anyone else facing the same problem.

 

The cause was the lack of output.format:'iife' in my rollup config.

 

Here is my final rollup.config.mjs code.

import { dirname, resolve } from 'path';
import { nodeResolve } from '@rollup/plugin-node-resolve';

export default {
  input: [
    resolve(dirname(new URL(import.meta.url).pathname), './src/index.js'),
  ],
  output: {
    entryFileNames: '[name].js',
    dir: 'public',
    format: 'iife',
  },
  plugins: [
    nodeResolve({
      extensions: ['.js'],
    }),
  ],
};

 

Finally, thanks again to @GreenSock for the advice!

[ScrollToPlugin does not work with rollup bundle]

I see! I understand.
I am relieved to hear that it is a Rollup issue.
Because I like and trust GSAP very much!

 

I am going to ask this question in the Rollup forum.
Thanks for your help!

[ScrollToPlugin does not work with rollup bundle]

21 hours ago, GreenSock said:

Also, this looked odd to me: 

import { ScrollToPlugin } from "./ScrollToPlugin.js"

Didn't you mean to do this?: 

import ScrollToPlugin from "gsap/ScrollToPlugin";

You are right! This was test code, sorry.

 

Quote

I can't reproduce the problem - can you please provide very detailed instructions about how exactly we can see the problem?

I have prepared a code that can reproduce the problem.

 

https://stackblitz.com/edit/stackblitz-starters-h7q6is?file=src%2Findex.js

 

You can see the error in DevTools by clicking on "LINK A".

Uncaught TypeError: ((_plugins[property] && _plugins[property].get) || getter) is not a function

 

On the other hand, if you click on "LINK B" it works fine because it does not target the window.

 

I would like to know if there is a solution to this problem.

[ScrollToPlugin does not work with rollup bundle]

Hello.

The code that was working before has stopped working and we are investigating the cause.
The process itself can be reproduced with a simple code, which is as follows

 

HTML

<div style="height:1000vh; background-color:#333;background-image:repeating-linear-gradient(#0002,#0002 100px,#0004 100px,#0004 200px);"></div>
<a href="#" id="anchor" style="position:fixed;right:10px;bottom:10px;">LINK</a>

 

Javascript

import { gsap } from "gsap"
import { ScrollToPlugin } from "./ScrollToPlugin.js"
gsap.registerPlugin(ScrollToPlugin)

console.log(ScrollToPlugin.version)

document.getElementById("anchor").addEventListener("click", (e) => {
  e.preventDefault()
  gsap.to(window, { duration: 1, scrollTo: "max" })
})

 

When I click on the "LINK" I get the following error

Uncaught TypeError: ((_plugins[property] && _plugins[property].get) || getter) is not a function

 

The strange thing is that when I load GSAP from CDN without using rollup, it works fine.
Here is a Pen I created in the same way and it works fine.

 

What is even stranger is that when the scrolling is performed on a scrollable element other than a window, it works fine.

 

gsap.to("#SOME_ELEMENT", { duration: 1, scrollTo: "max" })

 

Is there anything else I can try?

See the Pen dywjwbW by mjonai (@mjonai) on CodePen