How do I code smooth transitions between components?-CodePudding

I'm making my own single page application and I don't want the content to be static as I scroll down. I want it to ease in with a smooth animation. I couldn't find any guides on the subject. Here is a perfect example of what I'm talking about: qanplatform.com , as you scroll down the content has these nice transitions between components. Is it code-splitting?

so basically i have my:

<div className='App'>
  <Navbar/>
  <Hero/>
  <Stats/>
  <Business/>
  <Team/>
  <Footer/>
</div>

and I want every component to render with a simple animation only when I scroll down to it and not before. I don't need anyone to write code for me, all I need is a tip on how to proceed. I think qanplatform.com best represents what my idea is.

CodePudding user response：

You can try this alternative one quite simple without an intersection observer, combining the CSS animation keyframes and JS to detect and reveal the content height

article: https://alvarotrigo.com/blog/css-animations-scroll/

function reveal() {
  var reveals = document.querySelectorAll(".reveal");

  for (var i = 0; i < reveals.length; i  ) {
    var windowHeight = window.innerHeight;
    var elementTop = reveals[i].getBoundingClientRect().top;
    var elementVisible = 150;

    if (elementTop < windowHeight - elementVisible) {
      reveals[i].classList.add("active");
    } else {
      reveals[i].classList.remove("active");
    }
  }
}

window.addEventListener("scroll", reveal);

@import url("https://fonts.googleapis.com/css2?family=Asap&display=swap");
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: "Asap", sans-serif;
}
body {
  background: #42455a;
}
section {
  min-height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
}
section:nth-child(1) {
  color: #e0ffff;
}
section:nth-child(2) {
  color: #42455a;
  background: #e0ffff;
}
section:nth-child(3) {
  color: #e0ffff;
}
section:nth-child(4) {
  color: #42455a;
  background: #e0ffff;
}
section .container {
  margin: 100px;
}
section h1 {
  font-size: 3rem;
  margin: 20px;
}
section h2 {
  font-size: 40px;
  text-align: center;
  text-transform: uppercase;
}
section .text-container {
  display: flex;
}
section .text-container .text-box {
  margin: 20px;
  padding: 20px;
  background: #00c2cb;
}
section .text-container .text-box h3 {
  font-size: 30px;
  text-align: center;
  text-transform: uppercase;
  margin-bottom: 10px;
}

@media (max-width: 900px) {
  section h1 {
    font-size: 2rem;
    text-align: center;
  }
  section .text-container {
    flex-direction: column;
  }
}

.reveal {
  position: relative;
  opacity: 0;
}

.reveal.active {
  opacity: 1;
}
.active.fade-bottom {
  animation: fade-bottom 1s ease-in;
}
.active.fade-left {
  animation: fade-left 1s ease-in;
}
.active.fade-right {
  animation: fade-right 1s ease-in;
}
@keyframes fade-bottom {
  0% {
    transform: translateY(50px);
    opacity: 0;
  }
  100% {
    transform: translateY(0);
    opacity: 1;
  }
}
@keyframes fade-left {
  0% {
    transform: translateX(-100px);
    opacity: 0;
  }
  100% {
    transform: translateX(0);
    opacity: 1;
  }
}

@keyframes fade-right {
  0% {
    transform: translateX(100px);
    opacity: 0;
  }
  100% {
    transform: translateX(0);
    opacity: 1;
  }
}

<section>
  <h1>Scroll Down to Reveal Elements &#8595;</h1>
</section>
<section>
  <div >
    <h2>Caption</h2>
    <div >
      <div >
        <h3>Section Text</h3>
        <p>
          Lorem ipsum dolor sit amet consectetur adipisicing elit. Tempore
          eius molestiae perferendis eos provident vitae iste.
        </p>
      </div>
      <div >
        <h3>Section Text</h3>
        <p>
          Lorem ipsum dolor sit amet consectetur adipisicing elit. Tempore
          eius molestiae perferendis eos provident vitae iste.
        </p>
      </div>
      <div >
        <h3>Section Text</h3>
        <p>
          Lorem ipsum dolor sit amet consectetur adipisicing elit. Tempore
          eius molestiae perferendis eos provident vitae iste.
        </p>
      </div>
    </div>
  </div>
