Simple text wipe effect for streamlabs OBS using css and HTML

everyone i want to get a simple text-wipe effect using only CSS and HTML, I have a code its very simple.
my goal is, the text won't resize when the textbox will shrink, and that's how I want to achieve this type of text wipe effect. please note I need a totally transparent background because I want to use it as a sub alert for twitch. this type of wipe effect

is there any option that the text sill stay at the fixed position(right side), and when the textbox wipes it from left to right.

.containner{
width: 200px;
height: 150px;
background-color:green;

overflow: hidden;
position: relative;

}
.innercon{
    right: 0%;
width: 200px;
height: 50px;
background-color: pink;
animation: animaitonx;
animation-duration: 5s;
animation-iteration-count: infinite;
overflow: hidden;
position: absolute;
/*animation-delay: 10s;*/

}
@keyframes animaitonx{
    from{
        width: 200px;

    }
    to{
        width:0px;

    }
}
#copy{
    position: static;
}
.texttHolder{
     
    width:200px;
    text-align: right;
    
    color:red
}
<body onload="mainx()">
<div id="containner" class="containner">
    <div class="innercon">
        <div class="texttHolder" id="copy">
            here is your text
        </div>
        <div id="paste">
            
        </div>
    </div>


</div>


</body>

2 answers

  • answered 2021-01-11 05:36 Manas Khandelwal

    These animations might help you:

    Codepen: https://codepen.io/manaskhandelwal1/pen/MWjqowM

    .


    First:

    h1#first {
      animation: textFade 5s ease infinite;
      width: fit-content;
      margin-bottom: 50px;
    }
    
    @keyframes textFade {
      from {
        transform: translateX(0);
        opacity: 1;
      }
      to {
        transform: translateX(-110%);
        opacity: 0;
      }
    }
    <h1 id="first">Lorem ipsum dolor</h1>


    Second:

    h1#second {
      width: fit-content;
      position: relative;
    }
    
    h1#second:before {
      content: "";
      position: absolute;
      background-color: white;
      width: 100%;
      animation: textFade2 5s ease infinite;
      height: 100%;
      box-shadow: 25px 0px 30px 10px #ffffff;
    }
    
    @keyframes textFade2 {
      from {
        transform: translateX(-110%);
      }
      to {
        transform: translateX(0%);
      }
    }
    <h1 id="second">Lorem ipsum dolor</h1>

  • answered 2021-01-11 09:21 Temani Afif

    A simple mask effect can do it:

    h1 {
      color: #fff;
      display: table;
      margin: 50px auto;
      font-family: sans-serif;
      font-size: 60px;
      -webkit-mask-image: linear-gradient(to right, transparent 40%, #fff 60%);
      -webkit-mask-position: right;
      -webkit-mask-size: 250% 100%;
      animation: hide 2s linear forwards;
    }
    
    h1.opposite {
      -webkit-mask-image: linear-gradient(to left, transparent 40%, #fff 60%);
      animation-direction: reverse;
    }
    
    @keyframes hide {
      to {
        -webkit-mask-position: left;
      }
    }
    
    body {
      background: linear-gradient(to right, red, green);
    }
    <h1>A sample text</h1>
    
    <h1 class="opposite">A sample text</h1>