Animações de Scroll em React

Adicionando pequenos detalhes que fazem diferença!

As animações de scroll permite que seus componentes apareçam na página enquanto você desliza para baixo. Este artigo mostra como fazer isso com React e CSS3!

Exemplo de uma animação de scroll

Para este exemplo, teremos um componente App, Header e About.

Primeiro, vamos criar o nosso componente Header.

***src/Header/index.js***
-----------------------
import React from 'react';
import './styles.css';
const Header = () => (
  <div className="header">
    <h1>Title</h1>
  </div>
)
export default Header;

Adicionar alguns estilos:

***src/Header/styles.css***
-------------------------
.header {
   display: flex;
   justify-content: center;
   align-items: center;
   height: 100vh;
   width: 100vw;
}
.header h1 {
   font-size: 30px;
   color: white;
}

Irado! O componente Header está pronto! Vamos para o próximo, que será o componente App:

***src/App/index.js***
--------------------
import React, { Component } from 'react';
import Header from '../Header';
class App extends Component {
   constructor() {
     super();
     this.state = {
        className: ''
     }
   }
   render() {
     return(
       <div>
         <Header />
       </div>
     )
   }
}
export default App;

O nosso componente App está apenas renderizando nosso componente Header. Abaixo do Header, criaremos o componente About que contém um texto. O texto será deslocado a partir da esquerda quando nos deslizarmos para área abaixo deste componente.

Há algumas coisas que precisamos fazer para que isso aconteça:

• Nosso estado precisa manter o nome da classe da imagem e do texto do componente About
• Se o usuário percorrer uma certa quantidade de pixels, defina o estado para outro nome de classe.
• Criar uma função que manipule a ação de scroll

***src/App/index.js***
--------------------
import React, { Component } from 'react';
import Header from '../Header';
class App extends Component {
   constructor() {
     super();
     this.state = {
        className: 'hidden'
     }
   }
   handleScroll() { 
    if (document.documentElement.scrollTop > 430) {
       this.setState({
         className: 'show'
       })
     } 
   }
 
   componentDidMount() {
     window.onscroll = () => this.handleScroll()
   }
   render() {
     return(
       <div>
         <Header />
       </div>
     )
   }
}
export default App;

Se você não tem certeza de quantos pixels depois você quer que ele apareça, verifique utilizando:

console.log(document.documentElement.scrollTop);

Toda vez que nos realizarmos o scroll, a função handleScroll é invocada. No entanto, apenas se tivéssemos percorrido 430 pixels, a função handleScroll definirá o estado como show, ao invés de hide.

Vamos criar o componente About.

***src/About/index.js***
-----------------------
import React, { Component } from 'react';
import './styles.css';
class About extends Component {
  render() {
    return(
      <div className="about-wrapper">
        <div className="about-text">
          <div className={this.props.className}>
            <h3>Title</h3>
            <p>This is a text that will appear.</p>
          </div>
         </div>
      </div>
     )
   }
}
export default About;

Se o usuário não percorrer 430 pixels, o nome da classe da div que contém o texto será hide. Uma vez que o usuário percorreu 430 pixels, o className será show. Isso é importante uma vez que chegamos ao CSS. Mas primeiro, vamos importar o componente About no componente da nossa aplicação.

***src/App/index.js***
--------------------
import React, { Component } from 'react';
import About from '../About';
import Header from '../Header';
class App extends Component {
   constructor() {
     super();
     this.state = {
        className: 'hidden'
     }
   }
   handleScroll() { 
    if (document.documentElement.scrollTop > 430) {
       this.setState({
         className: 'show'
       })
     } 
   }
   componentDidMount() {
     window.onscroll = () => this.handleScroll()
   }
   render() {
     return(
       <div>
         <Header />
         <About className={this.state.className} />
       </div>
     )
   }
}
export default App;

E adicionar alguns estilos para About:

***src/About/styles.css***
------------------------
.about-wrapper {
   height: 30em;
   width: 100vw;
}
.about-text {
   position: relative;
   width: 30em;
   height: 20em;
}
.show {
   position: absolute;
   left: -30em;
   width: 30em;
   height: 20em;
   -webkit-animation: slide-in 1s forwards;
   animation: slide-in 1s forwards;
}
@-webkit-keyframes slide-in {
  100% { left: 0 }
}
@keyframes slide-in {
  100% { left: 0 }
}

E PRONTO!!1 🚀 🎉

Ahoooy! E não é que funciona?

Agora, ao deslizar pela página, o texto será mostrado a partir da esquerda. Ainda não adicionei nenhum estilo aos componentes, por isso não parece muito bom, mas a funcionalidade está lá!

Se você deseja que eles apareçam da direita, parte superior ou inferior, basta alterar os próximos valores:

.show {
  left/right/top/bottom: -30em
}
@-webkit-keyframes slide-in {
  100% { left/right/top/bottom: 0 }
}
@keyframes slide-in {
  100% { left/right/top/bottom: 0 }
}

Créditos

• Scroll Animations with React, escrito originalmente por Lydia Hallie