Text animation inside a slider bar component
Hello everyone. I built a slider bar to unlock the screen and I wanted to add some animation to the text like here https://codepen.io/maciekmaciej/pen/qZeNGY. My CSS code is not correct. Do you know what is wrong and how could I fix that? Thank you very much! 🙂
6 Replies
.Here's my React code : Thank you very much!
Your text is missing some of the CSS that's important
mix-blend-mode affects how the opacity interacts with the background
the background is a circle gradient which is black on the outside and white in the middle. That white in the middle is what you see move across
the background-clip clips the background to the text
the text-fill-color makes the text color transparent
the slide keyframe only moves that background aroudn so without this CSS it won't do what you expect
Thank you very much! It's working now!😃 I have to wait like 7 seconds before the animations begins again. Do you know how to shorten that time? Thanks a lot!
Make a codepen and send it and then people can look
it should take about 1.8s for the animation to play start to finish
then another 1.2s until it starts again
animation: slide 3s infinite ease-in-out;
Animation is 3s long
0 to 60% of that duration it plays the animation, 60 to 100% it just waits
You can adjust those numbers to whatever you wantYou made it clear. Thank you very much ! 🙂