Реализация Lenis / Locomotive Scroll для плавного скролла

LCP на мобильных просаживается из-за дискретного скролла — пользователи видят дёрганный parallax и низкий FPS. Решение — Lenis или Locomotive Scroll. Наш опыт: в 50+ проектах мы добились стабильных 60 FPS даже на iPhone SE. Без этих библиотек реализация smooth scrolling выглядит прерывисто, а инерция отсутствует. Для кинематографического эффекта нужна правильная интеграция — мы покажем, как избежать типичных ошибок.

Заказчики всё чаще запрашивают кинематографический скролл — это тренд в вебе. Наша команда, с опытом full-stack разработки более 5 лет, интегрировала обе библиотеки в десятках проектов: от лендингов до сложных SPA. Вот как делать это правильно.

Какую библиотеку выбрать: Lenis или Locomotive Scroll?

Первая дилемма — выбор библиотеки. Lenis легче Locomotive Scroll в 3 раза (5 KB против 15 KB в gzip), активно поддерживается в репозитории Lenis и не привязывает к определённой HTML-структуре. Согласно документации, библиотека оптимизирована для современных бандлеров. Locomotive Scroll v2 уместен, если нужен встроенный parallax без дополнительных библиотек, но для кастомных анимаций Lenis даёт больше контроля. FPS на мобильных у Lenis выше в 1.5-2 раза (60 FPS против 30-40 FPS). Экономия бюджета на лицензиях по сравнению с коммерческими аналогами существенна.

Как установить Lenis и запустить плавный скролл

Установка через пакетный менеджер:

npm install lenis

Создание экземпляра с настройками:

import Lenis from 'lenis';

const lenis = new Lenis({
  duration: 1.2,
  easing: (t) => Math.min(1, 1.001 - Math.pow(2, -10 * t)),
  orientation: 'vertical',
  smoothWheel: true,
  touchMultiplier: 2,
});

function raf(time: number) {
  lenis.raf(time);
  requestAnimationFrame(raf);
}
requestAnimationFrame(raf);

Как интегрировать Lenis с GSAP ScrollTrigger

Это основной кейс: Lenis управляет скроллом, ScrollTrigger — анимациями. После создания Lenis подпишитесь на событие scroll и обновляйте ScrollTrigger. Замените стандартный ticker GSAP на вызов lenis.raf.

import gsap from 'gsap';
import ScrollTrigger from 'gsap/ScrollTrigger';

gsap.registerPlugin(ScrollTrigger);

lenis.on('scroll', ScrollTrigger.update);

gsap.ticker.add((time) => {
  lenis.raf(time * 1000);
});
gsap.ticker.lagSmoothing(0);

Благодаря этому анимации ScrollTrigger синхронизируются с виртуальным скроллом. Экономия времени на отладку — до 2 часов типичных багов с рассинхроном.

Как интегрировать Lenis с React?

React-интеграция требует контекста и хука. Создайте LenisProvider и используйте useLenis для программного скролла. Это упрощает реализацию React smooth scroll.

import { createContext, useContext, useEffect, useRef } from 'react';
import Lenis from 'lenis';

const LenisContext = createContext<Lenis | null>(null);

export const LenisProvider: React.FC<{ children: React.ReactNode }> = ({ children }) => {
  const lenisRef = useRef<Lenis | null>(null);
  useEffect(() => {
    const lenis = new Lenis();
    lenisRef.current = lenis;
    const raf = (time: number) => lenis.raf(time);
    requestAnimationFrame(raf);
    return () => { lenis.destroy(); };
  }, []);
  return <LenisContext.Provider value={lenisRef.current}>{children}</LenisContext.Provider>;
};

export const useLenis = () => useContext(LenisContext);

Важно создавать экземпляр в useEffect и вызывать destroy при размонтировании.

Что делать с типичными ошибками

Вот пошаговая инструкция для решения частых проблем:

1. Динамический контент: после добавления элементов через fetch или React-состояния вызовите lenis.resize() или ScrollTrigger.refresh().
2. Вложенные скроллируемые контейнеры: исключите модальные окна из виртуального скролла, добавив им атрибут data-lenis-prevent.
3. Мобильные устройства: отключите smoothTouch на iOS (опция smoothTouch: false) и используйте will-change: transform на parallax-элементах для принудительного GPU-ускорения.
4. Производительность: отслеживайте FPS с помощью lenis.on('scroll', ...). Если на слабых устройствах просадки ниже 50 FPS, уменьшите параметр duration до 0.8 или отключите плавность для старых Android-версий.

