Simple text wipe effect for streamlabs OBS using css and HTML

Question

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.

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>

Manas Khandelwal · Answer 1 · 2021-01-11T06:21:10.563

1

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>

edited Jan 11 '21 at 06:21

answered Jan 11 '21 at 05:36

Manas Khandelwal

3,790
2
11
24

i want the text wipe left to right? is it possible? please tell me – Rakib Khan Jan 11 '21 at 05:40
thanks for the update sir.. really helped it . btw.. do you know how to upgrade that css content value using Javascript? please tell me – Rakib Khan Jan 11 '21 at 07:09
Welcome, This might help you: https://stackoverflow.com/a/15624994/11171286 – Manas Khandelwal Jan 11 '21 at 07:14

score 1 · Accepted Answer · answered Jan 11 '21 at 09:21

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>

OMG you are awesome... you did it... thank you so much... – Rakib Khan Jan 12 '21 at 08:26 — Rakib Khan, Jan 12 '21 at 08:26

Simple text wipe effect for streamlabs OBS using css and HTML

2 Answers2

These animations might help you: