Jump to content
Search Community

dehlix

Members
  • Posts

    14
  • Joined

  • Last visited

Recent Profile Visitors

The recent visitors block is disabled and is not being shown to other users.

dehlix's Achievements

1

Reputation

  1. @OSUblake wonderful! yes, I'm aware of that. The reason why I'm using Nuxt it's precisely to get universal mode's advantages . So I made a universal mode installation. However I plan to deploy with generating a static project npm run generate . And I just did a test and it works perfectly also once it's deployed without server side! Thank you so much for your help!
  2. @OSUblake thank you! in your example I don't find a method where you specify the if(!process.client) return; someMethod() { if (!process.client) return; gsap.to(...) } I know that in Vue is not needed, right? ...that it's precisely the Nuxt issue. however I try with that and refs instead of selectors, that probably will make the final difference. Thank you!
  3. @OSUblake oh great! thank you for the quick reply. So I'll rewind what I was trying out and go this way! thank you!
  4. @OSUblake following your hint I found now the following in Nuxt Docs. Probably this is the way to go? Name conventional plugin If plugin is assumed to be run only in client or server side, .client.js or .server.js can be applied as extension of plugin file, the file will be automatically included in corresponding side. Example: nuxt.config.js: export default { plugins: [ '~/plugins/foo.client.js', // only in client side '~/plugins/bar.server.js', // only in server side '~/plugins/baz.js' // both client & server ] } Object syntax You can also use the object syntax with the mode property ('client' or 'server') in plugins. Example: nuxt.config.js: export default { plugins: [ { src: '~/plugins/both-sides.js' }, { src: '~/plugins/client-only.js', mode: 'client' }, // only on client side { src: '~/plugins/server-only.js', mode: 'server' } // only on server side ] }
  5. @OSUblake Thank you for this! this is very helpful! but it's still unclear to me if (process.client) { gsap.registerPlugin(TextPlugin, ScrollTrigger) } if the above code serve to specify that I want to import a resource only on the client-side. Would you know what else should I do to make sure that process.client is available? Thank you!
  6. @ZachSaucier thank you for your suggestion! Actually I have already connected the project to a headless CMS and I'm also querying data. So the code it's already to complex. Your suggestion gives me the hint to first install GSAP on a fresh Nuxt.js installation and then after connect the rest and so on. That way it will be easier also for me maybe to understand and as well to create a Sandbox example eventually. I'll proceed this way! Thank YOU!
  7. Hi @OSUblake! by following the suggestions I'm now importing GSAP in Nuxt this way:index.vue import { gsap } from 'gsap' import { TextPlugin } from 'gsap/TextPlugin' import { ScrollTrigger } from 'gsap/ScrollTrigger' if (process.client) { gsap.registerPlugin(TextPlugin, ScrollTrigger) } nuxt.config.js build: { transpile: ['gsap'], }, The page renders well and I have the animation working. Still in the terminal I get this error: ERROR Cannot read property 'querySelectorAll' of undefined 15:04:45 at toArray (pages/index.js:2537:95) at new Tween (pages/index.js:4710:104) at Object.to (pages/index.js:5029:14) at VueComponent.startAnimation (pages/index.js:116:49) at pages/index.js:107:14 at processTicksAndRejections (internal/process/task_queues.js:93:5) Thank you for your help!
  8. Good morning! In my Nuxt.js App I install GSAP by downloading the files in UMD/CommonJS mode and installed the the gsap-bonus.tgz. it looks fine so far that the page renders with the animation. however the CMS crashed with "Uncaught error: mainImage is not defined”. Above all I'm getting this error in the Terminal: ERROR Cannot read property 'querySelectorAll' of undefined 10:01:49 at toArray (node_modules/gsap/dist/gsap.js:606:95) at new Tween (node_modules/gsap/dist/gsap.js:2778:104) at Object.to (node_modules/gsap/dist/gsap.js:3097:14) at VueComponent.startAnimation (pages/index.js:116:59) at pages/index.js:107:14 at runMicrotasks (<anonymous>) at processTicksAndRejections (internal/process/task_queues.js:93:5) Any idea? thank you!
  9. ScrollTrigger is registered and loading properly, animations on other elements is working fine! Yes ultimately it's a Vue inherent question. I'll try to follow your suggestion to use refs. thank you!
  10. Hello! With VueJs I'm not managing to apply ScrollTrigger animation to the array of posts I’m rendering in the page. However the same GSAP animation is working perfectly if applied to a list of div. Therefore I would assume that I’m not managing to properly get the reference to the v-for. Please any hint? Thank you! <ul> <li v-for="post in posts" :class="box" :key="post._id">{{ post.title }}</li> </ul> ... mounted: function() { this.startAnimation(); }, methods: { startAnimation: function() { ScrollTrigger.defaults({ toggleActions: "restart pause resume none", markers: true }); gsap.utils.toArray(".box").forEach((el, i) => { gsap.to(el, { scrollTrigger: { trigger: el, scrub: i * 0.2 }, x: "400px" }); console.log(i, "hello there"); }); } } ...
×
×
  • Create New...