Single page cannot completely destroy ScrollTrigger

[abmao]

Using killAll is still being called. Since now my page is loading repeatedly it crashes so I'm looking for the cause

https://github.com/hengshanMWC/gsap-ScrollTrigger
gsap@3.12.5

[GSAP Helper]

Without a minimal demo, it's very difficult to troubleshoot; the issue could be caused by CSS, markup, a third party library, a 3rd party script, etc. Would you please provide a very simple CodePen or Stackblitz that illustrates the issue? 

 

Please don't include your whole project. Just some colored <div> elements and the GSAP code is best. See if you can recreate the issue with as few dependencies as possible. Start minimal and then incrementally add code bit by bit until it breaks. Usually people solve their own issues during this process! If not, at least we have a reduced test case which greatly increases your chances of getting a relevant answer.

 

See the Pen aYYOdN by GreenSock (@GreenSock) on CodePen

that loads all the plugins. Just click "fork" at the bottom right and make your minimal demo: 

 

Using a framework/library like React, Vue, Next, etc.? 

CodePen isn't always ideal for these tools, so here are some Stackblitz starter templates that you can fork and import the gsap-trial NPM package for using any of the bonus plugins: 

• React (please read this article!)
• Next
• Svelte
• Sveltekit
• Vue
• Nuxt

 

Please share the StackBlitz link directly to the file in question (where you've put the GSAP code) so we don't need to hunt through all the files. 

 

Once we see an isolated demo, we'll do our best to jump in and help with your GSAP-specific questions. ✅

[Rodrigo]

Hi,

 

Besides echoing the need for a minimal demo, I'd strongly recommend that you use GSAP Context for this:

https://gsap.com/docs/v3/GSAP/gsap.context()

 

Here is a simple demo using Vue Router with GSAP Context to revert all the GSAP instances created inside it's scope:

https://stackblitz.com/edit/vitejs-vite-6pprgk

 

Finally, you created a duplicated post in another thread, I'm going to delete that so we can focus our attention in this one.

 

Happy Tweening!

[abmao]

On 2024/4/24 at PM4点11分, GSAP Helper said:

如果没有 最小化的demo，排查问题是非常困难的；该问题可能是由 CSS、标记、第三方库、第 3 方脚本等引起的。您能否提供一个非常简单的 CodePen 或 Stackblitz 来说明该问题？ 

 

请不要包含您的整个项目。 只需一些彩色<div>元素和 GSAP 代码是最好的。看看是否可以使用尽可能少的依赖项来重现问题。从最少的代码开始，然后一点一点地增量添加代码，直到出现问题。通常人们在这个过程中解决自己的问题！如果没有，至少我们有一个减少的测试用例，这大大增加了您获得相关答案的机会。

 

 

加载所有插件。只需单击右下角的“fork”并制作您的最小演示： 

 

 

使用 React、Vue、Next 等框架/库？ 

CodePen 并不总是适合这些工具，因此这里有一些Stackblitz 入门模板，您可以分叉并导入gsap-Trial NPM 包 以使用任何奖励插件： 

• 反应 （请阅读这篇文章！）
• 下一个
• 斯韦尔特
• 斯维尔特基特
• 维埃
• 努克斯特

 

请将 StackBlitz 链接直接分享到相关文件（您放置 GSAP 代码的位置），这样我们就不需要搜索所有文件。 

 

一旦我们看到一个单独的演示，我们将尽力介入并帮助您解决特定于 GSAP 的问题。  ✅

https://github.com/hengshanMWC/gsap-ScrollTrigger
Is it possible with github?

[mvaneijgen]

Sadly we cant live debug a GitHub repro. Also we don't need all the code just the minimum issue you're having trouble with, that is why we've created ou Stackblitz starter templates  so you can jump in and just create the bare minimum to demonstrate the issue you're having.