Scrolltrigger not working properly inside of div

November 7, 2024

Hi, I have a problem with a gsap scrolltrigger in one of my components, im using svelte for my kind of portfolio website, what i would want is i have several tiles, that id like to appear from the left, the thing is, the content im displaying is inside this component:

<script>
    import { t } from "../locales/i18n.js";
    import { writable } from 'svelte/store';
    import { onMount, onDestroy } from 'svelte';
    import { goto } from "$app/navigation";
    import AboutMe from "./Tiles/AboutMe.svelte";
    import WorkExperience from "./Tiles/WorkExperience.svelte";
    import Education from "./Tiles/Education.svelte";
    import Skills from "./Tiles/Skills.svelte";

    export let buttons = [];
    let expandedTile = writable(null);
    let isClosing = false;

    const dynamicButtons = [
        { key: "aboutme.title", subClass: "large-tile", link: null, content: AboutMe },
        { key: "github", subClass: "small-two-tall", link: "https://github.com/", content: null },
        { key: "workexperience.title", subClass: "medium-tile", link: null, content: WorkExperience },
        { key: "linkedin", subClass: "medium-tile", link: "https://www.linkedin.com/in//", content: null },
        { key: "education.title", subClass: "medium-tile", link: null, content: Education },
        { key: "skills.title", subClass: "one-long-tile", link: null, content: Skills }
    ];

    function expandTile(name, link) {
        if (link) {
            if (link.startsWith('http')) {
                window.open(link, '_blank'); // Open external links in a new tab
            } else {
                goto(link); // Use goto() for internal navigation
            }
        } else {
            expandedTile.set(name);
            document.documentElement.style.overflow = 'hidden';
            isClosing = false;
        }
    }

    function closeTile() {
        isClosing = true;
        document.documentElement.style.overflow = '';
        setTimeout(() => {
            expandedTile.set(null);
        }, 400);
    }

    function handleKeydown(event) {
        if (event.key === "Escape") {
            closeTile();
        }
    }

    onMount(() => {
        if (typeof window !== 'undefined') {
            window.addEventListener('keydown', handleKeydown);
        }
    });

    onDestroy(() => {
        if (typeof window !== 'undefined') {
            window.removeEventListener('keydown', handleKeydown);
        }
    });
</script>

