1000ms/60fps = 16.7ms per frame

let myBox = document.querySelector('.my-box');

if (myBox) {
  myBox.classList.add('my-special-box')
}

.element {
     opacity: 1;
     transition: .3s;
}
 .element.closed {
     opacity: 0;
     pointer-events: none;
}

.box { will-change: auto;}

useEffect(() => {
    const intervalId = setInterval(() => {
      if (circleRef.current) {
        position += speed * direction;

        if (position >= distance || position <= 0) {
          direction *= -1;
        }

        circleRef.current.style.transform = `translateX(${position}px)`;

        // Additional work to make the setInterval animation more intensive
        for (let i = 0; i < 10000000; i++) {}
      }
    }, 16); // Roughly 60fps

    return () => clearInterval(intervalId);
  }, []);

useEffect(() => {
    const animate = () => {
      if (circleRef.current) {
        position += speed * direction;

        if (position >= distance || position <= 0) {
          direction *= -1;
        }

        circleRef.current.style.transform = `translateX(${position}px)`;

        // Additional work to make the animation more intensive
        for (let i = 0; i < 10000000; i++) {}

        requestAnimationFrame(animate);
      }
    };

    requestAnimationFrame(animate);

    return () => cancelAnimationFrame(animate);
  }, []);

useEffect(() => {
    const circle = circleRef.current;
    if (circle) {
      circle.animate(
        [{ transform: "translateX(0)" }, { transform: "translateX(200px)" }],
        {
          duration: 2000,
          iterations: Infinity,
          direction: "alternate",
        }
      );
    }
  }, []);

.circle {
  width: 50px;
  height: 50px;
  background-color: blue;
  border-radius: 50%;
  position: relative;
  animation: moveCircle 2s infinite alternate;
}

@keyframes moveCircle {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(200px);
  }
}

import React from 'react';
import { motion } from 'framer-motion';

const CircleAnimationFramerMotion = () => {
  return (
    <div style={{ display: 'flex', justifyContent: 'center', alignItems: 'center', height: '100vh' }}>
      <motion.div
        animate={{ x: [0, 200, 0] }}
        transition={{ duration: 2, repeat: Infinity, repeatType: 'reverse' }}
        style={{
          width: '50px',
          height: '50px',
          backgroundColor: 'red',
          borderRadius: '50%',
        }}
      ></motion.div>
    </div>
  );
};

export default CircleAnimationFramerMotion;

useEffect(() => {
    const observer = new IntersectionObserver(
      (entries) => {
        entries.forEach((entry) => {
          setIsIntersecting(entry.isIntersecting);
        });
      },
      { threshold: 0.1 } // Adjust the threshold as needed
    );

    if (circleRef.current) {
      observer.observe(circleRef.current);
    }

    return () => {
      if (circleRef.current) {
        observer.unobserve(circleRef.current);
      }
    };
  }, []);

items.forEach((item) => {
  item.style.transform =
    "translateY(" + container.getBoundingClientRect().height + "px)";
});

 // VS

const containerHeight = container.getBoundingClientRect().height + "px";
items.forEach((item) => {
  item.style.transform = "translateY(" + containerHeight + "px)";

const throttleTime = 100;
function onScroll(event) {
  if (Date.now() > prevTime + throttleTime) {
    callback();
  }
}

window.addEventListener("scroll", onScroll);