Jump to content
Search Community

React dynamic endless marquee container.

eicosane test
Moderator Tag

Recommended Posts

Hello! I'm new to using GSAP and I've seen a lot of solutions regarding endless/looping marquees in the forum/examples, but most of them work on the premise that the boxes have fixed widths. The problem I'm having is that I'm trying to animate my container box that can render an array of strings, and the strings can be longer on shorter and it could contain 10 string elements for example. This may make the container wider than the wrapper itself, or shorter.

 

Unfortunately I still can't wrap my head around modifiers that should be able to solve my issue, in this case that the animation is not "infinite". I tried cloning my containers but that wouldn't solve the issue. If I make the duration "longer" or make all the elements move to containerWidth * array.length I can see some blocks working as intended but then it restarts the animation and it goes all over again.

 

https://codesandbox.io/s/crawler-gsap-forked-olptt?file=/src/App.jsx

Here's my codesandbox since I couldn't make it work on a CodePen for some reason.

 

One approach I had in mind was that everytime my container was inside the black wrapper, it would play the clone's second animation to start moving, then after the first animation ended it would go back to the original position and be called again when the second animation was inside the black wrapper and so on... And I would fill the wrapper with as many boxes as needed to make the wrapper always look 'full'. But I tried using onComplete() callback since it seems that onComplete() is never called on arepeat: -1animation. So I don't think that would be a good idea or if there's another, easier alternative. 

 

If anyone knows what I'm doing wrong then I'd be grateful if someone could point me to the right direction since I tried a few approaches and none of them have worked for me. It doesn't have to be React related but I was using React since I wanted to make a reusable component out of it. 

 

Link to comment
Share on other sites

I think you will need to do some cloning until the content is wider than the canvas. Maybe like a min of 2x the width. 🤷‍♂️

 

And instead of animating each text block individually, put them inside a wrapper, and animate the wrapper instead. That way they will be the same width.

 

<div class="wrapper">
  <div>This is a short text: 1</div>
  <div>A shorter text: 2</div>
  <div>This can be a long text but not as long as you'd think: 3</div>
  <div>Styles.css: [4]</div>
  <div>Package.json: 5</div>
  <div>Create New topic about crawlers: [6]</div>
</div>
<div class="wrapper">
  <div>This is a short text: 1</div>
  <div>A shorter text: 2</div>
  <div>This can be a long text but not as long as you'd think: 3</div>
  <div>Styles.css: [4]</div>
  <div>Package.json: 5</div>
  <div>Create New topic about crawlers: [6]</div>
</div>
<div class="wrapper">
  <div>This is a short text: 1</div>
  <div>A shorter text: 2</div>
  <div>This can be a long text but not as long as you'd think: 3</div>
  <div>Styles.css: [4]</div>
  <div>Package.json: 5</div>
  <div>Create New topic about crawlers: [6]</div>
</div>

 

  • Like 2
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...