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

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

Превью | Канал dzen.ru/in9var

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

Часть 1. Подготовка и настройка проекта

Часть 2. Настройка конфигурации и установка необходимых библиотек

Часть 3. Создание CSS-переменных и верстка блока Header

Часть 4. Верстка секции Hero, создание компонента Button

Часть 5. Верстка секции About

Часть 6. Верстка секции Gallery

Часть 7. Верстка секции WhyUs

Часть 8. Верстка секции Catalogue

Часть 9. Верстка секции Map

Часть 10. Верстка секции Footer

Часть 11. Создание якорных ссылок, рефакторинг

Часть 12. Создание мобильного меню

Часть 13. Анимация секций при скролле

Часть 14. Установка метаданных

Часть 15. Настройка Favicon.ico

Часть 16. Настройка счетчика Яндекс Метрики

Часть 17. Публикуем проект на хостинге

• Демо–проект лендинга можно посмотреть по ссылке.
• Шаблон лендинга, который мы будем делать, доступен в 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 позволяет указать, какая часть блока должна появиться в зоне видимости, чтобы сработала анимация.

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

В dev-режиме, мы получим вот такую анимацию секций:

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

Код данного урока доступен в репозитории GitHub по ссылке.

Не забудь подписаться на канал, а также заходи на мой блог blog.in9var.ru, а также можешь посетить мой основной сайт — in9var.ru.