Сравнение времени интеграции: самописное решение vs Lenis

Что входит в работу по интеграции

• Подбор и настройка библиотеки (Lenis / Locomotive) под архитектуру проекта.
• Интеграция с GSAP ScrollTrigger и кастомными анимациями (включая timeline).
• Parallax-эффекты через data-атрибуты или кастомные расчёты.
• Адаптация под мобильные устройства (iOS/Android) с учётом разрешений экрана.
• Решение проблем производительности (ResizeObserver, will-change, оптимизация композитинга).
• Документация кода и обучение команды.
• Техническая поддержка в течение 30 дней после сдачи.

Почему стоит выбрать Lenis для нового проекта?

Наш опыт показывает: Lenis решает 90% задач плавного скролла без лишней магии. Он легко комбинируется с любой анимационной библиотекой (GSAP, Framer Motion, Three.js). Гарантируем, что интеграция под ключ займёт не более 3 дней, включая адаптацию под мобильные и кастомные parallax-эффекты. Экономия бюджета на разработке по сравнению с самописным решением составляет до 40%. Если у вас сложный проект с вложенными скроллируемыми контейнерами или динамической загрузкой — свяжитесь с нами, оценим задачу бесплатно.

Сроки и стоимость

Базовая установка Lenis с плавным скроллом — от 1 дня. Полная интеграция с parallax, ScrollTrigger и React — 2–3 дня. Стоимость рассчитывается индивидуально в зависимости от сложности и объёма работ. Закажите интеграцию сегодня — получите консультацию инженера с опытом более 5 лет.

Фронтенд-разработка React: от аудита до production

Бандл вырос до 3.1 MB gzip — это реальная цифра из проекта, который пришёл к нам на аудит. Причина: moment.js (72 KB) тянул локали для всех 160 языков, lodash импортировался целиком вместо tree-shake, три компонентные библиотеки подключены одновременно. TTFB отличный, но TTI (Time to Interactive) на мобильном — 14 секунд. Пользователи уходили, конверсия упала на 40%. Мы переписали фронтенд: убрали дублирование библиотек, внедрили динамические импорты и SSR. Результат — бандл уменьшился до 850 KB gzip, TTI — 2.1 секунды, LCP — 1.8 с.

Frontend — это не «нарисовать красиво». Это производительность, типизация, рендеринг-стратегия, bundle management и поддерживаемость на годы.

Почему Next.js — стандартный выбор для SEO?

React — наш основной UI-фреймворк для сложных интерфейсов. Next.js — стандартный выбор для проектов с SEO-требованиями или SSR. App Router (с версии 13) принёс React Server Components, streaming и fetch с built-in кешированием. Это реальные преимущества: страница каталога с тысячами товаров рендерится на сервере без отправки логики фильтрации на клиент, JS-бандл меньше на 30%.

Но App Router — другой способ мышления. "use client" нужно ставить осознанно. Реальная ошибка: разработчик помечает весь layout как "use client" из-за одного состояния навигации — и теряет все преимущества RSC. Правило: держать Server Components как можно выше в дереве, "use client" — только для интерактивных листовых компонентов. ISR (Incremental Static Regeneration) — мощный инструмент для контентных сайтов. На каталоге из 50 000 страниц с ISR и CDN — TTFB < 50 ms для любой страницы.

Как TypeScript предотвращает баги в продакшене?

TypeScript обязателен на любом проекте, который планируется поддерживать дольше 3 месяцев или в команде больше одного разработчика. Аргумент «пишем быстро без типов» работает только первые 2 недели. После — баги, связанные с неопределёнными значениями, возникают каждую неделю.

Конкретная польза: рефакторинг API-ответа — изменил тип в одном месте, TypeScript показывает все места, где нужно адаптировать код. Без типов — баг в продакшене через неделю. strict: true в tsconfig.json — обязательно. noImplicitAny, strictNullChecks, strictFunctionTypes. Боль от Type 'undefined' is not assignable в разработке стоит меньше, чем Cannot read properties of undefined в продакшене. tRPC — end-to-end типизация от бэкенда до фронтенда без отдельной схемы — изменяя тип процедуры, вы сразу видите места на фронтенде, требующие правки.

Vue 3 + Nuxt 3 — альтернативный стек для SSR

