В этом уроке мы познакомим вас с процессом создания анимации прокрутки в React.js с использованием библиотеки Framer Motion. Этот код позволит вам запустить анимацию для компонента React, когда он появится в области просмотра.

1. Предварительные условия

Прежде чем мы начнем, убедитесь, что на вашем компьютере установлены Node.js и npm. Вам также необходимо иметь базовое понимание React.js и JavaScript.

2. Установка Framer Motion

Следующий шаг — установка библиотеки Framer Motion. Запустите эту команду для установки:

npm install framer-motion

3. Написание кода анимации прокрутки

В ScrollAnimation.js начните с импорта React и Framer-motion и создайте функциональный компонент:

import React from 'react';
import { motion } from "framer-motion";

const ScrollAnimation = () => {
  return (
    <motion.div 
      initial={{ opacity: 0, y: 50 }}
      whileInView={{ opacity: 1, y:0 }}
      viewport={{once:true}}
      transition={{
        ease: "linear",
        duration: 1,
        y: { duration: 0.5 }
      }}
    >
      <h1>Scroll Down!</h1>
    </motion.div>
  )
}

export default ScrollAnimation;

Этот код устанавливает начальную непрозрачность элемента на 0 и смещает ось Y на 50 пикселей. Пока он находится в поле зрения, он установит непрозрачность на 1, а ось Y — на 0, что придаст ему эффект постепенного появления снизу. Мы также установили, чтобы эта анимация запускалась один раз, когда она впервые появляется в области просмотра, чтобы облегчить анимацию и занимать общее время 0,5 секунды.

6. Реализация компонента анимации прокрутки

В файл App.js импортируйте компонент ScrollAnimation и добавьте его в метод рендеринга:

import React from 'react';
import './App.css';
import ScrollAnimation from './ScrollAnimation';

function App() {
  return (
    <div className="App">
      <ScrollAnimation />
    </div>
  );
}

export default App;

7. Тестирование анимации прокрутки

Наконец, запустите свое приложение с помощью:

npm start

Перейдите к http://localhost:3000 в браузере, чтобы увидеть в действии только что созданную анимацию прокрутки!

Это всего лишь простой пример, но вы можете настроить анимацию по своему усмотрению, используя API Framer Motion.

Спасибо за чтение. Если вам понравился этот блог, ознакомьтесь с другими моими уроками по разработке программного обеспечения на моем личном сайте здесь.

Спасибо, что дочитали до конца. Пожалуйста, подумайте о том, чтобы подписаться на автора и эту публикацию. Посетите Stackademic, чтобы узнать больше о том, как мы демократизируем бесплатное образование в области программирования во всем мире.