Spinning effect in default Create-react-app
TipicultBiomassa opened this issue ยท comments
Support
I was trying to copy spinning example and i succeded using Astro but when i copy competely the same code in my default react app created using create-react-app it doesn't spin. Element doesn't have transorm style but in astro it's fine. I don't get it
`
import React from "react";
import cx from "classnames";
import { ParallaxProvider, useParallax } from "react-scroll-parallax";
const shared = "absolute bg-blue-100 border-2 border-blue-500 border-solid rounded-lg h-14 w-14 flex items-center justify-center";
export default function App() {
const parallax = useParallax<HTMLDivElement>({
rotate: [0, 360],
shouldAlwaysCompleteAnimation: true
});
return (
<div style={{height:'3000px'}}>
<div
ref={parallax.ref}
className="relative border-4 border-red-200 border-solid h-48 md:h-96 w-48 md:w-96 rounded-full flex items-center justify-center text-4xl"
>
๐ตโ๐ซ
<div
className={cx(
shared,
"top-0 left-1/2 -translate-y-1/2 -translate-x-1/2"
)}
>
๐
</div>
<div
className={cx(
shared,
"right-0 top-1/2 -translate-y-1/2 translate-x-1/2"
)}
>
๐คก
</div>
<div
className={cx(
shared,
"bottom-0 left-1/2 translate-y-1/2 -translate-x-1/2"
)}
>
๐ฐ
</div>
<div
className={cx(
shared,
"top-1/2 left-0 -translate-y-1/2 -translate-x-1/2"
)}
>
๐๐ป
</div>
</div>
</div>
);
}`
index:
import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';
import { ParallaxProvider } from 'react-scroll-parallax';
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
<ParallaxProvider>
<App />
</ParallaxProvider>
);
The example code you are copying uses Tailwind styling and I doubt things will work properly without it.
I don't know what Astro is.
Do you have a live link? I'll need to see this site in order to provide any more help.
The example code you are copying uses Tailwind styling and I doubt things will work properly without it.
I don't know what Astro is.
Do you have a live link? I'll need to see this site in order to provide any more help.
I know. Tailwind is added. Here is a proof that it will work without tailwind. https://codesandbox.io/s/rbeqjp?file=/src/App.tsx:465-483
Astro is static generator like NextJS or Gatsby. I think ref (ref={parallax.ref}) for my div is not working. My div doesn't have transform
It's super strange but looks like it's not working on JS create react app template but it works with typescript template.
Yeah. here it is
It's not working but if you change both file ext to tsx insead of jsx and then relead a page - it will work. Why?
If you're switching to Javascript you need to remove the types in the code: useParallax<HTMLDivElement>()
should be just useParallax()
If you're switching to Javascript you need to remove the types in the code:
useParallax<HTMLDivElement>()
should be justuseParallax()
Sorry. It was so obvious but there were no highligting or anything
No worries