Nicolaseliell

Hey, I was trying to build my project on vercel but I kept getting this error even though my gsap premium plan is valid: npm ERR! code CERT_HAS_EXPIRED npm ERR! errno CERT_HAS_EXPIRED npm ERR! request to https://npm.greensock.com/@gsap%2fshockingly/-/shockingly-3.12.5.tgz failed, reason: certificate has expired npm ERR! A complete log of this run can be found in: /vercel/.npm/_logs/2024-04-03T13_36_27_218Z-debug-0.log Error: Command "npm install" exited with 1 Could it be caused by the SSL certificate of npm.greensock.com?

Hey, this question is not directly related to GSAP but I thought you guys might have some good insight about this: I'm trying to create a page transition similar to this site: https://vucko.co/ but I struggle to find a way to make the page transition seamless so that the previous & next page are visible at the same time for a brief moment, this creates the effect that the page never changes while the next page is transitioning from bottom to top. My main problem is that when I create a javascript transition with Nuxt & GSAP the previous page has to go away before the next one even has a chance to be visible. I'm not an expert with page transitions so I might be missing something fundamental here. Here is a basic demo of a Nuxt transition setup I have been using: https://stackblitz.com/edit/nuxt-starter-lq1ckq?file=helpers%2FtransitionConfig.js

I created this and this produces the curve I want but I'm still confused why it is flipped:

But the thing I don't understand is why do need a custom tween if this is exactly what I need: If I do the opposite of this which is outIn, then it should be the one I dont want but the power4.inOut produces the effect of outIn even tho it should be inOut, I don't get it. Is there an explanation why it is flipped?

I got the ease to the stagger sequence but another problem occured: When I set the ease: 'power4.inOut' inside the stagger object, the ease works the opposite way like it was outIn instead of inOut (I need it to be inOut) but if I set the same ease to a div above the split text animation the bezier curve behaves correctly like: start slowly and speed up it the middle and then slow down again in the end but the stagger works the opposite like start fast, then slow down in the middle and then speed up in the end which is not what I want. Why does it flip the bezier curve like that? Here's a code example of it: https://stackblitz.com/edit/nuxt-starter-komfsx?file=app.vue so you can compare the two animations.

Hey, Is there a way to add an ease for the whole splitText stagger animation without applying the ease for the individual characters inside a gsap.to()? If I add ease: "Power3.easeInOut" inside the gsap.to({}) object it adds the ease to the characters individually but I would need the whole stagger animation to follow the bezier curve. Is this possible to do with GSAP? gsap.to(splitText.chars, { scale: 1, opacity: 1, duration: .3, ease: 'Power3.easeInOut' // This adds the ease to individual characters which I don't want stagger: { amount: 1.3, from: 'end', } })

Yes, but that's not the problem. You have to be in the full screen mode in sandbox to see the cursor + refresh few times to see the bigger cursor appear if it did't already. The problem is that if you navigate to Example and then back to Home page the cursor won't scale anymore when hovering on the button for some reason BUT if I take the page transition off from nuxt.config.js then the cursor works just how it should.

Hi, you have to refresh few time for it to work + you have to be in the full screen mode in sandbox!

Hello, I added a sandbox of the problem to the question now!

I'm building a nuxt site with a gsap custom cursor and gsap page transitions. My problem is that the custom cursor won't work after page has transitioned but without the page transition the cursor works perfectly. So what I'm trying now is to call the cursor init method after enter() function in nuxt.config.js. I tried to setTimeout for 500ms, it seems to work after 500ms but not sometimes + the user experience gets bad because the cursor lags for a half second and then starts working. My second approach was to toggle a boolean in nuxt store and and then run the init function inside the customCursor.vue component but it seems it is not possible to get access to vuex store from nuxt.config.js file. So now I'm a bit stuck and can't figure out how to init this cursor after the enter() has run (or is that even the problem) I'll appreciate any help a lot, thank you in advance! (sorry for my english) Here's the sandbox of the problem: https://codesandbox.io/s/lucid-cookies-yvr2z?file=/nuxt.config.js