Spinning effect in default Create-react-app

[TipicultBiomassa]

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>
);

[jscottsmith]

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.

[TipicultBiomassa]

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

[TipicultBiomassa]

It's super strange but looks like it's not working on JS create react app template but it works with typescript template.

[TipicultBiomassa]

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?

[jscottsmith]

If you're switching to Javascript you need to remove the types in the code: useParallax<HTMLDivElement>() should be just useParallax()

[TipicultBiomassa]

If you're switching to Javascript you need to remove the types in the code: useParallax<HTMLDivElement>() should be just useParallax()

Sorry. It was so obvious but there were no highligting or anything

[jscottsmith]

No worries