horizontal scroll Horizontal scroll using scrollTrigger breaks on first load of page, but works perfectly on reload

[Lightning]

Hello, I am currently working on making a small website for my club. The issue I am facing is that I have a small section of 3 <section> tags of each height 100vh and 100vw and I am using a scrollTrigger to horizontally scroll them. Exactly like the svelte playground here: https://svelte.dev/playground/c3b97847be2b410e8f0f136c243387ef?version=5.9.0#H4sIAAAAAAAACrVUTYvbMBD9K4MOJWnz5V160TqGPfVUujSFHqoeHHviqFUkI42zG4L_e5EtO042uyy0DZiY0Zv3nubDR6bTHTLOPq3uH-AdrDJrlPpmZVGgha9YKlhRagktm7CNVOgY_3FkdCh9kg-wSUdxX5Yzt0dFPrZOHV6LZ0YTanKMs9hlVpaUCC1I7kpjCQqXlrCxZgeC-XfB7ganxwt79RA6Pzu7SDT6s6k09QmtnRakBSkk8MZSqdF-2Wwc0neZ07bh8E_IH43GsEzg2ITJq84sFtIR2gdVFVKPzkyM2_yG3mFG0mgHy-aSs4qkcjMy99amh5FgM4eZYF3GQIDMqMuddMoATw9oM9TEYRotFvAeetBMoS5oC1OIxpMOjqlDDoJpo1GwEBaUVzb1SRw-9lA3vAE_KQJQFxNs1lerZ_OIUmoOZCscxFxmqzWHaBBCnXNoSynYh6Vg8OFq-buMun2p2-rUY9-0eH6aHh3vUqkhU6lzS8EG3hKhvWCcyz2spc65ObEvj9c06xdo2oLFoco9yGHmWxsNMA1uG_UQwZJVyIri-TY6kc0DW9KNWeP1BYmbIAHh94LETS_RgJ5JvHaL27dJ3L4mQfE8l_vEN8g3pW2Po4PCpN210-gch7O-Ufg0zaVtuThY83jX9T-XrlTpgYMH3fmWNuhHm5YctPH_YZGbSfGrFLgffUs5RIvFvqXrARGcyW9RFltqkWHt6VL2ms3MqGqnw-E6zX4X1lQ6n2ZGGcthrSoMh78qR3JzmIYPIAe_vmgvTiXhzp2d1aFsfgQ6z291-9yQxfwtN_kHZm__3uwBlerH4D_6bVYjnndTyiaM8IkY91-y-mf9BxuW0z0kBwAA

My problem is that on the first load of the website the horizontal scroll section breaks at the very end and furthermore it breaks the rest of the website as well. Here is a small video showing you the issue I'm facing: https://streamable.com/pgg7pe

 

You can take a look at the website here as I don't have a codepen for it but the website is hosted here: https://www.clubgraphica.tech/
And you can take a look at the source code if you so wish to here: https://github.com/LightningFryer/graphica-core

 

As you can see the site breaks at the section of the horizontal scroll on the first load of the website (without caching), but on the second load of the website the site works fine. 
 

I'm also sharing a snippet of the code of the section with the horizontal scroll below:

 

<script lang="ts">

    import gsap from 'gsap';

    import ScrollTrigger from 'gsap/ScrollTrigger';

    import { onMount } from 'svelte';

    let containerOffsetWidth: Number;

 

    import dept_gd_sec_card from '$lib/images/gd_sec_card.webp';

    import dept_3d_sec_card from '$lib/images/3d_sec_card.webp';

    import dept_ui_ux_sec_card from '$lib/images/ui_ux_sec_card.webp';

    import dept_web_dev_ux_sec_card from '$lib/images/web_dev_sec_card.webp';

    import Device from 'svelte-device-info';

    import { stopOverscroll } from '$lib/anims/helperFuncs';

    // import { Star } from 'lucide-svelte';

 

    onMount(() => {

        let sections = gsap.utils.toArray('.department-sec');

        gsap.registerPlugin(ScrollTrigger);

        // ScrollTrigger.normalizeScroll(true);

        ScrollTrigger.refresh()

 

        gsap.to(sections, {

            xPercent: -100 * (sections.length - 1),

            ease: 'none',

            // duration: 2,

            scrollTrigger: {

                trigger: '.container',

                pin: true,

                scrub: 1,

                // snap: 1 / (sections.length - 1),

                end: () => '+=' + containerOffsetWidth || 0

            }

        });

 

        gsap.from('.intro-text', {

            opacity: 0,

            yPercent: -100,

            duration: 1,

            scale: 2,

            stagger: 0.3,

            ease: 'power4.inOut',

 

            scrollTrigger: {

                trigger: '.department-intro-sec',

                start: 'top 50%'

            }

        });

 

        gsap.from('.dept-card-sec-1', {

            opacity: 0,

            yPercent: 50,

            xPercent: -50,

            duration: 2,

            ease: 'power4.out',

            stagger: 0.4,

            rotate: 45,

 

            scrollTrigger: {

                trigger: '.department-gd-3d-sec',

                start: 'bottom right'

                // markers: true,

            }

        });

 

        if (!Device.isMobile) {

            gsap.from('.dept-card-sec-2', {

                opacity: 0,

                yPercent: 50,

                xPercent: -50,

                duration: 2,

                ease: 'power4.out',

                stagger: 0.4,

                rotate: 45,

 

                scrollTrigger: {

                    trigger: '.department-ui-web-sec',

                    start: 'bottom left'

                    // markers: true

                }

            });

        } else {

            gsap.from('.dept-card-sec-2', {

                opacity: 0,

                yPercent: 50,

                xPercent: -50,

                duration: 2,

                ease: 'power4.out',

                stagger: 0.4,

                rotate: 45,

 

                scrollTrigger: {

                    trigger: '.department-ui-web-sec',

                    start: 'right center'

                    // markers: true

                }

            });

        }

    });

    // right center for phones

