Search the Community

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!

So I'm trying to implement a basic horizontal scroll which scrolls across 3 sections upon entering a "container" object. But for some reason the scroll is buggy and the scroll doesn't show any of the sections after the first one. I've attached a link to a sveltekit playground demo. Please look into it. Thank you! https://svelte.dev/playground/c3f9045c97d8440daf51e5c2eb354577?version=5.9.0 I know this question has been asked a ton before but it hasn't been asked for sveltekit specifically and I'm finding it hard to find a solution for it. Sorry!

i've been trying to create this very straight forward gsap flip anim in svelte, but it's giving this error in console. tick() is used to wait for DOM updates in svelte. Here's the demo - https://stackblitz.com/edit/stackblitz-starters-bcg4gd?file=src%2Froutes%2F%2Bpage.svelte

Hi there, I was working on a flip animation across two distinct components where there are a group of elements that are flip-ed across these components. The two components represent two distinct "pages", one is for 'dual-view' and the other is for 'single-view'. The two components have heights larger than the viewport. Hence, we can scroll vertically for each of these components. I noticed that when I don't scroll before triggering the animation, the animation worked perfectly fine, but when I gave it some vertical scroll before triggering the animation, the elements didn't seem to start at the expected positions. Seems like scrolling messed up the starting position of my flip animations. I attach a minimally relevant REPL that I recreated from scratch and also a video explaining the problem. I hope it makes the problem clearer. https://svelte.dev/repl/6fde0174bda140c78b5f9ccf6b9238c5?version=4.2.18 What might be interesting to note is that when I tried to see what I got from calling flip.getState() just before starting the flip animation, the bounds data for all the elements are right. In particular the y data are spot on. So, I am confused how come the animation doesn't seem to start from that recorded position. I tried to give a translate of -window.scrollY for the elements using gsap.set(targets, {y: -window.scrollY}) like so, as suggested here https://gsap.com/community/forums/topic/39827-nuxt3-flip-animation-between-pages-ignore-scroll-position/#:~:text=gsap.set('.el'%2C { y%3A -window.scrollY }) , but it doesn't seem to make the animation start at the right position either. ---------------------------------------------------------------------- Somewhat a distinct problem, but I am wondering if I could get some good starting idea here. As you can see, the paragraphs shift when switching between views. I want to be able to "follow" a specific paragraph when the transition is happening. So, during the flip animation, I want exactly one paragraph to stay fixed in the viewport (more specifically, one has a constant y position from the top of the viewport), and the all the others could move freely, either converging to, or diverging away from that "frozen" paragraph. If such functionality is possible, it would be really great for my use case, and I'd be even more amazed by this elegant library. Thank you!

Hello! I caved the other day and now I'll be doing a LOT of GSAP ? Background: I tried replicating the Fake Scroll (Horizontal) demo and integrating it with SmoothScroller on a Svelte/Sveltekit site. It works on CodePen, and similar it works if I stick the SmoothScroller code inside the Horizontal component. Problem: I rather have the SmoothScroller in layout.svelte, because I'm using it across the *entire* site. If I stick it inside the Horizontal component, other things on the page break. If I have both a global and local component instance, other items on the page jitter (I'm assuming the SmoothScrollers are in conflict over the elements). Most of the other components play nicely going forwards (not in reverse or on resize, but that's another problem ?). I have attempted to replicate the issue with a minimal demo on StackBlitz. It's not exactly the same, but it is similar, so I'm hoping that perhaps someone shedding either some light on how that should work or best practices will help me solve my initial issue. The issue I'm seeing on StackBlitz is that the full number of sections isn't showing; it is similar on my local site, except that it also disappears VERY quickly and there's a ton of space down the page where the animation should be scrolling. One thing at a time, I guess. Help would be immensely appreciated!

I have a series of animations triggered by a scrolltrigger (the redStep). The animations are created in onMount and then refreshed using ScrollTrigger.refresh() on change the resize event. They work initially, but don't re-calculate using the new height / width when I make the window smaller or bigger. I have attached a simplified version of my code. The full version calculates the underlying from and two coordinates in a more complex way, but it is the scales that are not re-calculating so that is what I have included here. https://svelte.dev/repl/33ff20f203854e949518253d35147952?version=4.2.8

Trying to use the FLIP plugin in svelte and having an issue. I am changing the width of a div changing it's grid-column value dynamically. the grid value will change from "9 / 14" to "6 / 14" for example, and I am using the FLIP plugin to animate the changing width. It works just fine in one direction, as the line gets larger, but going in the opposite direction the flip process actually messes up the width of the grid-columns of the parent grid. I am expecting that this will NOT happen... In any case, the video explains it much better, and with a visual example...I can try to make a codepen at some point, though not really sure how to port svelte into there...will try to do if needed. Video explaining the issue... Thank you for your help!

Thank you for making this great plugin! ? I'm trying to recreate the Shuffle and FLIP example in Svelte but I have run into a problem where it doesn't work when you reparent elements. gsap-flip.mp4 ? Svelte REPL https://svelte.dev/repl/0ebcbfc6eacb457f954cee131cc2075c?version=3.49.0 I understand how declarative JavaScript frameworks like Svelte recreate those elements when you change them but I assumed when it came to the FLIP technique that it only cared about the before and after changes based on some identifier like data-flip-id. I made another example using Flipping.js where it works as expected. flip.mp4 ? Svelte REPL https://svelte.dev/repl/9f36c3b2a6504f9c9522cc8cf54e10fa?version=3.49.0 Thank you for your help! ?

Hi I'm running this very simple stagger animation, where I switch between 2 values on x by passing it a function, which was a common technique in gsap since ever. I noticed the animation behaves unpredictably and the staggers aren't linear, and seems it running 3 times and logging these their index values all over… I know i can use gsap.utils.wrap for this case, but this will be a common pattern in my GSAP animations and this left me wondering if somehow I'm messing up the way I should connect my GSAP animations to Svelte? Here's a Svelte REPL with the example: https://svelte.dev/repl/2add39882b9748758f2f8de72701cf0e?version=3.46.4