Div box animation

I have seen on numerous websites…e.g blogs…an effect where once the page loads the div boxes fades in and moves ever so slightly into place. I short but interesting animated effect.

What is the effect called and does anyone have an idea how I can see an example to learn how to do it.

thanks!

Hi @henk3, for the most part something this can be achieved with CSS only using transitions, or if you need more fine-grained control, animations. Depending on when exactly you want to apply it, you might only need JS for adding a class to trigger the effect; for example:

.box {
  opacity: 0;
  transform: translateY(-1em);
  transition: opacity 1s ease, transform 1s ease;
}

.box.fade-in {
  transform: translateY(0);
  opacity: 1;
}
window.addEventListener('load', () => {
  document.querySelector('.box').classList.add('fade-in')
})

(Not sure if there’s a specific name for this other than fade-in…)

1 Like

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.