Jump to content
Search Community

Born05

Members
  • Posts

    10
  • Joined

  • Last visited

Everything posted by Born05

  1. Solution turns out to be: import { gsap } from 'gsap'; import { ScrollTrigger } from 'gsap/dist/ScrollTrigger.js'; Works in latest version of SvelteKit/vite.
  2. Importing gsap/ScrollTrigger.js throws the folliwing error: Warning: To load an ES module, set "type": "module" in the package.json or use the .mjs extension. app_1 | (Use `node --trace-warnings ...` to show where the warning was created) app_1 | Cannot use import statement outside a module app_1 | /usr/src/app/node_modules/gsap/ScrollTrigger.js:12 app_1 | import { Observer, _getTarget, _vertical, _horizontal, _scrollers, _proxies, _getScrollFunc, _getProxyProp, _getVelocityProp } from "./Observer.js"; app_1 | ^^^^^^ app_1 | app_1 | SyntaxError: Cannot use import statement outside a module app_1 | at Object.compileFunction (node:vm:353:18) app_1 | at wrapSafe (node:internal/modules/cjs/loader:1040:15) app_1 | at Module._compile (node:internal/modules/cjs/loader:1076:27) app_1 | at Module._extensions..js (node:internal/modules/cjs/loader:1166:10) app_1 | at Module.load (node:internal/modules/cjs/loader:988:32) app_1 | at Module._load (node:internal/modules/cjs/loader:834:12) app_1 | at ModuleWrap.<anonymous> (node:internal/modules/esm/translators:170:29) app_1 | at ModuleJob.run (node:internal/modules/esm/module_job:198:25) app_1 | at async Promise.all (index 0) app_1 | at async ESMLoader.import (node:internal/modules/esm/loader:409:24) Importing gsap/ScrollTrigger results in the following: Cannot use import statement outside a module app_1 | /usr/src/app/node_modules/gsap/ScrollTrigger.js:12 app_1 | import { Observer, _getTarget, _vertical, _horizontal, _scrollers, _proxies, _getScrollFunc, _getProxyProp, _getVelocityProp } from "./Observer.js"; app_1 | ^^^^^^ app_1 | app_1 | SyntaxError: Cannot use import statement outside a module app_1 | at Object.compileFunction (node:vm:353:18) app_1 | at wrapSafe (node:internal/modules/cjs/loader:1040:15) app_1 | at Module._compile (node:internal/modules/cjs/loader:1076:27) app_1 | at Module._extensions..js (node:internal/modules/cjs/loader:1166:10) app_1 | at Module.load (node:internal/modules/cjs/loader:988:32) app_1 | at Module._load (node:internal/modules/cjs/loader:834:12) app_1 | at ModuleWrap.<anonymous> (node:internal/modules/esm/translators:170:29) app_1 | at ModuleJob.run (node:internal/modules/esm/module_job:198:25) app_1 | at async Promise.all (index 0) app_1 | at async ESMLoader.import (node:internal/modules/esm/loader:409:24)
  3. When building using SvelteKit's static adapter in combination with typescript this throws the following error: Error [ERR_MODULE_NOT_FOUND]: Cannot find module '/usr/src/app/node_modules/gsap/dist/ScrollTrigger' imported from /usr/src/app/.svelte-kit/output/server/entries/pages/__layout.svelte.js Did you mean to import gsap/dist/ScrollTrigger.js? The gsap import using import gsap from 'gsap'; seems to work fine. Importing the .js file directly conflicts with typescript: Could not find a declaration file for module 'gsap/dist/ScrollTrigger.js'. '/Users/roelvanhintum/Sites/ace-placeholder/app/node_modules/gsap/dist/ScrollTrigger.js' implicitly has an 'any' type. If the 'gsap' package actually exposes this module, try adding a new declaration (.d.ts) file containing `declare module 'gsap/dist/ScrollTrigger.js';`ts(7016)
  4. Ah, I see. I also called that when unpausing, so that's why it was working for me. Thanks! I updated the CodeSandbox with a refresh-scroll Nuxt event in the afterEnter hook.
  5. Thanks. I tried out but that didn't solve the original problem. However, turns out I totally missed the CSS inside the layout that was setting an explicit height of 4000px. I moved that to a scoped styling block inside index.vue so the layout itself doesn't have an explicit height. Now everything is working as expected: when navigating to the about page, the scroll position is reset, and by pausing and then unpausing ScrollSmoother, the height gets recalculated and set on the body. Would be nice to have a `refresh` method on ScrollSmoother.js though, instead of pausing/unpausing.
  6. I might be doing something wrong here, but I tried to add those urls in CodeSandbox under `Dependencies`, but then CodeSandbox throws an error: error https://assets.codepen.io/16327/ScrollTrigger.min.js?v=3.10.3b: Extracting tar content of undefined failed, the file appears to be corrupt: "Invalid tar header. Maybe the tar is corrupted or it needs to be gunzipped?"
  7. I tried by forking your demo, and adding a new page. Unfortunately what works for me in my current project doesn't seem to work entirely inside codesandbox. You can find my demo here: https://codesandbox.io/s/gsap-scrollsmoother-nuxt-js-starter-forked-s727oq The things I did: - create an extra about page - added a header to the layout with nuxt links to home and about page - added a `gsap.client.js` plugin that registers the gsap plugins and adds convenience methods to Vue prototype - added `pageTransition` to nuxt.config.js, which uses the hooks to emit global Nuxt events for resetting, stopping or starting scroll - added `scrollSmoother` mixin, used by default layout, that sets up the ScrollSmoother instance and listens for those Nuxt events Upon routing, scroll position gets reset to 0 as I would expect, but the inline height set on the body doesn't get updated, so the about page can be scrolled way beyond its actual height. And I'm not sure why that is.
  8. Ah, pausing and then unpausing seems to do the trick.
  9. Just a quick question: I'm trying to replace LocomotiveJS with the new ScrollSmoother plugin inside a Nuxt site. On the initial page load everything seems to work fine, but when I navigate to another page, the contents of the #smooth-content div get replaced, but the height that is set inline on the body doesn't get updated. How would I go about refreshing that? Thanks!
  10. For future reference, importing in every file isn't necessarily needed. The plugin approach was in the right direction, but you need to use the gsap instance you created there everywhere in your app. Example in a nuxt app: plugins/gsap.js import Vue from 'vue'; import { gsap } from 'gsap'; import { ScrollTrigger } from 'gsap/ScrollTrigger'; gsap.registerPlugin(ScrollTrigger); const GSAP = { install(Vue, options) { Vue.prototype.$gsap = gsap; Vue.prototype.$ScrollTrigger = ScrollTrigger; }, }; Vue.use(GSAP); Everywhere in your nuxt app use gsap as following (referencing this.$gsap): this.$gsap.to(this.$refs.exampleElement, { duration: 1, x: 50, scrollTrigger: { /* scrolltrigger stuff */ } }); Same goes for this.$ScrollTrigger.refresh() instead of ScrollTrigger.refresh()
×
×
  • Create New...