I am working on slide animation for text in container infinitely.
However, I found it not working smoothly. When the text reaches the end, it seems like restarting instead of looping the text.
What I want is the text keep sliding to the right continuously.
How to solve it?
App.js
import "./styles.css";
export default function App() {
return (
<div className="App">
<div class="slide-right">
<h2>
<span>A</span>
<span>A</span>
<span>A</span>
<span>A</span>
<span>A</span>
<span>A</span>
</h2>
</div>
</div>
);
}
Styles.css
.App {
font-family: sans-serif;
text-align: center;
}
.slide-right {
border: 1px solid grey;
width: 150px;
overflow: hidden;
}
.slide-right h2 {
animation: infinite slide-right 2s linear;
transform: translateX(-100%);
text-align: right;
}
.slide-right h2 span {
margin-right: 10px;
}
@keyframes slide-right {
to {
transform: translateX(0);
}
}
Codesandbox:
https://codesandbox.io/s/hidden-bird-qy3jy?file=/src/styles.css
Change your "slide-right" keyframes from transform: translateX(0); to transform: translateX(100%);
@keyframes slide-right {
to {
transform: translateX(100%);
}
}
Use this instead of translateX(0)
Double the number of A to make the effect continuous.
To get a continuous flow this snippet has two copies of the spans.
Initially the h2 is translated -50% so only the beginning of the second half is showing.
The animation moves it to the right so it ends up with the beginning of the first half showing.
Then on the repeat the beginning of the second half takes the place of the beginning of the first half, so it all looks continuous.
.App {
font-family: sans-serif;
text-align: center;
}
.slide-right {
border: 1px solid grey;
width: 150px;
overflow: hidden;
}
.slide-right h2 {
animation: infinite slide-right 2s linear;
transform: translateX(-50%);
display: inline-block;
}
.slide-right h2 span {
margin-right: 10px;
}
@keyframes slide-right {
to {
transform: translateX(0);
}
}<div class="App"><div class="slide-right"><h2><span>A</span><span>A</span><span>A</span><span>A</span><span>A</span><span>A</span><span>A</span><span>A</span><span>A</span><span>A</span><span>A</span><span>A</span></h2></div></div>Note: to avoid problems with wrapping of text the spans are laid out continuously (as in the codesandbox in the question).