<div class="grid-container">
    {#each dynamicButtons as { key, subClass, link, content }}
        <button class="grid-tile {subClass}" on:click={() => expandTile($t(key), link)}>
            <span>{$t(key)}</span>
        </button>
    {/each}
</div>

{#if $expandedTile}
    <!-- Overlay container for expanded content -->
    <div class="expanded-overlay {isClosing ? 'closing' : ''}" on:click={closeTile}>
        <div class="expanded-content" on:click|stopPropagation>
            <button class="back-button" on:click={closeTile}>
                &larr;
            </button>
            <h1 class="expanded-title">{$expandedTile}</h1>
            {#each dynamicButtons as { key, content }}
                {#if $expandedTile === $t(key)}
                    <svelte:component this={content} />
                {/if}
            {/each}
        </div>
    </div>
{/if}

<style>
    .grid-container {
        position: absolute;
        top: 140vh;
        left: 0;
        right: 0;
        padding: 1rem;
        display: inline-grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 1rem;
        z-index: 1;
        background: none;
        max-width: 100vw;
    }

    .grid-tile {
        display: flex;
        align-items: center;
        justify-content: center;
        background: rgba(255, 255, 255, 0);
        backdrop-filter: blur(12px);
        border: 0.1em solid #005ffe;
        font-size: 1.5em;
        cursor: none;
        border-radius: 8px;
        transition: transform 0.2s, background-color 0.2s;
        position: relative;
        font-family: 'Fugaz One', sans-serif;
    }

    .grid-tile:hover {
        transform: scale(1.02);
        backdrop-filter: blur(0px);
    }

    .expanded-overlay {
        position: fixed;
        top: 0;
        left: 0;
        width: 100vw;
        height: 100vh;
        background: rgba(255, 255, 255, 1);
        backdrop-filter: blur(12px);
        z-index: 1000;
        display: flex;
        flex-direction: column;
        padding: 0;
        box-shadow: 0 0 15px rgba(0, 0, 0, 0.3);
        overflow: hidden;
        animation: expandAnimation 0.6s cubic-bezier(0.25, 1, 0.5, 1) forwards;
    }

    .expanded-overlay.closing {
        animation: shrinkAnimation 0.6s cubic-bezier(0.25, 1, 0.5, 1) forwards;
    }

    .expanded-content {
        width: 100vw;
        height: 100vh;
        overflow-y: auto;
        padding: 2rem;
        box-sizing: border-box;
        position: relative;
    }

    .back-button {
        position: absolute;
        top: 1rem;
        left: 1rem;
        font-size: 2em;
        background: none;
        border: none;
        cursor: pointer;
        color: #005ffe;
    }

    .expanded-title {
        margin: 0;
        font-size: 3em;
        text-align: center;
        font-family: 'Fugaz One', sans-serif;
    }

    @keyframes expandAnimation {
        0% {
            transform: scale(0);
            opacity: 0;
        }
        100% {
            transform: scale(1);
            opacity: 1;
        }
    }

    @keyframes shrinkAnimation {
        0% {
            transform: scale(1);
            opacity: 1;
        }
        100% {
            transform: scale(0);
            opacity: 0;
        }
    }

    .large-tile { grid-column: span 2; grid-row: span 2; height: 300px; }
    .one-long-tile { grid-column: span 3; grid-row: span 2; height: 100px; }
    .medium-tile { height: 200px; }
    .in-between-tile {grid-column: span 2; height: 200px;}
    .bigger-medium-tile { grid-column: span 2; grid-row: span 2; }
    .small-two-tall { grid-column: span 1; grid-row: span 2; height: 300px; }
    .small-tile { height: 100px; }

    @media (max-width: 768px) {
        .grid-container {
            grid-template-columns: repeat(2, 1fr);
        }
    }

    @media (max-width: 480px) {
        .grid-container {
            grid-template-columns: 1fr;
        }
        .grid-tile { font-size: 1em; }
    }
</style>

which is called GridContainer, what i did is basically i have a grid with divs, if you click on one, it expands to fill the screen, now i want to be able to scroll inside these tiles when they are expanded but i stopped the entire page from scrolling while that is happening, now i would want to have a scrolltrigger in one of the components which are inside of a tile like this

<script>
    import { onMount } from 'svelte';
    import gsap from 'gsap';
    import {ScrollTrigger} from "gsap/dist/ScrollTrigger";

    onMount(() => {
        gsap.registerPlugin(ScrollTrigger);

        gsap.from(".work-tile", {
            opacity: 0,
            x: -50,
            duration: 1,
            stagger: 0.3,
            scrollTrigger: {
                trigger: ".work-experience",
                toggleActions: "restart pause none none",
                start: "top 80%",
                end: "bottom 20%",
                scrub: 2,
            }
        });
    });


</script>

<div class="work-experience">
    <div class="work-tile">
        <h2>a</h2>
        <ul>
            <li>.</li>
            <li>.</li>
            <li>.</li>
            <li>.</li>
        </ul>
    </div>

    <div class="work-tile">
        <h2>b</h2>
        <ul>
            <li>.</li>
            <li>.</li>
            <li>.</li>
        </ul>
    </div>

    <div class="work-tile">
        <h2>c</h2>
        <ul>
            <li>.</li>
            <li>.</li>
        </ul>
    </div>
</div>

<style>
    .work-experience {
        height: 100vh;
    }

    .work-tile {
        margin: 10rem;
    }

    h2 {

    }

    ul {

    }

    li {

    }
</style>

here is a demo of the two files i just uploaded, when you scroll down and click on the tile, you can see the animation but when you scroll it doesnt work:
https://stackblitz.com/~/github.com/mmarco02/sveltejs-kit-template-default-i6xxhv

this would be the component, when i first open the tile, the animation plays but when i scroll down the tiles are just static and dont move, however if i scroll down and refresh the page then the animation plays to the point of my scrolling position, its really weird

i appreciate any help or advice, i know this is kind of a weird setup but i wanted to have tiles which you can click to see more content.
thanks!

November 7, 2024

I realize this is probably because of the ****** way i make the tile expand with css animations and the scrolltrigger is supposed to be for the page scrolling ,but i was just wondering if it would be possible to make it so that it reacts to the scrolling inside to the tile.. i kind of want it to stay just one page since i think it looks nicer, i just tried it by redirecting.. it worked fine when the work-experience component is on its own page.. i hope we can still figure out how to do it in the seperate div since that would be cool

November 7, 2024

Hi @mmarco and welcome to the GSAP Forums!

Without a minimal demo, it's very difficult to troubleshoot; the issue could be caused by CSS, markup, a third party library, a 3rd party script, etc. Would you please provide a very simple CodePen or Stackblitz that illustrates the issue?

Please don't include your whole project. Just some colored <div> elements and the GSAP code is best. See if you can recreate the issue with as few dependencies as possible. Start minimal and then incrementally add code bit by bit until it breaks. Usually people solve their own issues during this process! If not, at least we have a reduced test case which greatly increases your chances of getting a relevant answer.

See the Pen aYYOdN by GreenSock (@GreenSock) on CodePen.

that loads all the plugins. Just click "fork" at the bottom right and make your minimal demo:

Using a framework/library like React, Vue, Next, etc.?

CodePen isn't always ideal for these tools, so here are some Stackblitz starter templates that you can fork and import the gsap-trial NPM package for using any of the bonus plugins:

Please share the StackBlitz link directly to the file in question (where you've put the GSAP code) so we don't need to hunt through all the files.

Once we see an isolated demo, we'll do our best to jump in and help with your GSAP-specific questions. ✅

Also you can create a repl directly on Svelte as well, you can fork this one:

https://svelte.dev/playground/9472eb02a4bd4080a05d6d3c4d23d81d?version=5.1.6

November 7, 2024

ill send the stackblitz link into the replies aswell since its easier to find this way:
https://stackblitz.com/~/github.com/mmarco02/sveltejs-kit-template-default-i6xxhv

November 7, 2024

Hi,

Apparently you're using a github repo for creating your Stackblitz demo, as we understand that this makes it easier to create a demo, most likely this includes a full project, as we mentioned we need to see a minimal demo, not an entire repo in order to have a reduced code base that clearly illustrates the problem.

Also I can't seem to open the link, it says that the repository doesn't exists. I checked your Github profile and can't see the repo that appears in the URL.

November 8, 2024

Hi, thanks for the reply, sorry about that, the repository was private, it should work now, it is a minimal demo of my problem, i just found it to be easier to make a respository for it, so i can create it on my own pc, make sure its what i want and it recreated the issue and then just upload it.
thanks!

November 8, 2024

Hi,

I understand that creating a demo from a repo is easier and shorter, but unfortunately I forked your repo on Stackblitz and tried to make some changes to it without been able to have those changes reflected on the preview.

Please create a minimal demo from one of the starter templates Stackblitz has to offer, either select Svelte from the Frontend tab or SvelteKit from the Fullstack tab:

November 9, 2024

22 hours ago, Rodrigo said:

Hi,

I understand that creating a demo from a repo is easier and shorter, but unfortunately I forked your repo on Stackblitz and tried to make some changes to it without been able to have those changes reflected on the preview.

Please create a minimal demo from one of the starter templates Stackblitz has to offer, either select Svelte from the Frontend tab or SvelteKit from the Fullstack tab:

Hi, so sorry, thank you for your patience, i made it without a repo now and used the Scrolltrigger+Sveltekit starter, i made sure that its only minimal and shows the error, i hope this works, heres the link:
https://stackblitz.com/edit/sveltejs-kit-template-default-eka5bd?file=src%2Froutes%2F%2Bpage.svelte

idk why this happens but i just cant seem to fix it, the component im opening in the tile on its own works fine if its alone on a different site like /tile or sth but not when its in the tile just animated by CSS

thanks in advance

Edit: it seems to work and update for me when im not logged in, so i hope i did it right ._.

November 9, 2024

Update, i fixed it, all i had to add was
scroller: ".expanded-content"

lol, sorry for the trouble, at least i know how to write a nice post on here

heres the working version if anyone encounters this problem, lol:
https://stackblitz.com/edit/sveltejs-kit-template-default-eka5bd?file=src%2Fcomponents%2FTiles%2FWorkExperience.svelte

but for some reason when i click on the tile, sometimes the first time the animation plays but still doesnt react to scrolling? when i reload the site it reacts like i want it to, thats weird

if someone reads this, i would appreciate if you could take a look at that, thank you!

Edit: i think i fixed that too with refreshing on Leave:
https://stackblitz.com/edit/sveltejs-kit-template-default-eka5bd?file=src%2Fcomponents%2FTiles%2FWorkExperience.svelte

😅

Notifications

Messages

Scrolltrigger not working properly inside of div

Recommended Posts

mmarco

mmarco

GSAP Helper

mmarco

Rodrigo

mmarco

Rodrigo

mmarco

mmarco

Create an account or sign in to comment

Create an account

Sign in

Recently Browsing 0 members