Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

When reload the page react-fast-marquee is accelarating

See original GitHub issue

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>

Issue Analytics

State:
Created 2 years ago
Reactions:3
Comments:6 (2 by maintainers)

Top GitHub Comments

2reactions

codyarosecommented, Jun 6, 2022

Same issue here. Also using Suspense, and I noticed that the issues resolves itself if the viewport size is changed.

The speed is controlled by a css variable on .marquee called --duration. My temporary fix is to manually override that variable --duration: 60s !important

1reaction

justin-chucommented, Jun 12, 2021

I’ll look into this.

Top Results From Across the Web

react-fast-marquee - npm

A lightweight React component that utilizes the power of CSS animations to create silky smooth marquees.. Latest version: 1.3.5, ...

Issues · justin-chu/react-fast-marquee - GitHub

A lightweight React component that utilizes the power of CSS animations to create ... When reload the page react-fast-marquee is accelarating bug Something...

Javascript Continuous Scroller - speeding up on a page refresh

The following code is now working! I added an if statement and - clearInterval(lefttime); to the initialize marquee function.

Speed up your Next.js (React) app with this neat trick - YouTube

Your Next.js ( React ) app can be statically exported to consist only of HTML and CSS documents. This is a great use...

React Native Text Ticker/Marquee Component - Morioh

scrollSpeed, number, true, 150, Describes how fast the scroll animation moves. Effective when duration is not set. animationType, string ...