Фреймворк React-reveal

Существуют разные способы создания анимации в приложении ReactJS. Зачастую разработчики используют только возможности CSS, добавляя классы в HTML-теги. Это хороший метод, но есть и другие. Один из них — React Reveal.

React Reveal представляет собой анимационный фреймворк для React. В этом фреймворке есть как основные простые анимации (отражение, масштабирование, постепенное исчезновение, вращение), так и более сложные анимации.

Фреймворк позволяет управлять анимациями посредством props. К примеру, вы сможете это делать, задавая дополнительные настройки: задержку, расстояние, положение, каскад и т. п. Кроме того, допускается использование кастомных CSS-эффектов, серверного рендеринга, компонентов высокого порядка. А если вы ещё и любите анимацию прокрутки, то React Reveal вам точно подойдёт.

import Fade from 'react-reveal/Fade';

<Fade top>
    <h1>Title</h1>
</Fade>

Посмотрите на следующую анимацию прокрутки:

Как видите, мы имеем пять блоков, каждый их которых обладает полноэкранной страницей и внутренним заголовком. Вот как это реализуется:

import React, { Component, Fragment } from 'react';
import Fade from 'react-reveal/Fade';

const animateList = [1, 2, 3, 4, 5];

export default class ReactReveal extends Component {
    render() {
        return (
            <Fragment>
                {animateList.map((item, key) => (
                    <div style={styles.block} key={key}>
                        <Fade top>
                            <h1 style={styles.title}>{`block ${item}`}</h1>                       
                        </Fade>
                    </div>
                ))}
            </Fragment>
        );
    }
}

const styles = {
    block: {
        display: 'flex',
        alignItems: 'center',
        justifyContent: 'center',
        width: '100%',
        height: '100%',
        background: '#000',
        borderBottom: '1px solid rgba(255,255,255,.2)',
    },
    title: {
        textAlign: 'center',
        fontSize: 100,
        color: '#fff',
        fontFamily: 'Lato, sans-serif',
        fontWeight: 100,
    },
};

Здесь мы создаём константу animateList (массив содержит пять элементов). Далее, после применения метода массива map, вы уже сможете рендерить каждый элемент в компонентах Fade и вставлять элементы в заголовок. Стили, которые определены в константе styles, характеризуются короткими CSS-стилями для блока и заголовка. Итого получаем пять блоков с анимацией Fade сверху. Как видите, это совсем несложно.

Источник — «5 Ways to animate a React app».