<!DOCTYPE html>
<html>
<head>
<style>
.ml1 {
font-weight: 900;
font-size: 3.5em;
}
.ml1 .letter {
display: inline-block;
line-height: 1em;
}
.ml1 .text-wrapper {
position: relative;
display: inline-block;
padding-top: 0.1em;
padding-right: 0.05em;
padding-bottom: 0.15em;
}
.ml1 .line {
opacity: ;
position: absolute;
left: 0;
height: 3px;
width: 100%;
background-color: #fff;
transform-origin: 0 0;
}
.ml1 .line1 { top: 0; }
.ml1 .line2 { bottom: 0; }
</style>
</head>
<body>
<h1 class="ml1">
<span class="text-wrapper">
<span class="line line1"></span>
<span class="letters">{{texteAnime}}</span>
<span class="line line2"></span>
</span>
</h1>
</body>
</html>
<script>
var lettres= document.querySelector(".text-wrapper");
anime({
targets: lettres,
direction : "{{directionTranslation}}",
easing: '{{styleArrive}}',
translatex: "{{distanceTranslation}}",
});
</script>