</script>

 

<main class="">

    <div

        class="container flex max-h-screen min-w-[300vw] flex-row"

        bind:offsetWidth={containerOffsetWidth}

    >

        <section

            class="department-intro-sec department-sec flex h-full w-[100vw] flex-col items-center justify-center bg-accent text-base-200"

        >

            <!-- This is the background image that looks like the exploding thingy. DO NOT DELETE -->

            <!-- <div class="absolute z-0 scale-[1.3]">

                <img src={dept_intro_blob} alt="dept_intro_blob" />

            </div> -->

            <div class="flex h-full w-full items-center justify-center">

                <div class="flex flex-col items-center justify-center">

                    <h1 class="intro-text text-center font-bebas text-3xl text-white md:text-7xl">

                        What about our <span class="text-[#ffda45]">various departments</span> you ask?

                    </h1>

                    <h1 class="intro-text text-center font-bebas text-3xl text-white md:text-5xl">

                        Scroll on to see what <span class="text-7xl">we</span> have to offer!

                    </h1>

                </div>

            </div>

        </section>

 

        <section

            class="department-sec department-gd-3d-sec flex h-full w-[100vw] flex-col items-center justify-center"

        >

            <div class="h-full w-full">

                <div class="flex flex-col items-center justify-center md:flex-row md:gap-0">

                    <div class="dept-card-sec-1">

                        <img src={dept_gd_sec_card} class=" scale-[0.7] rounded-xl" alt="gd_sec" />

                    </div>

                    <div class="dept-card-sec-1">

                        <img src={dept_3d_sec_card} class=" scale-[0.7] rounded-xl" alt="gd_sec" />

                    </div>

                </div>

            </div>

        </section>

 

        <section

            class="department-sec department-ui-web-sec flex h-full w-[100vw] flex-col items-center justify-center"

        >

            <div class="h-full w-full">

                <div class="flex flex-col items-center justify-center md:flex-row md:gap-0">

                    <div class="dept-card-sec-2">

                        <img src={dept_ui_ux_sec_card} class=" scale-[0.7] rounded-xl" alt="gd_sec" />

                    </div>

                    <div class="dept-card-sec-2">

                        <img src={dept_web_dev_ux_sec_card} class=" scale-[0.7] rounded-xl" alt="gd_sec" />

                    </div>

                </div>

            </div>

        </section>

    </div>

</main>

 

<style>

    .department-intro-sec {

        position: relative;

        /* width: 100vw !important; */

        height: 100vh; /* Full viewport height */

 

        background-image: linear-gradient(to right, #ffffff7f 1px, transparent 1px),

            linear-gradient(to bottom, #ffffff7f 1px, transparent 1px);

        background-size: 70px 70px; /* Set grid cell size */

        background-color: black;

        animation: moveLeft 2s linear infinite;

    }

 

    .department-gd-3d-sec {

        position: relative;

        /* width: 100vw !important; */

        height: 100vh; /* Full viewport height */

 

        background-color: black;

        background-image: linear-gradient(to right, #ffffff7f 1px, transparent 1px),

            linear-gradient(to bottom, #ffffff7f 1px, transparent 1px);

        background-size: 70px 70px; /* Set grid cell size */

        animation: moveLeft 2s linear infinite;

    }

 

    .department-ui-web-sec {

        position: relative;

        /* width: 100vw !important; */

        height: 100vh; /* Full viewport height */

 

        background-color: black;

        background-image: linear-gradient(to right, #ffffff7f 1px, transparent 1px),

            linear-gradient(to bottom, #ffffff7f 1px, transparent 1px);

        background-size: 70px 70px; /* Set grid cell size */

        animation: moveLeft 2s linear infinite;

    }

 

    @keyframes moveLeft {

        0% {

            background-position: 0 0;

        }

        100% {

            background-position: 70px 0; /* Moves by exactly one grid cell size */

        }

    }

</style>

 

Sorry if I am not able to provide more information but I just want this issue to be fixed and yes I also do understand that this issue is hard to recreate all the time as the issue only occurs on first load when the website isn't cached yet is what I'm guessing.

 

Thank you for your help!

 

 

[Rodrigo]

Hi,

 

Without a demo that clearly illustrates the issue is really hard for us to do much.

 

My best guess is that you have some images above your ScrollTrigger section that are loaded and rendered after the ScrollTrigger instance is created. If you add markers to the ScrollTrigger config (always a good idea on the developing stage or when debugging) you'll probably see the markers out of position in the first load but correctly positioned after a reload.

 

Just wait until that particular image is loaded and call the refresh method:

https://gsap.com/docs/v3/Plugins/ScrollTrigger/static.refresh()

 

Hopefully this helps

Happy Tweening!