PsychoBunny
Content Type
Profiles
Forums
Store
Blog
Product
Showcase
FAQ
Downloads
Posts posted by PsychoBunny
-
-
Hello, Im just trying to get ScrollSmoother working on astro web, with new astro view transition Api.
During the first page load, everything work as expected. But when Im transitioning to another page, the scrollSmoother stops working.It looks like during the initialisation of ScrollSmoother, it doesnt inject styles into the <body> tag, so there is scrollbar missing and users cant scroll the page.
I also tried to set the styles manually loke this:
useEffect(() => { const wrapperHeight = document.getElementById("smooth-content")?.offsetHeight; const smoother = ScrollSmoother.create({ smooth: 0.4, effects: true, }); if (document) { document.body.style.height = `${wrapperHeight}px`; document.body.style.overscrollBehavior = "none"; document.body.style.scrollBehavior = "auto"; } return () => { smoother.kill(); if (document) { document.body.style.height = ""; document.body.style.overscrollBehavior = ""; document.body.style.scrollBehavior = ""; } }; }, []);
But unfortunatelly, the height is calculated wrong ( shorter than it should be ), and the ScrollSmoother is flickering ( somewhere about the half of the page, it jumps to the top of the page ).
I've also tried to initialize and kill ScrollSmoother in Astro lifecycle hooks, in React component, and even in Vue components.
Without view transitions, everything works as expected.Thanks for answer.
Integration Issue with GSAP's ScrollSmoother and Astro's New View Transition API
in GSAP
Posted
Hey Rodrigo,
thanks for quick answer!
Yeah, this is also my first time trying out astro, but i really liked its performance and a new view transitions feature.
I know, i tried to use useGSAP hook also, but i guess it should work even in useEffect. I dont think the problem here is React.
I created a minimal demo, just with astro components, without react.
You can see, that after first render of the app, scrollSmoother is working well.
after transition to another page, scroll smoother breaks ( you can check that there are no inline styles in body ).
When you instantiate ScrollSmoother outside of the lifecycle function, after transition use is able to scroll, but without scrollSmoother effect.
Link to demo: https://stackblitz.com/edit/github-2hpcon-axifnq?file=src%2Fcomponents%2FLayout.astro,src%2Fpages%2Fabout.astro,src%2Fpages%2Findex.astro,package.json
Thanks for your time!