使用 GSAP CDN 的 Robin Dela 悬停效果上的图像悬停动画错误

Question

我使用“Robin Dela Hover Effect”插件应用了一个简单的过渡效果。虽然它只适用于 TweenMax 和 ThreeJS cdns，但如果我添加 GSAP cdn，动画就会变成错误。当你在图片上从左向右滑动鼠标时，它会在几秒钟后显示另一张图片，而不会进入动画。我需要将 GSAP 用于不同的应用程序。我举不起这个。我留下 link 和代码，以便您更好地理解问题。

此致。

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 1

我在想可能是输入和输出时间有异常，我修复了过渡动画的输入和输出缓动值，解决了问题。您可以在下面看到我添加到我的 JS 行中的命令。我不知道如何使旧核心中的命令适应新版本，也许这是主要解决方案，但我实现的效果很好。

此致。

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

使用 GSAP CDN 的 Robin Dela 悬停效果上的图像悬停动画错误

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

html

javascript

css

gsap