By default I use the animation for the 3d scene, it creates a “levitation” for the object. Every time you hover over an object, it should pause, but the pause only occurs immediately after the animation starts. I understand it has to do with onComplete. How to stop animation every time?
function tweenProperty(target, x, propX, y, propY, z, propZ) {
const randomDur = gsap.utils.random(0.5, 2, true)
const randomDelay = gsap.utils.random(0, 1, true)
const animate = gsap.to(target, {
[x]: gsap.utils.random(propX * -1, propX),
[y]: gsap.utils.random(propY * -1, propY),
duration: randomDur(),
delay: randomDelay(),
ease: 'sine.inOut',
onComplete: tweenProperty,
onCompleteParams: [target, x, propX, y, propY, z, propZ],
})
return animate
}
const obj = document.querySelector('.obj')
const scenePosAimate = tweenProperty(obj, 'x', 30, 'y', 30)
window.addEventListener('mousemove', (e) => {
if (e.target.tagName.toLowerCase() === 'div') {
scenePosAimate.pause()
} else{
scenePosAimate.play()
}
})
.obj{
width: 50px;
height: 50px;
background: #000;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.11.3/gsap.min.js"></script>
<div class="obj"></div>