Hi all,
I'm working on my new website and I'm very new to GSAP, so I 'borrowed' a very nice letter animation: codepen.io/lucasvallenet/pen/rGpmXN
In the JS the ease trows up a conflict with my offcanvas handled by Foundation.
Is there another way I can handle the transition in the code below so I can avoid the conflict? Any other ideas?
On a side note, all works fine on my local server. On production the two just don't work together.
Any help is much appreciated.
const tl = gsap.timeline({
onComplete: () => tl.restart()
});
const $logo = document.getElementById('logo')
const duration = .6
const ease = 'expo.out'
tl
.to($logo, { morphSVG: "#f", duration, ease }, '+=2')
.to($logo, { morphSVG: "#u", duration, ease })
.to($logo, { morphSVG: "#l", duration, ease })
.to($logo, { morphSVG: "#lr", duration, ease })
.to($logo, { morphSVG: "#s", duration, ease })
.to($logo, { morphSVG: "#t", duration, ease })
.to($logo, { morphSVG: "#o", duration, ease })
.to($logo, { morphSVG: "#r", duration, ease })
.to($logo, { morphSVG: "#y", duration, ease })
.to($logo, { morphSVG: "#logo", duration, ease })
