Best way to scroll article out of view and hide it - reactjs

Question

I'm building an article view where you can navigate to the next article by clicking a link in the bottom of the current one. This will trigger the new article being loaded under the current one, the current one will be faded out and then I animate the height of the current article to zero, so you end up with a page transition where the new article is now at the top of the screen.
My problem now is that it will try to maintain my scroll position, so depending on how far I've scrolled, I will start from a different position in the new article. I would like to start from the top. Do I need to use javascript to animate a scroll to the top at the same time or is there an easier way to achieve this?
So far I've added this CSS:
section {
transition: opacity 1s, max-height 1s;
opacity: 1;
max-height: 10000px;
}
.hidden {
opacity: 0;
max-height: 0;
}
Here is a Code Sandbox where you can see the problem in practice.
Adding the .hidden class will trigger content fading out and collapsing. The max-height property is not hardware accelerated, though and the procedure about setting an initial max-height that is always higher than page contents (which I might not know) seems awkward and hacky, though.
Is there a more obvious way to achieve this and always end up being scrolled to the top of the 2nd section when the first one is hidden?

Answer 1

You can use conditional rendering (your animation is lost but u can fix that with framer-motion):
import React, { useState } from "react";
import { motion, AnimatePresence, useAnimation } from "framer-motion";
import "./styles.css";
export default function App() {
const [hideSection, setHideSection] = useState(false);
const controls = useAnimation();
const handleClick = () => {
if (hideSection) {
controls.start({
y: [-1400, 0]
});
} else {
controls.start({
y: [1400, 0]
});
}
setHideSection(!hideSection);
};
return (
<motion.div animate={controls}>
<AnimatePresence>
{!hideSection && (
<motion.section
key="First section"
exit={{ opacity: -1 }}
transition={{ default: { duration: 1, delay: 0 } }}
>
First section
</motion.section>
)}
</AnimatePresence>
<motion.section>
Second section{" "}
<button onClick={handleClick}>Toggle first section</button>
</motion.section>
</motion.div>
);
}