justin-chu / react-fast-marquee

A lightweight React component that harnesses the power of CSS animations to create silky smooth marquees.

React Fast Marquee

React Fast Marquee is a lightweight React component that harnesses the power of CSS animations to create silky smooth marquees.

Demo

Check out the demo here and play around with some sample marquees.

Installation

If you're using npm, in the command prompt run:

npm install react-fast-marquee --save

If you're using yarn, run:

yarn add react-fast-marquee

Usage

To use the component, first import Marquee into your file:

import Marquee from "react-fast-marquee";

Then wrap the <Marquee> tags around any component or text you'd like to slide.

<Marquee>
  I can be a React component, multiple React components, or just some text.
</Marquee>

A sample file might look like this:

import React from "react";
import MyComponent from "../components/MyComponent";
import Marquee from "react-fast-marquee";

const App = () => (
  <Marquee>
    <MyComponent />
    <MyComponent />
    <MyComponent />
  </Marquee>
);

export default App;

Props

Property	Type	Default	Description
style	CSSProperties	{}	Inline style for the container div
className	string	""	Name of the css class to style the container div
autoFill	boolean	false	Whether to automatically fill blank space in the marquee with copies of the children or not
play	boolean	true	Whether to play or pause the marquee
pauseOnHover	boolean	false	Whether to pause the marquee when hovered
pauseOnClick	boolean	false	Whether to pause the marquee when clicked
direction	"left" | "right"| "up"| "down"	"left"	The direction the marquee slides Warning: Vertical marquees are currently experimental and may be buggy. Please swap the values of the marquee's height and width when setting them
speed	number	50	Speed calculated as pixels/second
delay	number	0	Duration to delay the animation after render, in seconds
loop	number	0	The number of times the marquee should loop, 0 is equivalent to infinite
gradient	boolean	false	Whether to show the gradient or not
gradientColor	string	white	The color of the gradient
gradientWidth	number | string	200	The width of the gradient on either side
onFinish	{() => void}	null	A callback for when the marquee finishes scrolling and stops. Only calls if loop is non-zero.
onCycleComplete	{() => void}	null	A callback for when the marquee finishes a loop. Does not call if maximum loops are reached (use onFinish instead).
onMount	{() => void}	null	A callback function that is invoked once the marquee has finished mounting. It can be utilized to recalculate the page size, if necessary.
children	ReactNode	null	The children rendered inside the marquee

react-fast-marquee's Issues

no space between end and start in loop

This issue happen in loop mode when the width of the text is longer that the width containing tag.

The space at the end of the text is cleaned by HTML standard.
I tried to use   but this is interpreted as text.

How to get a space between end and start in loop mode?

Similar issue is, that multiple space are not accepted resp. multiple space are cleaned by HTML standard.
I assume this have the same reason and maybe same solution.

How to get a text with multiple space?

Marquee starts then stops on Safari until mouseover

The marquee seems to be working fine in Firefox and Chrome, but in Safari specifically when the page loads, it starts animating then immediately stops until there's a mouseover event.

I'm using one marquee for the loading state:

    renderLoadingState = () => (
        <Marquee play={false} gradient={false} pauseOnHover>
            <LoadingCard />
            <LoadingCard />
            <LoadingCard />
            <LoadingCard />
            <LoadingCard />
        </Marquee>
    );

and another for the actual loaded content:

    renderMarquee = () => {
        const { hikes } = this.state;

        return (
            <Marquee play pauseOnHover gradient={false} speed={30}>
                {hikes.map(
                    (
                        {
                            name,
                            city,
                            state,
                            coverPhoto,
                            review,
                            distance,
                            elevation,
                            difficulty,
                            hid,
                        },
                        index,
                    ) => (
                        <Card
                            name={name}
                            city={city}
                            state={state}
                            coverPhoto={coverPhoto}
                            review={review}
                            distance={distance}
                            elevation={elevation}
                            difficulty={difficulty}
                            hid={hid}
                            key={index}
                        />
                    ),
                )}
            </Marquee>
        );
    };

Screen.Recording.2021-06-16.at.5.40.04.PM.mov

Custom Control

react-fast-marquee/src/components/Marquee.tsx

Line 148 in 520eba2

className={className + " marquee-container"}

Can you switch class for a customing your body?

autoFill默认值是true，我是没想到的，很随意吗？？？？？？

[Feature Request] New directions: up and down?

Great marquee! Would love to be able to go up and down too.

Marquee does not scroll after recent version

The marquee animation does not play, elements are left in place instead.

This is happening on version 1.3.0
I downgraded to 1.2.1 and the issue is resolved.

<Marquee>
  <span>One</span>
  <span>Two</span>
  <span>Three</span>
</Marquee>

