Framer Motion - fade out element according to scroll position - reactjs

Question

Using framer motion, I am trying to fade in an object when it enters the viewport. Then I would like it to stay fixed for a while and eventually fade out.
So far I have only managed to fade the element in and fade it out when it leaves the viewport, which is too late. I was not able to figure out how to fix the element at a certain scroll position.
Here is what I have achieved:
This is what I am trying to achieve:
This is the Code Sandbox: https://codesandbox.io/s/vigorous-dawn-q4figi?file=/src/App.js
Here is the code:
export default function App() {
const [ref, inView] = useInView({
threshold: 0.5,
triggerOnce: false
});
const variants = {
visible: { opacity: 1, scale: 1, y: 0 },
hidden: {
opacity: 0,
scale: 0.65,
y: 50
}
};
return (
<div className="App">
<div style={{ height: 500 }} />
<motion.div
animate={inView ? "visible" : "hidden"}
variants={variants}
exit="hidden"
transition={{ duration: 2, ease: "easeOut" }}
className="box"
ref={ref}
/>
</div>
);
}
I would be very thankful for any kind of help!

Answer 1

You're almost there, just a couple of tweaks - mostly CSS for how you should position your animated element.
body {
margin: 0;
}
.App {
height: 300vh;
display: flex;
justify-content: center;
align-items: center;
background-color: #3b6fe0;
}
.box {
width: 200px;
height: 200px;
background-color: #fff;
border-radius: 20px;
}
Here's a full demo: https://codesandbox.io/s/flamboyant-sara-ce4pvx?file=/src/App.js
Note: it's a bit buggy to combine the useInView hook with the scale animation, as scaling the element will affect the in-view threshold. You could also consider use-scroll as an alternative, it may be harder to implement but provide more control over the animation.