PsychoBunny
PsychoBunny's Achievements
-
Rare
-
Rare
-
Rare
-
-
Recent Badges
0
Reputation
-
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!
-
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.