dehlix
Content Type
Profiles
Forums
Store
Blog
Product
Showcase
FAQ
Downloads
Posts posted by dehlix
-
-
cool! 🎉 it's working! thank you very much @OSUblake !
-
@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!
-
@OSUblake cool! thank you very much!
-
oh great! thank you for the quick reply. So I'll rewind what I was trying out and go this way! thank you!
-
@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.jsor.server.jscan 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
modeproperty ('client'or'server') inplugins.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 ] } -
@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! -
@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!
-
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!
-
@OSUblake thank you! I'm going to look into this thread 👍
-
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! -
👍 wonderful. thank you!
-
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! -
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"); }); } } ...
GSAP with Nuxt.js | ERROR Cannot read property 'querySelectorAll' of undefined
in GSAP
Posted
@OSUblake wonderful! yes, I'm aware of that. The reason why I'm using Nuxt it's precisely to get
universalmode's advantages . So I made a universal mode installation. However I plan to deploy with generating a static projectnpm 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!