css scroll animation:
Unanswered
West African Lion posted this in #help-forum
West African LionOP
im using css scroll based animation, i understand it isnt widely supported but would like to add it for those browsers that do support it (and those that eventually will)
however as it stands, the css is removed/ transformed removing the required css for scroll based animation to work
question:
how do i stop nextjs or postcss etc from mutating the css?
(i am importing the css script inside my page.tsx file then using the
however as it stands, the css is removed/ transformed removing the required css for scroll based animation to work
question:
how do i stop nextjs or postcss etc from mutating the css?
(i am importing the css script inside my page.tsx file then using the
className)6 Replies
@West African Lion im using css scroll based animation, i understand it isnt widely supported but would like to add it for those browsers that do support it (and those that eventually will)
however as it stands, the css is removed/ transformed removing the required css for scroll based animation to work
question:
how do i stop nextjs or postcss etc from mutating the css?
(i am importing the css script inside my page.tsx file then using the `className`)
If you import a css file to a page.tsx, it will only be applied for that page. When you navigate away the css will be gone.
If you don’t want the css to be gone, the css file needs to be imported to a layout.tsx that both the original page and the destination page are under.
If you don’t want the css to be gone, the css file needs to be imported to a layout.tsx that both the original page and the destination page are under.
@joulev If you import a css file to a page.tsx, it will only be applied for that page. When you navigate away the css will be gone.
If you don’t want the css to be gone, the css file needs to be imported to a layout.tsx that both the original page and the destination page are under.
West African LionOP
this doesnt seem to be the issue, i can see the css being applied for the 2 other css properties on the class, just the two related to css scroll transform are being mutated by the pre-processor (i dont think it sees them as valid css properties yet and thus purges them)
West African LionOP
as seen here, the css for navbar is applied, but has been changed from the original hence why its showing as an error
in vsc:
if i change it using inspect element to the same as my src code, it works as expected:
could you make a minimal reproduction repository? i still don't get the full picture here so dunno what is wrong