.element-1 {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}

.The-first-class {
  opacity: 0;
  transform: translateX(-100%);
  filter: blur(5px);
  transition: all 0.7s;
}
html {
  scroll-behavior: smooth;
}

.The-second-class {
  opacity: 1;
  transform: translateX(0);
  filter: blur(0);
}

@media (prefers-reduced-motion) {
  .The-first-class {
    transition: none;
  }
}