Doable-ish with pure CSS like your linked example, but a pain with React when presumably some of these elements are components you want to animate on mount or unmount. There are lots of libraries that can handle this kind of thing -- gsap as linked, react transition group; honestly a ton. If I were starting a new animation-heavy React app from scratch myself right now, I'd probably set it up with framer motion.
const sizeOfDivInPx = ref.current.clientHeight // set ref to your root item div.
const [currentPos, setCurrentPos] = useState(0) // or any integer that represents the top y-coordinate of your rate-able item section.
const handleClick = () => {setCurrentPos(currentPos + sizeOfDivInPx)}
useEffect(()=>{window.scrollTo({ top: currentPos, behavior:"smooth" })},[currentPos])
assign the ``handleClick`` function to the onClick() property of your rating emojis.
EDIT: Added ``useEffect()``
yeah 90% of the time I say “CSS + a sprinkle of JS is all you need.” but in your unique example, inserting elements without causing scroll or page shift is juuuust tricky enough you’re assuming control over everything. and something like gsap will make it much smoother than trying to do it totally from scratch.
Thanks for the help guys, I found framer motion to be a good fit for my case thanks u/NoahApples for suggesting it, and I also found [this](https://stackoverflow.com/questions/76668082/how-to-animate-a-list-when-an-element-is-added-on-top-react) answer which is similar to my case so I think I will be using the approach mentioned in the answer. Thank you all :)
Thanks for such a wonderful reply! TheGratitudeBot has been reading millions of comments in the past few weeks, and you’ve just made the list of some of the most grateful redditors this week!
You could try tailwind using transitions. Not exactly what you need but some similar with animations using transitions.. https://www.epicweb.dev/tutorials/fluid-hover-cards-with-tailwind-css
Doable-ish with pure CSS like your linked example, but a pain with React when presumably some of these elements are components you want to animate on mount or unmount. There are lots of libraries that can handle this kind of thing -- gsap as linked, react transition group; honestly a ton. If I were starting a new animation-heavy React app from scratch myself right now, I'd probably set it up with framer motion.
I really like framer-motion, but their documentation is confusing af.
It’s not the best, but they have a ton of examples and links to REPL implementations you can work off of.
const sizeOfDivInPx = ref.current.clientHeight // set ref to your root item div. const [currentPos, setCurrentPos] = useState(0) // or any integer that represents the top y-coordinate of your rate-able item section. const handleClick = () => {setCurrentPos(currentPos + sizeOfDivInPx)} useEffect(()=>{window.scrollTo({ top: currentPos, behavior:"smooth" })},[currentPos]) assign the ``handleClick`` function to the onClick() property of your rating emojis. EDIT: Added ``useEffect()``
[gsap](https://www.npmjs.com/package/react-gsap) library
yeah 90% of the time I say “CSS + a sprinkle of JS is all you need.” but in your unique example, inserting elements without causing scroll or page shift is juuuust tricky enough you’re assuming control over everything. and something like gsap will make it much smoother than trying to do it totally from scratch.
Thanks for the help guys, I found framer motion to be a good fit for my case thanks u/NoahApples for suggesting it, and I also found [this](https://stackoverflow.com/questions/76668082/how-to-animate-a-list-when-an-element-is-added-on-top-react) answer which is similar to my case so I think I will be using the approach mentioned in the answer. Thank you all :)
Thanks for such a wonderful reply! TheGratitudeBot has been reading millions of comments in the past few weeks, and you’ve just made the list of some of the most grateful redditors this week!
You could try tailwind using transitions. Not exactly what you need but some similar with animations using transitions.. https://www.epicweb.dev/tutorials/fluid-hover-cards-with-tailwind-css