How to prevent text-shadow from overlapping previous letter
I need help with text-shadow.
I'm trying to do a 3D effect text reveal, but letter's shadows are overlapping previous letter, which is rendered by <span> inside of a container.
What I want to achieve, is that with each child's index increasing, I want it's z-index to decrease, so that previous letter is on top.
I tried to set z-index in scss, and in JS but didn't work.
Is there other way? I also tried using css:
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
but it didn't work.
I'm using SCSS, vanilla JS & animation from Anime.js Here is my code: https://codepen.io/blberrysmoothie/pen/QWPdEpb
I'm trying to do a 3D effect text reveal, but letter's shadows are overlapping previous letter, which is rendered by <span> inside of a container.
What I want to achieve, is that with each child's index increasing, I want it's z-index to decrease, so that previous letter is on top.
I tried to set z-index in scss, and in JS but didn't work.
Is there other way? I also tried using css:
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
but it didn't work.
I'm using SCSS, vanilla JS & animation from Anime.js Here is my code: https://codepen.io/blberrysmoothie/pen/QWPdEpb
