Necesito ayuda con la animación de agitación en mi imagen. La idea es que me gustaría alternar la animación de agitación solo si la imagen completa se vuelve visible en la página. Intento hacerlo en el código a continuación, pero no funciona, estoy usando el paquete de remodelación y, de hecho, la animación ocurre solo si se pasa el mouse sobre él.

aplicación:

 import React, { useState} from "react"; import { ShakeRotate } from "reshake"; const App = () => { const [shake, setShake] = useState(false); const toggleShake = () => { if (window.scrollY >= 30) { setShake(true); } else { setShake(false); } }; window.addEventListener("scroll", toggleShake); return ( <div className="app"> <ShakeRotate className={shake && "sc-furwcr fZevBE mobile_png"} h={15}> <img src="/images/mobile.png" className="mobile" alt="mobile" /> </ShakeRotate> </div

aplicación.css:

 .app { position: absolute; top: 21%; left: 80%; transform: translate(-50%, -50%); } .mobile { height: 350px; width: 200px; }