Hi, I'm trying to make a magnetic hover composable in Vue3, GSAP and I wanted to replicate from this Link 2 Ways to Make a Magnetic Buttons using React, GSAP, Framer Motion (olivierlarose.com) . I'm needing help how to convert it with typscript too.
Here is what I have so far :
import { ref, watchEffect } from 'vue'
import gsap from 'gsap'
export function MagneticHover({ children:any }) {
const magnetic = ref(null)
watchEffect(() => {
const xTo = gsap.quickTo(magnetic.value.current, 'x', {
duration: 1,
ease: 'elastic.out(1, 0.3)'
})
const yTo = gsap.quickTo(magnetic.value.current, 'y', {
duration: 1,
ease: 'elastic.out(1, 0.3)'
})
magnetic.value.current.addEventListener('mousemove', (e) => {
const { clientX, clientY } = e
const { height, width, left, top } = magnetic.value.current.getBoundingClientRect()
const x = clientX - (left + width / 2)
const y = clientY - (top + height / 2)
xTo(x)
yTo(y)
})
magnetic.value.current.addEventListener('mouseleave', (e) => {
xTo(0)
yTo(0)
})
})
return () => {
return children({ ref: magnetic })
}
}