React GSAP Reveal
Контекст
GSAP - одна из самых мощных библиотек анимаций в вебе. Её можно использовать для создания эффектов появления при прокрутке (когда элементы появляются при входе во viewport), но только в императивном (ручном) стиле.
В коде приложения на React такой подход быстро становится многословным, повторяющимся и неидиоматичным, что снижает желание использовать его систематически и вредит консистентности UI. Декларативные библиотеки для reveal-эффектов существуют, но они не используют всю мощь GSAP. Мне хотелось получить оба: декларативную простоту и мощь GSAP под капотом.
От личного паттерна к публичной библиотеке
Всё началось с паттерна, реализованного в личном проекте:
- 👁️ Один общий IntersectionObserver, оптимизированный через систему подписок, чтобы избежать создания отдельного observer для каждого элемента
- ✨ Интеграция GSAP через слой абстракции, инкапсулированный в React-компонент
Потенциал переиспользуемости стал очевиден довольно быстро. Я постепенно рефакторил, обобщал и параметризовал этот паттерн, пока он не стал достаточно надёжным и строго типизированным для использования в разных проектах.
Следующий шаг был очевиден: превратить его в публичную библиотеку.
Продакшен и публикация
- 🏗️ Выделение из основного проекта: настройка сборки на Vite и структурирование проекта как отдельного npm-пакета
- ⚖️ Соблюдение интеллектуальной собственности: GSAP указан как peer dependency, а не как прямая зависимость, чтобы соответствовать лицензии и позволить пользователю управлять своей версией
- 🤖 CI/CD с помощью GitHub Actions: автоматический деплой демонстрационного сайта на GitHub Pages при каждом push
- 📦 Публикация в npm: соблюдение семантического версионирования с самого начала
- 📖 Документация: подготовка полной документации, охватывающей установку, настройку и варианты использования
- 💬 Обратная связь от сообщества: пост на официальном форуме GSAP для валидации архитектурного подхода. Положительный отклик от участника форума с 2014 года
- 📈 Принятие: пик в 899 загрузок в неделю на момент публикации
Итоги
Этот проект научил меня мыслить как автор библиотеки, а не как потребитель.
На практике библиотека значительно снижает многословность и время разработки, связанные с анимациями при прокрутке: достаточно одного декларативного компонента.
Это также иллюстрирует мой подход к повторяющимся задачам: выявить паттерн, абстрагировать его и сделать переиспользуемым. Здесь я иду дальше - делюсь этим с сообществом.