Kevin Powell - Community•11mo ago

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! 🙂

.track_drag {
    border: 0.1px solid black;
    width: 350px;
    height: 60px;
    left:700px;
    top: 50%;
    display: flex;
    align-items: center;
    position: absolute;
    overflow: hidden;
    border-radius: 7px;
    touch-action: none;
    background: url("../../assets/galaxy.jpg");
    grid-row-start: 9;
    grid-row-end: span 2;
  }
  
  #item {
    width: 60px;
    height: 50px;
    justify-self: flex-start;
    background-color: rgb(51, 66, 165);
    border: 10px solid rgb(100, 66, 165);
    border-radius: 20px;
    /*touch-action: none;
    user-select: none;*/
    z-index: 999;
    margin: 11px 1px;
    background-size: 40% 40%;
    background-repeat: no-repeat;
    background-position: center;
    background-image: url("a very long URL");
  }
  #item:active {
    background-color: rgb(160, 153, 249);
    border-color: rgb(100, 153, 249) !important; 
  }
  #item:hover {
    cursor: move;
    border-color: rgba(136, 136, 136, .25); 
  }
  .track_text {
    height: 100%;
    width: 100%;
    position: absolute;
    font: normal 15vh sans-serif;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 24px; 
    color: black;
    animation: slide 3s infinite ease-in-out;
  }
  @keyframes slide {
    0% {
      background-position: -100vh center;
    }
    60%, 100% {
      background-position: 100vh center;
    }
  }
  .slide {
    animation: slide 3s infinite ease-in-out;
  }

.track_drag {
    border: 0.1px solid black;
    width: 350px;
    height: 60px;
    left:700px;
    top: 50%;
    display: flex;
    align-items: center;
    position: absolute;
    overflow: hidden;
    border-radius: 7px;
    touch-action: none;
    background: url("../../assets/galaxy.jpg");
    grid-row-start: 9;
    grid-row-end: span 2;
  }
  
  #item {
    width: 60px;
    height: 50px;
    justify-self: flex-start;
    background-color: rgb(51, 66, 165);
    border: 10px solid rgb(100, 66, 165);
    border-radius: 20px;
    /*touch-action: none;
    user-select: none;*/
    z-index: 999;
    margin: 11px 1px;
    background-size: 40% 40%;
    background-repeat: no-repeat;
    background-position: center;
    background-image: url("a very long URL");
  }
  #item:active {
    background-color: rgb(160, 153, 249);
    border-color: rgb(100, 153, 249) !important; 
  }
  #item:hover {
    cursor: move;
    border-color: rgba(136, 136, 136, .25); 
  }
  .track_text {
    height: 100%;
    width: 100%;
    position: absolute;
    font: normal 15vh sans-serif;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 24px; 
    color: black;
    animation: slide 3s infinite ease-in-out;
  }
  @keyframes slide {
    0% {
      background-position: -100vh center;
    }
    60%, 100% {
      background-position: 100vh center;
    }
  }
  .slide {
    animation: slide 3s infinite ease-in-out;
  }

6 Replies

uliana3412OP•11mo ago

.Here's my React code :

<div className="track_drag animate" ref={containerRef} onMouseDown={dragStart} onMouseUp={dragEnd} onMouseMove={drag}>
   <div id="item" ref={dragItemRef}></div>
   <p className="track_text track_text--before animate" ref={beforeRef}>Slide to unlock</p>
 </div>

<div className="track_drag animate" ref={containerRef} onMouseDown={dragStart} onMouseUp={dragEnd} onMouseMove={drag}>
   <div id="item" ref={dragItemRef}></div>
   <p className="track_text track_text--before animate" ref={beforeRef}>Slide to unlock</p>
 </div>

Thank you very much!

uliana3412OP•11mo ago

Darryll•11mo ago

Your text is missing some of the CSS that's important

.track-text {
      mix-blend-mode: overlay
    background: radial-gradient(ellipse, white 50%, black 70%) black no-repeat
    -webkit-background-clip: text
    -webkit-text-fill-color: transparent
}

.track-text {
      mix-blend-mode: overlay
    background: radial-gradient(ellipse, white 50%, black 70%) black no-repeat
    -webkit-background-clip: text
    -webkit-text-fill-color: transparent
}

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

uliana3412OP•11mo ago

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!

Darryll•11mo ago

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% {
      background-position: -100vh center;
    }
    60%, 100% {
      background-position: 100vh center;
    }

    0% {
      background-position: -100vh center;
    }
    60%, 100% {
      background-position: 100vh center;
    }

0 to 60% of that duration it plays the animation, 60 to 100% it just waits You can adjust those numbers to whatever you want

uliana3412OP•11mo ago

You made it clear. Thank you very much ! 🙂

Gaming

Programming

Text animation inside a slider bar component