Vue 3 с Composition API — другой стиль разработки, ближе к React Hooks. <script setup> и composables делают код более переиспользуемым. Nuxt 3 — фреймворк для Vue с SSR/SSG, аналогичный Next.js. useAsyncData и useFetch — встроенные composables с дедупликацией запросов и hydration. Auto-imports удобны, но могут запутывать при debug. Nuxt Content — модуль для Markdown/MDX-файлов, идеален для документации.

Hydration mismatch — специфическая боль SSR на Vue и React. Решение: <ClientOnly> компонент для браузерного контента, suppressHydrationWarning для dynamic timestamps.

Производительность: метрики и инструменты

Bundle analysis — стартовая точка. @next/bundle-analyzer или rollup-plugin-visualizer — запускаем перед каждым мажорным деплоем. Цель: ни одна страница не должна требовать > 200 KB JS gzip для first paint.

Динамические импорты для тяжёлых компонентов:

const RichEditor = dynamic(() => import('@/components/RichEditor'), {
  ssr: false,
  loading: () => <EditorSkeleton />,
});

Редактор (Tiptap, Quill, CodeMirror) — типичные кандидаты на dynamic import. Без этого они попадают в основной бандл. React DevTools Profiler — для поиска лишних ре-рендеров. React.memo, useMemo, useCallback — точечные инструменты. Преждевременная мемоизация всего подряд добавляет overhead без пользы. Профилируйте сначала, оптимизируйте потом.

Виртуализация длинных списков: @tanstack/virtual или react-window рендерят только видимые элементы. Таблица с 50 000 строк: с виртуализацией — 60fps, без — браузер зависает при скролле.

State management: без оверинжиниринга

Для большинства приложений достаточно:

• React Query / TanStack Query — для серверного состояния (данные из API, кеширование, инвалидация)
• Zustand — для глобального клиентского состояния (легковесный, без бойлерплейта Redux)
• React Hook Form — для форм

Redux Toolkit оправдан для очень сложного глобального состояния с большим количеством взаимодействий. Для большинства задач — это overkill. Recoil, Jotai — атомарные подходы для независимых кусков состояния.

CSS и дизайн-система

Tailwind CSS последней версии — наш стандартный выбор для новых проектов. Utility-first, отличная интеграция с компонентными библиотеками (Radix UI, Headless UI), PostCSS pipeline. CSS Modules — альтернатива когда нужна более явная изоляция стилей. Radix UI + Tailwind (Shadcn/ui паттерн) — headless компоненты с полным контролем над стилями. Нет dependency lock-in: компоненты копируются в проект и полностью кастомизируются. Storybook — для документирования компонентной библиотеки. React DevTools Profiler — официальный инструмент от команды React.

Тестирование

E2E тесты через Playwright — для checkout, авторизации, критичных форм. Не для всего подряд: поддержка большой e2e-сюиты дорогая, поэтому выбираем 3-5 ключевых сценариев.

Ориентиры по срокам и состав работ

Стоимость рассчитывается после декомпозиции на компоненты, экраны и интеграции с API. Мы используем N+1 оценку: прибавляем 20% на риски.

Что входит в работу: исходный код в Git, документация по архитектуре и компонентам, доступ к CI/CD, обучение вашей команды (2-3 встречи), гарантия 3 месяца на выявленные баги. Дополнительно — покрытие юнит-тестами ключевых модулей.

У нас 5 лет опыта в фронтенд-разработке, более 50 выполненных проектов, команда из 10 инженеров, владеющих React, Vue, Angular. Работаем с технологиями, описанными в документации React и TypeScript. Дополнительные сведения можно найти в Wikipedia: React и Wikipedia: TypeScript.

Какой стек выбрать для фронтенд-разработки React?

Мы сравниваем инструменты по реальным метрикам. Next.js быстрее Nuxt в сборке SSR на 20–30% при одинаковом размере страницы. TypeScript снижает количество production-багов на 60–70% по сравнению с JavaScript. Экономия на поддержке такого проекта — до 500 000 рублей в год за счёт сокращения времени на отладку. Если вам нужен лёгкий SPA с минимальной стоимостью — достаточно React + Vite. Для контентного сайта с SEO — Next.js с ISR даёт TTFB ниже 50 мс даже при 50 000 страниц.

Получите консультацию по вашему проекту: оценим текущий код и предложим план оптимизации. Закажите аудит — найдём узкие места и покажем, как сократить бюджет без потери качества.