Реализация 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 лет.