JS Animation text

Question

I need help! I want to make title animation, when you open the page the text should appear from "nowhere". Can somebody give me code? Anything i found on google, is just for click and appear, nothing like, you enter on site and the text appear from nowhere something like fade out but without clicking, just enter on the site.

<h1 class="titlu"> Creative Ideas </h1>

score 1 · Accepted Answer · answered Mar 03 '21 at 14:07

For a simple fade in you could just use CSS classes with transitions and make javascript add the class to your h1 on page load. By default, opacity is set to 0 (making the h1 invisible). A transition is also set so it gradually changes over 1 second. On page load it sets opacity to 1, which causes the fade effect.

function fadeInTitle() {
  const h1Ele = document.querySelector(".titlu");
  h1Ele.classList.add("fadeIn");
}

.titlu {
  opacity: 0;
  transition: opacity 1s ease;
}

.fadeIn {
  opacity: 1;
}

<body onload="fadeInTitle();">
  <h1 class="titlu">Creative Ideas</h1>
</body>

In the future when you come to more complex animations, a great library is GSAP. There are many tutorials available which will get you started.

JS Animation text

1 Answers1