Search the Community

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 would like to animate a series of SVG circles from a set of coordinates in one array to a set in another. I have created this repo that lays them out and does one of two animations / tweens (animationRed, animationGreen) based on their class based on a scrolltrigger. That works fine. Each circle has an id which the tween can use to identify them. What I'd like to do is add to those tweens, moving from the coordinates in circles to the ones in circles2 and then back again when scrolling back, based on the scrolltrigger. I'm keen to keep the two components separated as that makes the larger use case easier to manage. https://svelte.dev/repl/33ff20f203854e949518253d35147952?version=4.2.7 Many thanks in advance.

I want to trigger an animation from a scrolltrigger in both directions, i.e it starts growing when the .intro class comes up into the viewport and then reverses when it scrolls back down again. I am hence looking to use Toggle Actions. I want the animation to continue unless the the class moves away. I can get it to work where its fully controlled by the scroll i.e. if the user stops scrolling, the animation stops, but I want the animation to complete or complete reverse once it has been triggered. In the code below, I've set it up with a separate scrolltrigger and tween, but you'll see commented out code where I tried to do it all in one. In the current version, it says "Cannot read properties of undefined (reading 'progress')" within drawStopSign, presumably because self.progress isn't defined. self.progress does work in the commented out consolidated version of scrolltrigger/ tween. Here is my code https://svelte.dev/repl/d09e192bca00453cae102eb91b4625c3?version=3.32.3

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!

Hi there beloved community. I'm in the process of launching a new portfolio but there's a bug with my GSAP-based marquee which showcases my projects in a gallery. From what I can see it looks like my code doesn't calculate the proper width & height of all of the media's inside of the marquee. And sometimes on load it only loads some of the actual content inside. Another thing: the marquee height is clamped, and inside of my runMarquee function it looks like the height doesn't adapt when resizing. I use: SvelteKit (framework) Hygraph (GraphQL) Another issue I'm facing is that most of my content inside of the marquee's has different aspect-ratios, especially the videos doesn't load in the proper format. So please also look for a solution to this. Preview link of website: https://krause-ew9w4q45a-asgerkrause.vercel.app/ sometimes it works and sometimes it doesn't. I need it to be bullet-proof. If you have a stronger code for the same results, please let me know! HTML structure: <div class="marquee"> <div class="track"> <!-- Media will go here --> <video autoplay loop muted src={url} type="video/mp4" /> <img src={url} alt="" /> </div> </div> CSS: .marquee { height: clamp(18.75rem, 12.5rem + 16.6667vw, 25rem); position: relative; overflow: hidden; display: block; margin-left: calc(var(--space) * -1); width: 100vw; } .marquee .track { height: 100%; transform-origin: 0 0; display: block; position: relative; } .marquee .track > * { height: 100%; width: auto; padding-left: 4px; position: absolute; object-fit: cover; } JS: onMount(() => { function runMarquee() { const allMarquees = document.querySelectorAll('.marquee'); allMarquees.forEach((marquee, index) => { marquee.querySelector('.track'); const allItems = marquee.querySelectorAll('.marquee>.track>*'), proxy = document.createElement('div'); allItems.length; let totalX = 0, marqueeH = 0; marquee.offsetWidth; allItems.forEach((item, i) => { const itemW = item.offsetWidth, itemH = item.offsetHeight; (totalX += itemW), gsap.set(item, { x: totalX, width: itemW, height: itemH }), itemH > marqueeH && (marqueeH = itemH); }); const marqueeVal = gsap.utils.wrap(0, totalX), marqueeProgress = gsap.utils.wrap(0, 1); gsap.set([marquee], { height: marqueeH }); const stringX = `-=${totalX}`, animation = gsap.to(allItems, { repeat: -1, duration: 300, x: stringX, ease: 'none', paused: !0, modifiers: { x: function (x, target) { return `${(x = ((parseInt(x) - totalX) % totalX) + (totalX - target.offsetWidth))}px`; } } }); function updateProgress() { const dragValue = marqueeVal((this.deltaX / 2) * -1) / totalX, currentProgressAnim = animation.progress(), endProgress = marqueeProgress(currentProgressAnim + dragValue); animation.progress(endProgress); } Draggable.create(proxy, { type: 'x', trigger: marquee, inertia: !0, onDrag: updateProgress, onThrowUpdate: updateProgress }), window.addEventListener('resize', function resize() { animation.render(animation.time(), !1, !0); }), animation.play(); }); } runMarquee(); }); Thanks

Hi there, I am having a very bizzare issue. I am almost done with a project on SvelteKit, which uses GSAP for animations. Everything was going perfectly well, untill I built the production version. After deployment everything seemed to work fine - all pages load and the appropriate animations are there. However, when you try to reload a page (other than the home page), the following error occurs. Uncaught (in promise) TypeError: (intermediate value).gsap is undefined Immutable 19 Because of the fact that the problem occurs only in production (only when I run the npm run build), and it is perfect when I run npm run dev, I was not sure how to show you this instance with a CodePen. So here is a simplified version of the http://stagger.fragment.bg. And here is the link to the GitHub repo https://github.com/kodes-agency/fragment-test. Here is a video that ilustrates the issue: http://api.fragment.bg/uploads/Issue_0_21_798db83bc7.mov I am really clueless why this happens. I will appreciate every input into how to solve this issue.