[Javascript conflict transition vs offcanvas transition]

Awesome stuff, works very nicely! Hope to learn more of this  

Thank you very much!

[Javascript conflict transition vs offcanvas transition]

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 })

 

See the Pen rGpmXN by lucasvallenet (@lucasvallenet) on CodePen