I’m playing around with anime.js at the moment, trying to get some text effects. The idea is ultimately to have an adjective shifting within an otherwise fixed header message, which is why I’ve layered the text with grid.
At the same time, I’ve added a background image/mask with ‘-webkit-background-clip: text’ and ‘color: transparent’, in order to add some styling to the text that will animate in/out. The background mask works by itself, and the animation works by itself. However, together they break: nothing shows up. Any color value other than transparent works; however, this of course means that I can’t combine the masking technique with the animation. Does anyone know why this is breaking/how to fix? Thank you!
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="./test.css">
<script src='https://cdnjs.cloudflare.com/ajax/libs/animejs/3.2.1/anime.min.js'></script>
</head>
<body>
<div class='mask'>
<h1 class='word1'>
<span>h</span><span>e</span><span>l</span><span>l</span><span>o</span>
<span>w</span><span>o</span><span>r</span><span>l</span><span>d</span><span>!</span>
</h1>
<h1 class='word2'>
<span>L</span><span>o</span><span>r</span><span>e</span><span>m</span>
<span>I</span><span>p</span><span>s</span><span>u</span><span>m</span>
</h1>
</div>
</body>
<script>
let animation = anime.timeline({
loop: true
});
animation.add({
targets: '.word1 span',
rotateX: 110,
borderRadius: 50,
duration: 2000,
easing: 'linear',
loop: true,
delay: anime.stagger(150),
opacity: 0
})
animation.add({
targets: '.word2 span',
opacity: 1,
rotateX: [-110, 0],
borderRadius: 50,
duration: 2000,
easing: 'linear',
loop: true,
delay: anime.stagger(100),
})
</script>
</html>
div {
display: grid;
grid-template-columns: 1;
grid-template-rows: 1;
}
span {
display: inline-block;
margin: 0;
letter-spacing: normal;
}
.word1,
.word2 {
grid-area: 1/1;
}
.word2 span{
opacity: 0;
transform: rotateX(110deg);
}
.mask {
-webkit-background-clip: text;
background-image: url('./copy_texture_4_small.jpg');
color: transparent;
}