Создаем лендинг сайт с нуля: framer-motion анимация скролла #13

Сегодня реализуем анимацию появления секций при скролле лендинга с помощью библиотеки анимаций framer-motion.

Полезные ссылки:

• Шаблон лендинга, который мы будем делать, доступен в Figma по ссылке.
• Код данного урока доступен в репозитории GitHub по ссылке.
• Подписывайтесь на мой Дзен канал

Настраиваем анимацию секций при скролле

Сделаем анимацию на примере одной секции, остальной код можно посмотреть в моем репозитории GitHub.

код Catalogue.jsx

import { cardItems } from '@/app/cardItems';
import ProductCard from '../blocks/ProductCard';
import { motion } from 'motion/react';
export default function Catalogue() {
  const variant = {
    visible: { opacity: 1, y: '0px' },
    hidden: { opacity: 0, y: '200px' },
  };
  return (
    <motion.section
      transition={{ duration: 0.8 }}
      variants={variant}
      initial='hidden'
      whileInView='visible'
      viewport={{ once: true, amount: 'some' }}
      id='products'
      className='w-full px-5 mx-auto max-w-screen-xl py-12 lg:py-32'
    >
      <div className='grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-14 lg:gap-10 w-full'>
        {cardItems.map((item, index) => (
          <ProductCard key={index} item={item} />
        ))}
      </div>
    </motion.section>
  );
}

Описываем контрольные точки анимации, в данном случае изначальную и анимацию появления.

В данном примере мы анимируем прозрачность блока и его движение по оси y, он будет плавно двигаться снизу вверх.

const variant = {
  visible: { opacity: 1, y: '0px' },
  hidden: { opacity: 0, y: '200px' },
};

Пакет анимаций motion позволяет нам анимировать блоки с помощью конструкции, в которой мы добавляем к названию блока motion.имя_блока , а внутри этого блока с помощью атрибутов описываем поведение анимации.

<motion.section
transition={{ duration: 0.8 }}
variants={variant}
initial='hidden'
whileInView='visible'
viewport={{ once: true, amount: 'some' }}

В данном случае мы задаем длительность анимации в 0.8 секунды, инициализируем наш объект с описанными анимациями и присваиваем каждому событию свое значение.

В viewport задаем срабатывание анимации всего 1 раз, значение amount позволяет указать, какая часть блока должна появиться в зоне видимости, чтобы сработала анимация.

Остальные секции делаем по такому же принципу.

В следующих статьях настроим метатеги для нашего лендинга.