Apliqué un efecto de transición simple con el complemento "Robin Dela Hover Effect". Aunque solo funciona bien con TweenMax y ThreeJS cdns, si agrego el GSAP cdn, la animación se convierte en un error. Cuando desliza el mouse sobre la imagen de izquierda a derecha, muestra la otra imagen unos segundos después sin ingresar a la animación. Necesito usar GSAP para diferentes aplicaciones. No puedo levantar esto. Os dejo el enlace y los códigos para que entendáis mejor el problema.
Saludos.
Haga clic para ir a la página de prueba
var hoverDistort = new hoverEffect({ parent: document.querySelector('.wrapper'), intensity: 0.5, image1: 'https://test.culturebandit.com/bug/1.jpg', image2: 'https://test.culturebandit.com/bug/2.jpg', displacementImage: 'https://test.culturebandit.com/bug/8.jpg' }); html, body { margin: 0%; padding: 0%; width: 100%; height: 100vh; background: #161616; } .wrapper { width: 800px; height: 600px; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js" integrity="sha512-894YE6QWD5I59HgZOGReFYm4dnWc1Qt5NtvYSaNcOP+u1T9qYdvdihz0PPSiiqn/+/3e7Jo4EaG7TubfWGUrMQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.8.0/gsap.min.js" integrity="sha512-eP6ippJojIKXKO8EPLtsUMS+/sAGHGo1UN/38swqZa1ypfcD4I0V/ac5G3VzaHfDaklFmQLEs51lhkkVaqg60Q==" crossorigin="anonymous" referrerpolicy="no-referrer"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/109/three.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/2.1.3/TweenMax.min.js"></script> <script src="https://tympanus.net/Development/DistortionHoverEffect/js/hover.js"></script> <div class="wrapper"></div>Estaba pensando que podría haber una anomalía en los tiempos de entrada y salida, arreglé los valores de aceleración de entrada y salida de la animación de transición y resolví el problema. A continuación puede ver qué comandos he agregado a mis líneas JS. No sé cómo adaptar los comandos en el núcleo anterior a la nueva versión, tal vez esta sea la solución principal, pero lo que implementé funciona bien.
Saludos.
var hoverDistort = new hoverEffect({ parent: document.querySelector('.wrapper'), intensity: 0.5, image1: 'https://test.culturebandit.com/bug/1.jpg', image2: 'https://test.culturebandit.com/bug/2.jpg', displacementImage: 'https://test.culturebandit.com/bug/8.jpg', speedIn: 1.5, speedOut: 1.5, hover: true, easing: Expo.easeOut, });