[DrawSVG error on SPA]

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

[ScrollSmoother with ScrollTrigger and infinite scroll]

Hello,

 

Thank you for your great work and the release of the 3.10 with the new ScrollSmoother.

 

I'm trying it out on a new projet and I'd like to achieve an infinite scroll that contains scrollTriggers.

I made a simple demo trying to make an infinite scroll. It kind of works on scroll down (i couldn't make it work on scroll up) but I have couple of problems :

• I can only access the progress within the self element, is there a way to get the Y position so that I can precisely scroll to the repeated section ? I am currently comparing the progress for sections of the same size, but I'm going to have different section sizes and pinning an element will also create issues
• I think the best way would be to compare the scroll position in pixel with the windowHeight to easily detect when we are at the top/bottom of the page
• Can I disable the smooth scroll end when arriving to the bottom of the page so it feels flowless ?
• Are the scrollTriggers going to work seemlessly ?

 

Thank you in advance !

 

Lucas

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