引入GSAP CDN后Robin Dela图片悬停动效异常问题咨询

根因分析 #

你同时加载了两个不同版本的GSAP库：3.8.0版本的核心GSAP库、2.1.3版本的TweenMax库，两个版本的全局API互相覆盖，导致Robin Dela Hover Effect插件调用的动画时序参数出现兼容问题，最终表现为动画延迟、过渡效果丢失。

解决方案 #

直接移除单独引入的2.1.3版本TweenMax即可，GSAP 3.x版本已经完全内置了旧版TweenMax的所有API，兼容旧插件的调用逻辑，完全可以满足hover插件的运行需求，同时不会影响你业务代码对GSAP 3.x的使用。

修改后正确的资源引入代码 #

<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>
<!-- 仅保留GSAP 3.x核心库即可，不需要额外引入旧版TweenMax -->
<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://tympanus.net/Development/DistortionHoverEffect/js/hover.js"></script>
<div class="wrapper"></div>

其他的JS初始化逻辑和CSS代码不需要做任何修改，修改后动效即可正常运行。

备选方案（必须保留双版本时使用） #

如果你的业务场景必须同时保留两个版本的GSAP，可以在旧版TweenMax加载完成后调用TweenMax.noConflict()方法，将旧版TweenMax的实例赋值给单独变量，再修改hover插件的源码替换内部调用的TweenMax为你定义的单独变量即可避免冲突。

内容的提问来源于stack exchange，提问作者4r60_