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