nicolaseielll

Thanks a lot for this! It's working now!

I'm trying to deploy my nuxt project on Vercel but I get this error when deploying: "npm ERR! 404 '@gsap/shockingly@^3.10.2' is not in the npm registry". What would be the workaround for this? (I'm a beginner so sorry if that was a dumb question)

Ok, it's working now. The problem was that I had a separate smoother for an image on my index page but the original smoother is in my layouts and that messed things up. So the solution was to add the img smoother to the layout with the original smoother and everything started working.

I would need gsap installed on a Nuxt project

I'm using codesandbox.

How can I make a demo with clubPlugins?

Thank you for this! It partially solved the problem. Now the page content is the right height but after I navigate back to the previous page, the scroll has been slowed down by 50% + my sticky menu isn't following if I don't refresh the page. What could be causing this?

I have scrollSmoother on my clients website but when I navigate to another page, the content height is still the same as the previous page I came from. That leaves a big whitespace underneath all content. How could I refresh the scrollSmoother every time the url changes?

I got it working by wrapping that code to a setTimeout of 100 milliseconds

My text reveal animation works perfectly fine without scrollSmoother but after I implement it to the code, the animated headings wont appear at all. How do I use this with scrollSmoother? Here's the code that works without scrollSmoother: let headings = this.$gsap.utils.toArray('.split-text'); var SplitText = this.$SplitText headings.forEach((heading) => { let splitHeading = new SplitText(heading, {type: 'chars'}) this.$gsap.from(splitHeading.chars, { opacity: 0, rotation: 4, y: 50, ease: 'back.out', duration: 1, stagger: 0.03, scrollTrigger: heading }) })

Ok, Could there be a way to use the plugin without it?

My project is in the beiginning so there's nothing more than nuxt-gsap-module installed with my club token to access club plugins. (Sorry for my english)

I'm using nuxt-gsap-module. Here's the link: https://www.npmjs.com/package/nuxt-gsap-module. That is literally my setup.

Does this help: I'm trying to figure out how to do that in nuxt. (only the smooth scroll).

I bought the club membership but I'm still a little confused how to use the plugins in my app. I managed to get splitText to my app but when I try to import the scrollSmoother exactly the same way, it just throws me undefined in the console when I try to log it. So how do I get access to it? This is how I defined the plugin in my nuxt.config.js gsap: { extraPlugins: { scrollTo: true, scrollTrigger: true, }, clubPlugins: { splitText: true, scrollSmoother: true } }, And this is how I get access to SplitText in my component but this way wont work for the scrollSmoother: var SplitText = this.$SplitText console.log(SplitText)

Thanks a lot!! This was just what I was looking for.

So I have my split text animation in the website hero which runs on mounted but my client now wants the same animation to all of the h2 headings as well and that would require me to somehow use this same animation inside scrolltrigger so the animations would run when the heading appears in the window. Is this possible to do? Here's my animation in the mounted hook: How do I apply it in scrollTrigger? var SplitText = this.$SplitText var heading = new SplitText('.splitext', {type: 'words, chars', position: 'relative'}) TweenMax.staggerFrom(heading.chars, 1, {opacity: 0, rotation: 4, y: 50, ease:Back.easeOut}, 0.03)