</section>

<section>
  <div >
    <h2>Caption</h2>
    <div >
      <div >
        <h3>Section Text</h3>
        <p>
          Lorem ipsum dolor sit amet consectetur adipisicing elit. Tempore
          eius molestiae perferendis eos provident vitae iste.
        </p>
      </div>
      <div >
        <h3>Section Text</h3>
        <p>
          Lorem ipsum dolor sit amet consectetur adipisicing elit. Tempore
          eius molestiae perferendis eos provident vitae iste.
        </p>
      </div>
      <div >
        <h3>Section Text</h3>
        <p>
          Lorem ipsum dolor sit amet consectetur adipisicing elit. Tempore
          eius molestiae perferendis eos provident vitae iste.
        </p>
      </div>
    </div>
  </div>
</section>

<section>
  <div >
    <h2>Caption</h2>
    <div >
      <div >
        <h3>Section Text</h3>
        <p>
          Lorem ipsum dolor sit amet consectetur adipisicing elit. Tempore
          eius molestiae perferendis eos provident vitae iste.
        </p>
      </div>
      <div >
        <h3>Section Text</h3>
        <p>
          Lorem ipsum dolor sit amet consectetur adipisicing elit. Tempore
          eius molestiae perferendis eos provident vitae iste.
        </p>
      </div>
      <div >
        <h3>Section Text</h3>
        <p>
          Lorem ipsum dolor sit amet consectetur adipisicing elit. Tempore
          eius molestiae perferendis eos provident vitae iste.
        </p>
      </div>
    </div>
  </div>
</section>

CodePudding user response：

You can use IntersectionObserver for new elements entering into view. After that, applying styles has animation on newly entered elements. You can utilise the same technique in React with refs if you don't want to use class names or inline styles.

const intersectionCallback = (entries) => {
  entries.forEach((entry) => {
    if (entry.isIntersecting) {
      //add a new class
      entry.target.classList.add('fade-in-up');
    }
  });
}



const options = {
  rootMargin: '0px',
  threshold: 0 //when it just appear in your viewport, you can modify it based on your needs
}

const observer = new IntersectionObserver(intersectionCallback, options);

//find all elements which have a class name `content` to observe, you can use React's refs as well
const contentElements = document.querySelectorAll('.content')

for (const contentElement of contentElements) {
  observer.observe(contentElement)
}

@keyframes fadeInUp {
  from {
    transform: translate3d(0, 40px, 0);
  }
  to {
    transform: translate3d(0, 0, 0);
    opacity: 1;
  }
}


/*Animation styles*/
.fade-in-up {
  opacity: 0;
  animation-duration: 2s;
  animation-fill-mode: both;
  animation-name: fadeInUp;
}

.content {
  height: 100vh;
  width: 100vw;
}

<div >
  <h1>
    Scroll down to see the animation
  </h1>
</div>
<div >
  <h1>
    Scroll down to see the animation
  </h1>
</div>
<div >
  <h1>
    End
  </h1>
</div>

CodePudding user response：

You can use Animate On Scroll (AOS) or GSAP for this!

They're both pretty easy to use but for this example I'll use AOS since it's quite simpler:

// Initialize the lbrary after the page loads
AOS.init();

/* Basic styling (not needed) */

div {
  margin-top: 50vh;
  
}

<!-- Add the required libraries for AOS -->
<link href="https://unpkg.com/[email protected]/dist/aos.css" rel="stylesheet"/>
<script src="https://unpkg.com/[email protected]/dist/aos.js"></script>

<body>
  <div data-aos="fade-up">This element fades up on scroll</div>
  <div data-aos="fade-up">This element fades up on scroll</div>
  <div data-aos="fade-up">This element fades up on scroll</div>
  
  <div data-aos="fade-right">This element fades right on scroll</div>
  <div data-aos="fade-right">This element fades right on scroll</div>
  <div data-aos="fade-right">This element fades right on scroll</div>
  <div data-aos="fade-right">This element fades right on scroll</div>
  <div data-aos="fade-right">This element fades right on scroll</div>
  <div data-aos="fade-right">This element fades right on scroll</div>
  
  More examples in the AOS homepage
</body>

To use this in react just import the libraries