I have some text "Eat. Sleep. Repeat.". I want Each word to slide up and fade in, one by one. So Eat fades in, then Sleep, the Repeat. I tried many different methods such as using anime.js, keyframes, adding css class, etc. but none of them got the job done. Here is my code at the moment.
function findelem(tag, text) {
var x = document.getElementsByTagName(tag);
for (var i = 0; i < x.length; i++) {
if (x[i].innerHTML == text) {
return x[i];
}
}
return null;
}
function wrapWords (text) {
words = text.innerHTML.split(" ");
text.innerHTML = "";
for (var i = 0; i < words.length; i++) {
text.innerHTML += "<span style = \"opacity: 0; position: relative; top: 30px;\">" + words[i] + " " + "</span>";
}
return text.children
}
function animatetext (wordarr) {
anime({
targets: wordarr,
translateY: -30,
duration: 3000,
opacity: 1,
delay: anime.stagger(1000),
});
}
window.onload = function () {
x = findelem("H1", "Eat. Sleep. Repeat.");
xarr = wrapWords(x);
animatetext(xarr);
}<script src="/[email protected]/lib/anime.min.js"></script>
<script type="text/javascript"></script>
<h1>Eat. Sleep. Repeat.</h1>I have some text "Eat. Sleep. Repeat.". I want Each word to slide up and fade in, one by one. So Eat fades in, then Sleep, the Repeat. I tried many different methods such as using anime.js, keyframes, adding css class, etc. but none of them got the job done. Here is my code at the moment.
function findelem(tag, text) {
var x = document.getElementsByTagName(tag);
for (var i = 0; i < x.length; i++) {
if (x[i].innerHTML == text) {
return x[i];
}
}
return null;
}
function wrapWords (text) {
words = text.innerHTML.split(" ");
text.innerHTML = "";
for (var i = 0; i < words.length; i++) {
text.innerHTML += "<span style = \"opacity: 0; position: relative; top: 30px;\">" + words[i] + " " + "</span>";
}
return text.children
}
function animatetext (wordarr) {
anime({
targets: wordarr,
translateY: -30,
duration: 3000,
opacity: 1,
delay: anime.stagger(1000),
});
}
window.onload = function () {
x = findelem("H1", "Eat. Sleep. Repeat.");
xarr = wrapWords(x);
animatetext(xarr);
}<script src="https://cdn.jsdelivr/npm/[email protected]/lib/anime.min.js"></script>
<script type="text/javascript"></script>
<h1>Eat. Sleep. Repeat.</h1>3 Answers
Reset to default 4You just need css for this. But you need to add some <span> elements around your words. It can be done extremely easy without javascript though. Here is an example:
h1.fadeIn span{
opacity: 0;
transform: translateY(30px);
animation: fadeIn 0.5s ease-out forwards;
display:inline-block;
}
h1.fadeIn span:nth-of-type(2){
animation-delay: 0.5s;
}
h1.fadeIn span:nth-of-type(3){
animation-delay: 1s;
}
@keyframes fadeIn{
to{
opacity: 1;
transform: translateY(0);
}
}<h1 class="fadeIn">
<span>Eat.</span>
<span>Sleep.</span>
<span>Repeat.</span>
</h1>Here is a working codepen example: codepen you can modify the values however you like.
const SENTENCE_DELAY = 1000;
let sentencesForFading = document.querySelectorAll('.faded-sentence');
sentencesForFading.forEach(sentence=>{
sentence.innerHTML = sentence.textContent.split(' ').map(word=>'<span class="faded-word">'+word+'</span>').join(' ');
});
let wordsForFading = document.querySelectorAll('.faded-word');
wordsForFading.forEach(word=>{
word.addEventListener('transitionend', startNextWordAnimation);
});
function startNextWordAnimation(e){
let nextWord = e.target.nextElementSibling;
if( nextWord ){
nextWord.classList.add('faded-activated');
} else {
let nextSentence = e.target.parentElement.nextElementSibling;
startSentence(nextSentence);
}
}
startSentence(document.querySelector('.faded-sentence'));
function startSentence(sentenceElement){
if(!sentenceElement){
return;
}
setTimeout(()=>{
sentenceElement.querySelector('.faded-word').classList.add('faded-activated');
}, SENTENCE_DELAY)
}
document.querySelector('#restart').addEventListener('click', (e)=>{
e.target.blur();
document.querySelectorAll('.faded-word').forEach(word=>{
word.classList.remove('faded-activated');
});
startSentence(document.querySelector('.faded-sentence'));
});@import url("https://fonts.googleapis./css?family=Asap:700");
body {
background: #003366;
font-family: 'Asap', sans-serif;
margin: 0;
padding: 40px;
}
p {
font-size: 21pt;
color: #CC9900;
font-weight: bold;
}
.faded-word {
display: inline-block;
transform: translateY(65%);
opacity: 0;
}
.faded-activated {
transition: opacity .2s, transform .3s, color 2s .4s;
color: #FF3355;
opacity: 1;
transform: translateY(0);
}
button {
font-family: 'Asap', sans-serif;
background: #CC9900;
border: none;
padding: 15px 25px;
font-size: 16pt;
color: white;
cursor: pointer;
border-radius: 10px;
margin-top: 2em;
outline: none;
transition: all 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}
button:hover, button:focus {
transform: scale(1.1);
filter: brightness(1.1);
}<p class="faded-sentence">This sentence has words that will fade in one by one!</p>
<p class="faded-sentence">It’s pletely reusable and isn’t phased by text-wrap.</p>
<button id="restart">Restart Animations</button>You can simply add an animation and some other stuff (in CSS) instead of doing what you're doing.
Then you can fade in a new element each 1 second using setTimeout.
Here is your code (I also added some style to the text!):
document.getElementsByClassName("h1")[0].style = "animation-name: animation1; animation-duration: 1s; animation-fill-mode: forwards;";
setTimeout(function() { document.getElementsByClassName("h2")[0].style = "animation-name: animation2; animation-duration: 1s; animation-fill-mode: forwards;"; }, 1000);
setTimeout(function() { document.getElementsByClassName("h3")[0].style = "animation-name: animation3; animation-duration: 1s; animation-fill-mode: forwards;"; }, 2000);.h1 {
font-family: 'Roboto', sans-serif;
text-transform: uppercase;
color: transparent;
position: absolute;
top: 10px;
left: -100px;
}
.h2 {
font-family: 'Roboto', sans-serif;
text-transform: uppercase;
color: transparent;
position: absolute;
top: 10px;
left: -100px;
}
.h3 {
font-family: 'Roboto', sans-serif;
text-transform: uppercase;
color: transparent;
position: absolute;
top: 10px;
left: -100px;
}
@keyframes animation1 {
from {color: white; left: -100px;}
to {color: black; left: 5px;}
}
@keyframes animation2 {
from {color: white; left: -100px;}
to {color: black; left: 80px;}
}
@keyframes animation3 {
from {color: white; left: -100px;}
to {color: black; left: 190px;}
}<link href="https://fonts.googleapis./css2?family=Roboto:wght@100&display=swap" rel="stylesheet">
<h1 class="h1">Eat.</h1>
<h1 class="h2">Sleep.</h1>
<h1 class="h3">Repeat.</h1>Here is a living demo: https://codepen.io/marchmello/pen/abvZqqm