KhaledOghli
Content Type
Profiles
Forums
Store
Blog
Product
Showcase
FAQ
Downloads
Posts posted by KhaledOghli
-
-
https://stackblitz.com/edit/nuxt-starter-bthjlg?file=README.md
Bug: When I changed the URL quickly in the navigation header ( click many times fast )
I checked the reach Next.js version, and there is no bug.
-
8 hours ago, GreenSock said:
ScrollSmoother typically needs its wrapper element at the root (inside <body>), but it looks like you've got it tucked inside of another element with an id of __nuxt. So when ScrollSmoother's wrapper element is set to position: fixed, it takes it out of the document flow, thus your __nuxt element gets a height of 0.
Try defining your wrapper as that __nuxt element:
wrapper: "#__nuxt",
Oh, Thank you so much for the explanation and help. its work.
-
6 hours ago, KhaledOghli said:
Thanks , the main problem from the #smooth-content
when i put height like 4000px it's work but when i put 100%
it's not so how can i do it !?
ofcourse all my content not absolute .
somthing like this ! https://stackblitz.com/edit/nuxt-starter-gz2tkz?file=README.md
if anyone figure out what the problem is ?
-
Thanks , the main problem from the #smooth-content
when i put height like 4000px it's work but when i put 100%
it's not so how can i do it !?
ofcourse all my content not absolute .
-
On 9/29/2022 at 12:27 PM, BenjaminO said:
Hello @thei ! My code is a bit complex because it suits my needs but you don’t need that complexity. If your on nuxt 3, basically initialize the ScrollSmoother instance onberforemount or onmounted in your app.vue then just call a scrolltrigger refresh right after the page changed. You can lock the scroll with pause() method when your transitioning from a page to another.
I assume the logic will stay the same on nuxt 2. In addition there is a module named nuxt-gsap-module from Ivo Dolenc that you can use for Nuxt 2. Maybe you can handle things a bit differently with this tool.
Every thing work well but i have only one issue .
the issue with NuxtLayout.
<div id="smoother-wrapper" ref="smoother__wrapper"><div id="smoother-content" ref="smoother__content"><div class="app_container"><NuxtLayout><NuxtPage:transition="{name: 'my',mode: 'out-in',onBeforeEnter}"/></NuxtLayout></div></div></div>,when i put without nuxtlayout it's work .<div id="smoother-wrapper" ref="smoother__wrapper"><div id="smoother-content" ref="smoother__content"><div class="app_container"><NuxtPage:transition="{name: 'my',mode: 'out-in',onBeforeEnter}"/></div></div></div>so how should we make it in top of NuxtLayout !
Nuxt 3 with Gsap Page Transition Example Bug
in GSAP
Posted
Yeah, I think there is a bug in Vue Route with Transition Leave or some state.
I just found a workaround to use onBeforeLeave.
https://stackblitz.com/edit/nuxt-starter-ojthhx?file=helpers%2FtransitionConfig.js
I hope the Vue Team Solve this.