I'm working on a slider that has 4 stages of content. I am trying to translate the content in and out of the container based on the slider's position on the x-axis. I need the content to move with the slider, not transition or animate automatically. I have been working on this for days and I cannot figure it out. I'm working with svelte, typescript, and tailwind css, which I'm relatively new to svelte and typescript. I'm not sure if this would be easier to achieve with GSAP? (which I have a little bit of experience with) Here is my current code:
<script lang="ts"> import { onMount } from "svelte"; import { writable } from "svelte/store"; import { projects } from "../../data/project"; import Header from "../Header.svelte"; import { MoveRight, MoveLeft, ArrowLeft } from "lucide-svelte"; function navigateHome() { window.location.href = "/"; } const currentStage = writable(0); let left = 0; let moving = false; let button: HTMLElement; let h2Stage2: HTMLDivElement; let h2Stage3: HTMLDivElement; let imgStage2: HTMLDivElement; let imgStage3: HTMLDivElement; let stage1Content: HTMLDivElement; let stage4Content: HTMLDivElement; function onMouseDown() { moving = true; } function onMouseMove(e: MouseEvent) { if (moving) { const container = document.querySelector(".draggable-container" ) as HTMLElement; if (!container) return; const containerWidth = container.offsetWidth; const buttonWidth = button.offsetWidth; const maxDraggableWidth = containerWidth * 0.9; let newPosition = e.clientX - container.getBoundingClientRect().left - buttonWidth / 2; newPosition = Math.min( Math.max(0, newPosition), maxDraggableWidth - buttonWidth ); const percentage = (newPosition / maxDraggableWidth) * 100; currentStage.set(calculateStage(percentage)); left = percentage; updateStagePositions(percentage); } } function onMouseUp() { moving = false; } function calculateStage(percentage: number): number { if (percentage <= 25) { return 0; } else if (percentage <= 50) { return 1; } else if (percentage <= 75) { return 2; } else { return 3; } } function updateStagePositions(percentage: number) { const translateValue = (100 - percentage * 4).toFixed(2); // calculate translate value const reverseTranslateValue = (percentage * 4 - 100).toFixed(2); // reverse translate value if ($currentStage === 0) { stage1Content.style.transform = `translateY(${translateValue}px)`; } else if ($currentStage === 1) { h2Stage2.style.transform = `translateY(${translateValue}px)`; imgStage2.style.transform = `translateY(${reverseTranslateValue}px)`; } else if ($currentStage === 2) { h2Stage3.style.transform = `translateY(${translateValue}px)`; imgStage3.style.transform = `translateY(${reverseTranslateValue}px)`; } else if ($currentStage === 3) { stage4Content.style.transform = `translateY(${translateValue}px)`; } } onMount(() => { window.scrollTo(0, 0); }); export let slug: string; interface Project { image: string | null | undefined; title: string; description: string; heading: string; subhead1: string; subhead2: string; info: string; featuredImage1: string; featuredImage2: string; featuredImage3: string; highlights: string; highlightList: string[]; media: string; pcoeTeam: string; tags: string[]; team: string[]; } let project: Project | null = null; onMount(() => { project = projects.find((p) => p.slug === slug) || null; });</script><Header /><div class="projectDescription grid gap-2 justify-enter text-white bg-black text-center uppercase"><h2 class="text-6xl font-thin">Meta</h2><h3 class="text-3xl font-medium">Pursuit Innovation Exhibit</h3><button class="absolute cursor-pointer flex gap-2 uppercase top-48 left-80 text-white bg-black" on:click={navigateHome} tabindex="0" on:keydown={(event) => { if (event.key === "Enter") { navigateHome(); } }}><ArrowLeft />Back</button></div><div class="main bg-black py-12"><div class="draggable-container h-[70vh] relative flex justify-center w-[60vw] m-auto overflow-hidden"> {#if $currentStage === 0}<div class="absolute grid grid-cols-2 top-0 left-0 right-0 bottom-0 rounded-2xl pl-16 py-12 pr-12 bg-cover bg-no-repeat" style="background-image: url('../../../public/slide.jpg');"><div class="tag-container absolute flex flex-row gap-6 pt-8 pl-16 text-[#34F0FF] uppercase font-semibold"> {#each project?.tags ?? [] as tag}<div class="tag">{tag}</div> {/each}</div><div class="stage1-left pt-16" bind:this={stage1Content}><h2 class="text-6xl">{project?.heading}</h2><h3 class="text-2xl font-bold uppercase pt-6 w-96"> {project?.subhead1}</h3></div></div> {:else if $currentStage === 1}<div class="absolute grid grid-cols-2 top-0 left-0 right-0 bottom-0 rounded-2xl pl-16 py-12 pr-12 bg-cover bg-no-repeat" style="background-image: linear-gradient(to top right, #A8F9FF 55%, #34F0FF);"><div class="tag-container absolute flex flex-row gap-6 pt-8 pl-16 text-[#34F0FF] uppercase font-semibold opacity-30"><div class="tag">Tag 1</div><div class="tag">Tag 2</div><div class="tag">Tag 3</div><div class="tag">Tag 4</div></div><div class="stage2-left w-[400px] pt-16" bind:this={h2Stage2}><h2 class="text-3xl font-black uppercase pb-2"> {project?.subhead2}</h2><p>{project?.info}</p></div><div class="stage2-right" bind:this={imgStage2}><img src={project?.featuredImage1} alt="Meta" class="w-full mt-12" /></div></div> {:else if $currentStage === 2}<div class="absolute grid grid-cols-2 top-0 left-0 right-0 bottom-0 rounded-2xl pl-16 py-12 pr-12 bg-cover bg-no-repeat" style="background-image: linear-gradient(to top right, #A8F9FF 55%, #34F0FF);"><div class="tag-container absolute flex flex-row gap-6 pt-8 pl-16 text-[#34F0FF] uppercase font-semibold opacity-30"> {#each project?.tags ?? [] as tag}<div class="tag">{tag}</div> {/each}</div><div class="stage3-left pt-16" bind:this={h2Stage3}><div class="image-container grid gap-2"><img src={project?.featuredImage2} alt="Meta" class="px-5" /><img src={project?.featuredImage3} alt="Meta" class="w-fit" /></div></div><div class="stage3-right grid pt-16 justify-center grid-rows-[50px_1fr_1fr_1fr_1fr" bind:this={imgStage3}><h2 class="text-3xl font-black uppercase w-full text-center"> {project?.highlights}</h2><ul class="highlights grid gap-2 w-full px-14 text-sm"> {#each project?.highlightList ?? [] as highlight}<li class="highlights">{highlight}</li> {/each}</ul></div></div> {:else if $currentStage === 3}<div class="absolute grid grid-cols-2 top-0 left-0 right-0 bottom-0 rounded-2xl pl-16 py-12 pr-12 bg-cover bg-no-repeat" style="background-image: linear-gradient(to top right, #A8F9FF 55%, #34F0FF);"><div class="tag-container absolute flex flex-row gap-6 pt-8 pl-16 text-[#34F0FF] uppercase font-semibold opacity-30"> {#each project?.tags ?? [] as tag}<div class="tag">{tag}</div> {/each}</div><div class="stage4-left grid content-center" bind:this={stage4Content}><div class="image-container pl-12"><img src={project?.media} alt="Meta" /></div></div><div class="stage4-right ml-24 grid gap-2 content-center justify-end border-l-2 border-y-2 border-white pr-12 rounded-l-xl"><h2 class="font-black uppercase text-black text-xl"> {project?.pcoeTeam}</h2><ul> {#each project?.team ?? [] as team}<li>{team}</li> {/each}</ul><button class="uppercase flex items-center gap-2 text-sm text-black font-black mt-16 border-white rounded-full border-2 px-6 py-1"> Access Files<MoveRight /></button></div></div> {/if}<section class="draggable absolute bottom-5 h-16 flex items-center" style="left: {left}%" bind:this={button} on:mousedown={onMouseDown} role="button" tabindex="0"><button class="w-auto h-12 font-black uppercase bg-[#34F0FF] border-solid border-white border-2 flex gap-2 px-2 items-center justify-center rounded-full cursor-pointer ml-6 z-10"><MoveLeft size="30" />Drag<MoveRight size="30" /></button></section><div class="dragLine absolute bottom-12 w-[50vw] h-[2px] bg-white"></div></div></div><svelte:window on:mouseup={onMouseUp} on:mousemove={onMouseMove} /><style lang="postcss"> .tag { background: #0d4246; padding: 6px 27px; border-radius: 0 18px; } .highlights li { background: #34f0ff; border-radius: 0 18px; padding: 10px 16px; }</style>Is there any other way to achieve this or am I even going in the right direction? Any feedback, suggestions, or help is greatly appreciated.