I applied a simple transition effect with the "Robin Dela Hover Effect" plugin. Although it only works fine with TweenMax and ThreeJS cdns, if I add the GSAP cdn the animation turns into an error. When you swipe the mouse over the picture from left to right, it displays the other picture a few seconds after without entering the animation. I need to use GSAP for different applications. I can't lift this. I leave the link and codes for you to better understand the problem.
Best Regards.
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>I was thinking that there might be an anomaly in the input and output times, I fixed the input and output easing values of the transition animation and solved the problem. Below you can see what commands i have added to my JS lines. I don't know how to adapt the commands in the old core to the new version maybe this is the main solution but what I implemented works just fine.
Best Regards.
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,
});