On 1.3.0 (not working):

On 1.2.1 (working):

gradient color for dark/white mode

Is there a method to dynamically change the gradient colors in the dark and white mode?

Speed param broken

Tried speed={5} and speed="5" ...no value changes the speed.

`console.log`s in consuming apps.

In the package installed via npm, there are multiple console.log calls on load and resize.

It would be preferable if these weren't present, or at least off by default.

Overflow x

can anyone tell me why react-fast-marqueue is overflowing in x axis ??

React 18 support

Hi, thanks for the great library.
the library only supports: react@"^16.8.0 || ^17.0.0"

pls also support 18
thanks.

[unsolved] play on hover and pause on leave behavior

I want the following behavior:

• play on hover;
• pause on leave;
• loop just once but it resets when mouse leaves (when loop is set to 1 and it finishes the loop, I can't make it loop again without a rerender).

I've got close to the result but it took me some useStates and it started to get more and more complex. If there's a way for doing this directly from the component it would be super nice!

Infinite scroll does not work when Marquee component is within a container with "position: fixed;"

Hello there, thanks for all your hard work on this library.

The title basically describes my issue with the Marquee component, where if its parent container has a fixed position, the infinite scroll fails to work. Removing position: fixed; from the parent container allows the infinite scroll to work as expected.

It would be nice if infinite scrolling works with position: fixed;; I am trying to create a stock-exchange style banner that stays at the top of the screen, at any given point on the page.

Thanks!

Marquee doesn't work if used twice on a page

marquee doesn't work if it is being used twice on a page.

<div className='w-full h-full'>
        <Marquee speed={300}>
          <div className='w-full  flex gap-2 relative'>
            {TwitterApi.splice(0, 10).map((item, index) => (
              <TwitterCard classes='last:mr-2' {...item} key={index} />
            ))}
          </div>
        </Marquee>
      </div>
     

The above is working normally but if I added extra elements to the above, it doesn't show.

<div className='w-full h-full'>
        <Marquee speed={300}>
          <div className='w-full  flex gap-2 relative'>
            {TwitterApi.splice(0, 10).map((item, index) => (
              <TwitterCard classes='last:mr-2' {...item} key={index} />
            ))}
          </div>
        </Marquee>
      </div>
      <div className='w-full h-full'>
        <Marquee speed={300}>
          <div className='w-full  flex gap-2 relative'>
            {TwitterApi.splice(0, 10).map((item, index) => (
              <TwitterCard classes='last:mr-2' {...item} key={index} />
            ))}
          </div>
        </Marquee>
      </div>

Marquee still plays when prop play is set to false

The marquee still scrolls/plays even when the prop play is set hard coded to false.

Dependencies:
React: ^17.0.2
Version: ^1.3.4

Item position jumping when changing the direction at runtime

Issue can be reproduced on the demo page: https://www.react-fast-marquee.com/demo

Large space between first and last item

There is a large space between the first and last items in the marquee and the behaviour is surprisingly very inconsistent. If i switch the viewport to mobile size, it works well, and I switch it back to desktop, it's perfect too, but when I refresh it again, back with the white space b/w first and last item. Not sure how to fix. I using the tag without any props currently

Animation jumping when changing pages

Hello. First of all, this plugin is awesome. The thing is that when I move around pages the scroll kind of jumps/glitches. See for yourself: https://metaxis.digital/

Is there a way to avoid that?

Doesn't work

I am copying and pasting fresh from the official docs and get an "invalid mime type" error when applying this. This library doesn't work or is missing crucial documentation.

Font size inconsistent on iOS (appears fine in development, but differs for live/production)

Hey all,

I'm having an issue styling the font size of the children of my marquee.

The font size doesn't seem to change on the live version of the site, but appears fine locally.

Testing:

Production:

Here's my code:

const BannerMarquee = ({ data }) => {
  return (
    <Wrapper>
      <Marquee gradientWidth={0} speed={55}>
        <small>
          <Link href={`${data.link}`}>{data.title}</Link>
        </small>
      </Marquee>
    </Wrapper>
  );
};

export default BannerMarquee;

const Wrapper = styled.div`
  width: 100%;
  background-color: var(--color-turquoise);
  * {
    font-size: 16px !important;
  }
  small {
    padding: 1rem 0;
  }

  small > a {
    text-decoration: none;
    color: var(--static-black);
  }

  :hover {
    /* cursor: pointer; */
    small > a {
      text-decoration: underline;
    }
  }
  @media (max-width: ${breakpoints.m}px) {
    * {
      font-size: 14px !important;
    }
  }
`;

Support react server components

Add the "use client" directive to the output bundle. https://beta.nextjs.org/docs/rendering/server-and-client-components#convention

no gradient width in React 16-17

Keeps adding "function(){[native code]}" to the end of the css var

--gradient-color: rgba(255, 255, 255, 1), rgba(255, 255, 255, 0); --gradient-width: 100px,function () { [native code] };
<ReactFastMarquee speed={speed} gradient={gradientBool} gradientColor={gradColor} gradientWidth={gradientWidth}>

Hide second marquee from screen readers

Add aria-hidden="true" to second content div element to effectively hide it from screen readers.

Items appear incorrectly in Chrome

Items disappear from the left side when they reach the edge of the screen (right direction) on first load and/or page reload (Chrome only). Appear only when the mouse cursor moves or another action (click or scroll, for example)

Problems Running Marquee with NEXTJS

Is there something to consider when using react-fast-marquee within a NEXTJS project. It doesn't work for me and I can't find the error.

SSR Not Supported

Trying to render with SSR but getting window undefined.
Seems __$insertStyle https://github.com/differui/rollup-plugin-sass/blob/master/src/style.ts#L18 causing module scope bug by checking the window or document.
Is there any solution we can make this support ?

Not responsive for Mobile

20221019_171034.mp4

Image is stretched in mobile version and Safari browser but works fine in Chrome Web browser.
Can you please look into this issue.

Not working with AstroJS

Doesn't load when used with AstroJS.

Tried giving custom size, doesnt show up in dev tools DOM inspector.
version: 1.3.2

Speeds are different based on content long

Even though I'm using same speed, short contents slide faster than long contents.

<Marquee speed='100' gradient={false}>
  <div className='text'>FREE SHIPPINGS</div>
</Marquee>

<Marquee speed='100' gradient={false}>
  <div className='text'>FREE SHIPPINGS ON ONLINE ORDERS OF $50 OR MORE</div>
  <div className='text'>FREE SHIPPINGS ON ONLINE ORDERS OF $50 OR MORE</div>
  <div className='text'>FREE SHIPPINGS ON ONLINE ORDERS OF $50 OR MORE</div>
</Marquee>

Here's how it looks
https://w3cpi.csb.app/

Source
https://codesandbox.io/s/w3cpi

Preview
https://user-images.githubusercontent.com/651938/108362205-83b45000-7204-11eb-99c8-ebd23bcbebbe.mov

[Feature Request] Vertical marquee

I would love to see a vertical marquee. Perhaps changing flex-direction and translation direction?

items are overlapping

Bug report

Description

After refreshing the site and leaving the site on for some time, i noticed that items start overlapping.

---

To Reproduce

Refresh the browser and wait for 30 minutes.
After this time the items should start overlapping.

---

Expected behavior

Items shouldn't decrease margins after some time

---

Screenshots

See image

---

System information
OS: [Linux Ubuntu 20.04]
Browser [safari]
Version:

• react-fast-marquee: 1.2.1
• node: 14.15.2
• npm: 7.15.1

Anchor / Link Tag inside Marquee is not working

I had passed the < a >, < Link > tag inside easy marquee tag but some Links are not working not even showing css cursor: pointer style on that, but it is showing on some. I dont get whats happening.

<Marquee
          duration={15000}
          pauseOnHover={true}
          background="#fafafa"
          height="25px"
          reverse={true}
            >
              {this.state.blogs.map((each, i) => {
                return (
                  <Link key={i} to={`blog-details/${each.id}`}>
                    <li>
                      <a>{each.heading}</a>
                    </li>
                  </Link>
                );
              })}
</Marquee>

[Feature Request] Vertical Scrolling

Is it possible to get a minor tweak to the direction functionality to support upwards and downwards scrolling?

Does not work on iphone/iOS device

The speed does not work on iphone mobile devices and sometimes the whole inner content even vanishes.

Loop problem when updating the content of the marquee

Hello,

I want to use react-fast-marquee to make a marquee where the content is supposed to update regularly.
I don't know if this component is supposed to work for that type of use case, so tell me if I misunderstand.

So i created a page where the children of the marquee is updating by a function.
This function reacts on the event onCycleComplete.

The problems I encounter is a shifting when I update the content of the marquee.

Here, the content in the red is the beginning of the children component.
Where the next red part comes to the end of the screen there is a end of cycle which updates the content of the component.

Expectations :
The transition with the new content has to be smooth

Assumptions :

• when the content change and therefore its width there is a delay in re-render

I can provide a reproductible scenario if necessary

Warning: Maximum update depth exceeded.

I am seeing the following error in the console when using Marquee.

react_devtools_backend.js:2430 Warning: Maximum update depth exceeded. This can happen when a component calls setState inside useEffect, but useEffect either doesn't have a dependency array, or one of the dependencies changes on every render.
    at Marquee (http://localhost:1212/dist/renderer.dev.js:315289:17)

I believe the first useEffect (the one that calls calculateWidth) should have an empty dependency array. Without it the effect is continually running since calculateWidth changes state every time it runs.

Let me know if you would like a PR for this.

Marquee component not displaying; animation not following all the way through

There are two main issues I am seeing:

1. Without manually setting a height, the Marquee component does not display. Images below will show that this is because the container has a height of 0.
   
   

2. Rather than the text animating all the way to the end (right to left), as soon as the Marquee element hits the left side of the screen, it restarts the animation.

Code to reproduce:

import Marquee from "react-fast-marquee"

export default function HeaderAnimation() {
    return (
        <Marquee className='h-screen' gradient={false} speed={250}> // class to make it visible
            <span>THIS SHOULD BE SCROLLING</span>
            <span>THIS SHOULD BE SCROLLING</span>
            <span>THIS SHOULD BE SCROLLING</span>
            <span>THIS SHOULD BE SCROLLING</span>
        </Marquee>
     </div>
    )
}

Browsers: Google Chrome and Microsoft Edge both experience these issues

Dependencies:
React: 18.2.0
react-fast-marquee: ^1.3.2

Need a way to add ref to <div className="marquee-container">

I need to add a ref to:

<div className="marquee-container ref={ref}>
</div>

Is there anyway I can do so? I tried adding it to the tag but it doesn't appear to work. This is needed for nextjs image's lazy load: lazyboundary. or the images are loading too slow.

<Marquee ref={ref}>
</Marquee>

cycleComplete callback would be nice!

I have a list of different Marquee elements, and it would be nice to only have one active at a time.
to be able to do something like this for example would be great:

<Marquee play={activeMarquee === 0} onCycleComplete={handleCycleComplete} > first thing </Marquee>
<Marquee play={activeMarquee === 1} onCycleComplete={handleCycleComplete} > second thing </Marquee>
<Marquee play={activeMarquee === 2} onCycleComplete={handleCycleComplete} > third thing </Marquee>

[Feature Request] Ability for user controlled scrolling

Love this library- however I think it could be even better with an option that enables users to horizontally scroll themselves if they wish.

Perhaps this could be enabled via an optional boolean scrollable prop.

Npm throwing warning when using react 17.x

When using react version 17.x, npm is throwing the following warning:

npm WARN [email protected] requires a peer of react@^16.14.0 but none is
installed. You must install peer dependencies yourself.
npm WARN [email protected] requires a peer of react-dom@^16.14.0 but none
 is installed. You must install peer dependencies yourself.

When reload the page react-fast-marquee is accelarating

I am using png file and When reload the page react-fast-marquee is accelarating.
My code snippet
<Marquee speed={100}> <div className={"marquee-style"}> <img src="/example1.png" width="50%"/> </div> <div className={"marquee-style"}> <img src="/example2.png" width="50%"/> </div> <div className={"marquee-style"}> <img src="/example3.png" width="50%"/> </div> </Marquee>

Restart scrolling when text ends

Hi�, how is it possible restart the animation when text reaches the end?
thanks!

Bug: loop and delay seems reading the same state

Sample recording (https://www.react-fast-marquee.com/demo)

demo.bug.480p.mov

Fill container width?

Hey!

Lovely little marquee, thanks for sharing 🙏

Sometimes when using marquees there's not enough content to fill the width of whatever container the marquee lives in, would be cool to be able to toggle a "fill" prop so that it automatically duplicates content to fill up the space so it doesn't appear empty before repeating again :)

Good idea?

[Feature Request] Responsive Gradient Width Size

Would love to be able to specify different gradient widths for different viewport sizes

single spaces are dropped, need doing double spaces for show 1 space

Hello,
i have a problem

examples:
hello how are you
is show as
hellohowareyou

When i use double spaces its works
hello how are you
will be to
hello how are you

Inconsistent speed behaviour and children getting cut off

Hi there! I've made a 1 minute video to describe this bug, you can find it below:

• https://www.loom.com/embed/fdd293301866472689c59f077a816c91

The link I've used for the video is also below, if you want to check it out yourself:

• https://hq-git-dependabot-npmandyarnreact-fast-marquee-121.duffel.sh

Thank you!

[Feature Request] A callback function prop that executes after the marquee has finished rendering

It would be really nice if there was a callback prop with the name along the lines of onRenderComplete or onRenderFinish so we can run some logic after the component has been successfully rendered.

An example use case for this would be to refresh the scroll trigger of the GSAP library so it can recalculate measurements after the <Marquee /> component has been rendered.

Support IE11

Hi @justin-chu,

First of all great lib, with clean API Doc.
Are you planning to support IE 11?

Do you have any temporary solution/suggestion like polyfill or something else?

Thanks.