Krause

Hi there beloved community. Note: The codepen url is a test-project to show code previews. 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. Maybe: I would also like for the "dragging" to have less strength if possible, and then on mobile have stronger 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 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

Can anyone help me achieve this for my html setup please? I do not want it to pause on hover, and when Throw i don't want it to stop. So basically the last example that @AnimatiCSS proviced, but for my HTML structure, and without the pausing on hover. <div class="marquee"> <div class="track"> <div class="item">1</div> <div class="item">2</div> <div class="item">3</div> <div class="item">4</div> <div class="item">5</div> <div class="item">6</div> <div class="item">7</div> <div class="item">8</div> </div> </div>

Is it possible to have this functionality added onto an infinitely looping marquee where the draggable function will just "animate" the timescale/progress/something that will gradually increase speed of the marquee and then gradually go back to initial speed? I've been trying to achieve this for quite a while now and though to look for assistance—thanks!

Hi, I'm in the process of building a website where on /work, the user will start scrolling from the bottom of smooth-content(main, in codepen example) I'm using scroolSmoother alongside other GSAP libraries. Guess the code is quite simple—but I'm new to this. I would wanna think that I need to do some kind of "scroll-to-end-of-smooth-content" thing. Not really sure. Looking forward to hearing from you Thanks a lot!

Hi @Rodrigo—thank you. Another question: I've made a horizontal marquee which is based on the velocityY of wheel,scroll,touch. Something that I would want to implement is that I want to be able to move the marquee with click/drag instead of JUST scrolling(velocity). I don't know if that's possible yet but would really appreciate if you could assist me. I did try to implement the "draggable" library, but couldn't seem to figure out how it worked properly. I have; marquee, track, and two lists(1 original, 1 clone) Not entirely sure how it would work, but I'll explain it like this: Create new observer, target marquee, onChangeY, type: pointer.. Can you elaborate on this, would appreciate it Short HTML looks like this: <div class="marquee"> <div class="track"> <div class="list"></div> <div class="list"></div> </div> </div> My script looks like this: $(".marquee .track").each(function () { $(this).find(".list").clone().appendTo($(this).closest(".track")); }); let object = { value: 1 }; let tl = gsap.timeline({ repeat: -1, onReverseComplete: () => { tl.progress(1); } }); tl.fromTo( ".track", { xPercent: 0 }, { xPercent: -50, duration: 150, ease: "none" } ); Observer.create({ target: "main", type: "wheel,scroll,touch", onChangeY: (self) => { let v = self.velocityY * 0.01; tl.timeScale(v); let resting = 1; if (v < 0) { resting = -1; } gsap.fromTo( object, { value: v }, { value: resting, duration: 1, onUpdate: () => { tl.timeScale(object.value); } } ); } });

Hello everyone, I've fully implemented scrollSmoother which works perfectly, but my "issue"/ideal situation would be that the user would be able to scroll with the pointer as well as the other scroll options that I have from Observer type: "wheel,scroll,touch,pointer", I've implemented the scrollSmoother like this: gsap.registerPlugin(ScrollTrigger, ScrollSmoother); let smoother = ScrollSmoother.create({ wrapper: ".page", content: "main", smooth: 1.2, normalizeScroll: true, effects: true }); As you will see in the video attached, I'm using Observer to create a marquee based on scroll direction+speed. The pointer works here. So the big questions is, how do I make the scrollSmoother go along when i click/drag ≈ pointer? Hope I make sense—thanks! Screen Recording 2022-10-05 at 08.57.06.mov