Image hover animation bug on Robin Dela Hover Effect with GSAP CDN

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.

Click to go test page

            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>

Answer

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,
});