How to implement the following in the react js way - reactjs

Question

enter image description here
Hi I am trying to change an image onWheel event and so far the code works in a bad way, can anyone suggest ways to improve. I am trying to recreate the zoom out/in effect as seen on the mrpops.ua/en website. When the wheel event triggers the count increases or decrease on direction. Is there maybe a way to use the number count to do some fancy math instead of using it to change animation name.

Answer 1

Edit
If as you say in the comments you have 6 different animations, one way of implementing that would be:
const Contact = () => {
const [count, setCount] = useState(0)
/* Code for updating the counter */
const handleWheel = ({ deltaY }) => {
setCount((currentCount) =>
deltaY > 0 ? currentCount + 1 : currentCount - 1
);
};
useEffect(() => {
console.log(count);
}, [count]);
// I suggest to place all the possible animations in an object, and then retrieve them with object[1], etc. You could also use switch, but this option is cleaner IMO.
const style = {
1: "animation 1"
2: "animation 2"
...
6: "animation 6"
}
return (
<header onWheel={handleWheel}>
<img className="header-img" style={{animation: style[count]}}>
</img>
</header>
)}
Original answer
I'll suggest the following to "translate" the screenshot code into actual React code:
const Contact = ({ counter }) => (
<header>
<img className="header-img" style={{animation: counter === 1 ? "scaleUp 2s ease forwards" : "scaleUp2 2s ease forwards"}}>
</img>
</header>
)
Mind that with React you access style as an object, this is why I'm using {} first to let React know I'll insert JS in HTML, and second because it's a object like: {animation: ""}
Another option, without editing the node style directly, is with conditional rendering. Personally, I prefer this one more:
const Contact = ({ counter }) => (
<header>
// We use classes with BEM to apply the specific animations
{counter === 1 && <img className="header-img header-img--one"></img>}
{counter === 2 && <img className="header-img header-img--two"></img>}
</header>
)
About the wheel effect, since you are using a console.logs I'm not sure how do you intend to implement that. However, I'll share a SO link that might help you with that:
Mouse wheel events in Reactjs
It is preferable to do as suggested in this post (use onWheel or onScroll) rather than inserting event listeners directly.
The same way, it is also preferable to completely avoid query selectors and any other way of imperative coding (if you are unfamiliar with the terms, Google differences between imperative and declarative programming).