Krause

August 16, 2023

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 :-)

See the Pen zYMyMyK by asgerkrause (@asgerkrause) on CodePen

August 16, 2023

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 :-)

June 16, 2023

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>

June 16, 2023

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!

October 6, 2022

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!

See the Pen VwxGrwq by asgerkrause (@asgerkrause) on CodePen

October 5, 2022

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);
        }
      }
    );
  }
});

4 hours ago, Rodrigo said:
Hi @krause and welcome to the GreenSock forums!

Here is an example that combines regular ScrollTrigger and ScrollSmoother with a specific section using Observer:

Basically what it does is tell the ScrollTrigger instance to scroll to a specific position based on the Observer interaction:
Observer.create({
  target: ".container",
  type: "wheel,touch,pointer",
  onPress: (self) => {
    self.startScroll = scrollTween.scrollTrigger.scroll();
    scrollTo = gsap.quickTo(scrollTween.scrollTrigger, "scroll", {
      duration: 0.5,
      ease: "power3"
    });
  },
  onDrag: (self) => {
    scrollTo(self.startScroll + (self.startX - self.x) * dragRatio);
  }
});
Let us know if you have any other questions.

Thank you for being a Club member and supporting GreenSock! 🥳

Happy Tweening!

October 5, 2022

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!

Notifications

Messages

Krause

Posts

Joined

Last visited

Content Type

Profiles

Forums

Store

Blog

Product

Showcase

FAQ

Downloads

Posts posted by Krause

Broken auto-play, draggable & inertia, marquee animation

Fix a broken auto-play, draggable & inertia, marquee animation for SvelteKit project

Infinite Carousel with Draggable

Calculating progress on autoplaying looping draggable slider

ScrollSmoother reverse content (start bottom + end top)

ScrollSmoother (scroll with pointer/click)

ScrollSmoother (scroll with pointer/click)