Animated bar / text with Tailwind CSS and react - css

Question

anyone please can help me figure it out how to make the 2 animations used in this website https://worldofwomen.art/ using react and tailwind css
First: the animated bar of this picture
second: the animated text : • NEW SITE LAUNCHING SOON
I am looking forward for the help from someone, i really passed the whole night searching of animation in react and tailwind css but i didn't find any tutorial about this.
Thank you so much for the help and the stop you put on my question

Answer 1

You can achieve the animation with just css (ie Tailwindcss) by using 'animation' css property
I- Create a nextjs project with the command: $npx create-next-app my-app
II- Setup tailwindcss with nextjs project: https://tailwindcss.com/docs/guides/nextjs
III- Create new React component animation.js, inside pages/ folder
import React from 'react'
export default function Animation2() {
return (
<>
{/* Image Animation */}
<div className="animate">
<img src="/frise-2.2f579f.png" alt="" />
<img src="/frise-2.2f579f.png" alt="" />
</div>
{/* Image Animation - Reversed direction */}
<div className="animate-reversed">
<img src="/frise-2.2f579f.png" alt="" />
<img src="/frise-2.2f579f.png" alt="" />
</div>
{/* Text Animation */}
<div className="bg-[#332970] w-screen box-border p-4 flex items-center overflow-hidden fixed bottom-0">
<div className="animate">
{
[0,1,2,3,4,5,6,7,8,9,10,11].map((i) => (
<div className="text-[#139bac] whitespace-nowrap inline-flex items-center justify-center">• NEW SITE LAUNCHING SOON </div>
))
}
</div>
</div>
</>
);
}
The first div responsible for the animation of the image with the default direction from right to left. I used 2 img tags because it has to have 2 separate sets of the same img tag. because with the infinite loop, when one image disappears the second one appears and it will restart the loop without any gap (You can comment the second img tag to check the gap am talking about)
the second div is similar to the first one but it has the reversed direction property.
For the text animation, we do the same thing we have to create the text multiple times to avoid the gap when we animate the text for an infinite loop. And to avoid multiple lines of the same tag: • NEW SITE LAUNCHING SOON  I wrapped in an array and loop through it
all the styles are integrated in the same component using tailwindcss except the animation that will be added in globals.css file like this:
Go to globals.css file and add the animation css code:
#tailwind base;
#tailwind components;
#tailwind utilities;
#layer components {
.animate{
display: flex;
animation: scroll 20s linear infinite;
}
.animate:hover{
animation-play-state: paused;
}
.animate-reversed{
display: flex;
animation: scroll 20s linear infinite;
animation-direction: reverse;
}
.animate-reversed:hover{
animation-play-state: paused;
}
#keyframes scroll {
0%{
transform: translateX(0);
}
100%{
transform: translate(-50%);
}
}
}

Answer 2

There are a few ways to do this, but taking into account the site you referenced, I noticed that it works with an infinite increment, so it's most likely done with JS.
PS.: I could do everything with javascript.
const sleed1 = document.getElementById("sleed1");
let position1 = 0;
setInterval(() => {
position1 = position1 + 10;
sleed1.style.backgroundPosition = position1 + 'px';
sleed1.style.transitionDuration = '100ms';
}, 40)
#sleed1 {
width: 100%;
height: 200px;
background-color: #ccc;
background-image: url("https://i.stack.imgur.com/zJXIx.png");
}
<div id="sleed1" />
To control the speed you can change 3 values:
Number of pixels increased, I put 10.
The duration of the transition, I put '100ms'.
The setInterval interval, I put 40.
Both will influence speed but in different ways, so adjust until you find the best solution for you.
To change the sleed side, change "position + n" to "position-n".
Same code in React. Using "useEffect" with ",[ ]". Important not to forget this for the code to run only once and avoid undesirable effects.
https://codesandbox.io/s/slide-image-animation-with-react-and-css-rfhvd?file=/src/App.js