GSAP gsap.to animation is starting to early on initial Page Load with Svelte, only after Route change it works correctly

[julianlbch]

Dear Members,

i currently try to get gsap to work with svelte, i ensure that the Page is completely loaded before the Animation is initialized but if i initially load the Page, the Animations starts too early on the Scroll Track. If i change the Route and then change it back everything works perfectly. I also ensured that in both cases all other Components / Images etc. are loaded completely. Does anyone may had the same issue?

Thanks in advance!

 

Here is my Svelte Component Code:

 

const initTween = () => {
        tween = gsap.to(
            element, {
                xPercent: -100,
                x: () => width / 3,
                ease: "none",
                scrollTrigger: {
                    trigger: element,
                    start: "top top",
                    end: () => width,
                    scrub: true,
                    pin: true,
                    invalidateOnRefresh: true,
                    anticipatePin: 1
                },
                onUpdate: function() {
                    this.ratio > 0 && this.ratio < 1
                        ? showOverlay = true
                        : showOverlay = false
                }
            }
        );
    }

    onMount( async () => {
        console.log("init component")
        initTween()
    })

[julianlbch]

Was my issue - for everyone else that may encounter this issue: My images where loaded too late and therefore the Starting Point of the Animation was way too early!

[Cassie]

Thanks for popping back with an explanation!