Hello,
I'm having an issue with DrawSVG on Firefox in a Nuxt app.
This error keeps looping: Uncaught TypeError: y is null
Everything works fine during the development, the errors appears on build, in Firefox and in SPA when coming from another page.
The code is pretty simple :
<template>
<div class="c-c2-shapes">
<div v-for="(icon, i) in icons" :key="`c2-shapes-icon-${i}`" class="c-c2-shapes_shape">
<component :is="icon" />
</div>
</div>
</template>
<script>
import Vue from 'vue'
import { gsap } from 'gsap'
import Hole from '~/assets/experience/shapes/hole.svg?inline'
import Base from '~/assets/experience/shapes/base.svg?inline'
import Square from '~/assets/experience/shapes/square.svg?inline'
import Ring from '~/assets/experience/shapes/ring.svg?inline'
export default Vue.extend({
name: 'VC2Shapes',
components: {
Hole,
Base,
Square,
Ring,
},
data: () => ({
icons: [
Hole,
Base,
Square,
Ring,
Ring,
],
animationArray: [],
}),
mounted() {
const $paths = this.$el.querySelectorAll('path')
for (const $path of $paths) {
this.animationArray.push(
gsap.fromTo(
$path,
{
drawSVG: '0%',
// Tested drawSVG: 0
},
{
drawSVG: '100%',
ease: 'none',
// scrollTrigger: {
// trigger: $path,
// endTrigger: this.$el,
// start: 'top+=5% bottom',
// end: 'top top',
// scrub: 1,
// },
}
)
)
}
},
beforeDestroy() {
for (const a of this.animationArray) {
a.kill()
}
},
})
</script>
It is supposed to play on scroll, but I commented this part because it is not the source of the problem.
It might be a Nuxt issue, but I wanted to ask just in case.
Thank you very much !
Lucas
