Jeroen Reumkens PRO
Preview
import { useAnimate, useInView } from "motion/react";
import { useEffect, useRef } from "react";
export const App = () => {
return (
<div className="px-8">
<p className="text-white text-center pt-8 pb-[100vh]">Scroll down and see the logo animate in</p>
<Card title="Hello" />
</div>
);
};
const Card = ({ title }) => {
const [scope, animate] = useAnimate();
const inViewRef = useRef(null);
const isInView = useInView(inViewRef);
const controlsRef = useRef(null);
useEffect(() => {
controlsRef.current = animate([
[scope.current, { opacity: 1 }],
], {autoplay: false});
}, []);
useEffect(() => {
if (!controlsRef.current) return;
controlsRef.current.speed = isInView ? 1 : -1;
controlsRef.current.play();
}, [isInView])
return (
<>
<section className="h-[20vh] bg-gray-100 mb-8 p-6" ref={inViewRef}>
When this block is in view, the aside should fade in
<aside
ref={scope}
className="fixed top-0 left-0 bar text-black bg-white rounded-2xl px-6 py-12 opacity-0">
<p>{title}</p>
</aside>
</section>
</>
);
}