ilia/gsap-carousel
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
Files
48c8f7b1cfbe85a0b90349703cecb7d3a9b4e55c
gsap-carousel/README.md
Ilia Mashkov 48c8f7b1cf chore: remove duplicated contend from readme
2026-02-11 13:41:11 +03:00

14 KiB
Raw Blame History

GSAP Carousel

🌐 English | 🇷🇺 Русский

Demo

🌍 Scroll to top | 🇷🇺 Русский

GSAP Carousel

React-based UI component developed to explore advanced animation patterns using GSAP. This project focuses on synchronizing complex circular transitions with a dynamic content carousel.

Technical Highlights

  • GSAP Integration: Implementation of smooth, high-performance animations for state transitions
  • Circular Data Visualization: An interactive timeline with selectable time periods
  • Adaptive Layout: Fully responsive architecture supporting mobile, tablet, and desktop viewports
  • Custom Navigation: Bespoke UI controls for seamless event browsing

🚀 Technologies

  • React 19 - User interface library
  • TypeScript 5 - Typed JavaScript
  • GSAP - Smooth animation library
  • Swiper - Modern carousel library
  • Webpack 5 - Module bundler
  • SCSS - CSS preprocessor with modules
  • Jest - Testing framework
  • ESLint + Prettier - Code linting and formatting

📋 Requirements

  • Node.js >= 18.0.0
  • pnpm >= 8.0.0

🛠️ Installation

  1. Clone the repository:
git clone <repository-url>
cd gsap-carousel
  1. Install dependencies:
pnpm install

🎯 Available Commands

Development

# Start dev-server on port 3000
pnpm dev

The application will be available at: http://localhost:3000

Build

# Production build
pnpm build:prod

# Development build
pnpm build:dev

The build result will be in the dist/ folder

Testing

# Run all unit tests
pnpm test:unit

# Check TypeScript types
pnpm type-check

Linting

# Check JavaScript/TypeScript code
pnpm lint

# Auto-fix errors
pnpm lint --fix

# Check styles (SCSS)
pnpm lint:styles

# Auto-fix styles
pnpm lint:styles --fix

Storybook

# Run Storybook for component development
pnpm storybook

# Build static version of Storybook
pnpm build-storybook

Pre-push Checks

# Run all checks before push
pnpm pre-push

This command runs:

  • ✅ TypeScript type checking
  • ✅ Code linting
  • ✅ Style linting
  • ✅ Unit tests
  • ✅ Production build

📁 Project Structure

gsap-carousel/
├── config/              # Build configuration
│   ├── build/          # Webpack configuration
│   ├── jest/           # Jest configuration
│   └── storybook/      # Storybook configuration
├── dist/               # Production build (generated)
├── src/                # Source code
│   ├── app/           # Root application component
│   ├── entities/      # Business entities (data types)
│   ├── shared/        # Reusable components and utilities
│   │   ├── assets/   # Static resources (SVG, images)
│   │   └── ui/       # UI components (Button, Card)
│   └── widgets/       # Complex components (TimeFrameSlider)
├── .husky/            # Git hooks
├── package.json       # Dependencies and scripts
└── tsconfig.json      # TypeScript configuration

🎨 Main Components

TimeFrameSlider

The main application widget combining a circular timeline and an events carousel.

Features:

  • Interactive circular chart with periods
  • Smooth GSAP animations during transitions
  • Responsive design for mobile, tablet, and desktop
  • Custom navigation

CircleTimeline

A circular timeline with period points.

Features:

  • Auto-rotation to the active period
  • Click on points to switch periods
  • Period title animations

EventsCarousel

Historical events carousel using Swiper.

Features:

  • Adaptive number of slides
  • Custom navigation
  • Smooth appearance/disappearance animation

⚡ Performance Optimization

The project is optimized for production:

  • ✅ Code splitting - chunk separation (vendors, runtime, main)
  • ✅ Tree shaking - removal of unused code
  • ✅ Gzip compression - file compression (~68% size reduction)
  • ✅ Minification - JS and CSS minification
  • ✅ CSS Modules - isolated component styles
  • ✅ Babel caching - caching for fast rebuilds

Bundle size:

  • Uncompressed: ~371 KiB
  • Gzipped: ~117 KiB

🧪 Testing

The project is covered by unit tests:

  • ✅ Component tests (Button, Card, CircleTimeline, TimeFrameSlider, EventsCarousel)
  • ✅ Utility tests (calculateCoordinates)
  • ✅ Mocks for GSAP and Swiper
  • ✅ 39 tests, 100% successful

📱 Responsiveness

The application is adapted for all devices:

  • Desktop (>1440px) - Full version with circular chart
  • Tablet (768px - 1024px) - Optimized version
  • Mobile (<768px) - Simplified version with bottom navigation

🔧 Configuration

Webpack

  • Babel for transpilation (faster than ts-loader)
  • CSS Modules for style isolation
  • SVGR for importing SVG as React components
  • Hot Module Replacement for development
  • Bundle Analyzer for size analysis

TypeScript

  • Strict mode enabled
  • Path aliases (@/* → src/*)
  • Type checking separate from build

ESLint

  • Rules for React, TypeScript, Jest
  • Prettier integration
  • Import sorting

🤝 Git Hooks

Pre-push hook automatically runs:

  1. Type checking
  2. ESLint
  3. Stylelint
  4. Unit tests
  5. Production build

This ensures that only working code enters the repository.

📝 License

ISC

Happy coding! 🚀

🌍 Scroll to top | 🌐 English

GSAP Carousel

React-компонент UI для изучения продвинутых паттернов анимации с использованием GSAP. Проект фокусируется на синхронизации сложных круговых переходов с динамической каруселью контента.

Технические особенности

  • Интеграция GSAP: Реализация плавных высокопроизводительных анимаций для переходов между состояниями
  • Круговая визуализация данных: Интерактивная временная шкала с выбираемыми периодами
  • Адаптивный макет: Полностью адаптивная архитектура, поддерживающая мобильные устройства, планшеты и десктопы
  • Кастомная навигация: Собственные элементы управления UI для удобного просмотра событий

🚀 Технологии

  • React 19 - библиотека для создания пользовательских интерфейсов
  • TypeScript 5 - типизированный JavaScript
  • GSAP - библиотека для плавных анимаций
  • Swiper - современная библиотека для каруселей
  • Webpack 5 - сборщик модулей
  • SCSS - препроцессор CSS с модулями
  • Jest - фреймворк для тестирования
  • ESLint + Prettier - линтинг и форматирование кода

📋 Требования

  • Node.js >= 18.0.0
  • pnpm >= 8.0.0

🛠️ Установка

  1. Клонируйте репозиторий:
git clone <repository-url>
cd gsap-carousel
  1. Установите зависимости:
pnpm install

🎯 Доступные команды

Разработка

# Запуск dev-сервера на порту 3000
pnpm dev

Приложение будет доступно по адресу: http://localhost:3000

Сборка

# Production сборка
pnpm build:prod

# Development сборка
pnpm build:dev

Результат сборки будет в папке dist/

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

# Запуск всех unit-тестов
pnpm test:unit

# Проверка типов TypeScript
pnpm type-check

Линтинг

# Проверка JavaScript/TypeScript кода
pnpm lint

# Автоматическое исправление ошибок
pnpm lint --fix

# Проверка стилей (SCSS)
pnpm lint:styles

# Автоматическое исправление стилей
pnpm lint:styles --fix

Storybook

# Запуск Storybook для разработки компонентов
pnpm storybook

# Сборка статической версии Storybook
pnpm build-storybook

Pre-push проверки

# Запуск всех проверок перед push
pnpm pre-push

Эта команда выполняет:

  • ✅ Проверку типов TypeScript
  • ✅ Линтинг кода
  • ✅ Линтинг стилей
  • ✅ Запуск unit-тестов
  • ✅ Production сборку

📁 Структура проекта

gsap-carousel/
├── config/              # Конфигурация сборки
│   ├── build/          # Webpack конфигурация
│   ├── jest/           # Jest конфигурация
│   └── storybook/      # Storybook конфигурация
├── dist/               # Production сборка (генерируется)
├── src/                # Исходный код
│   ├── app/           # Корневой компонент приложения
│   ├── entities/      # Бизнес-сущности (типы данных)
│   ├── shared/        # Переиспользуемые компоненты и утилиты
│   │   ├── assets/   # Статические ресурсы (SVG, изображения)
│   │   └── ui/       # UI компоненты (Button, Card)
│   └── widgets/       # Сложные компоненты (TimeFrameSlider)
├── .husky/            # Git hooks
├── package.json       # Зависимости и скрипты
└── tsconfig.json      # Конфигурация TypeScript

🎨 Основные компоненты

TimeFrameSlider

Главный виджет приложения, объединяющий круговую временную шкалу и карусель событий.

Особенности:

  • Интерактивная круговая диаграмма с периодами
  • Плавные GSAP анимации при переключении
  • Адаптивный дизайн для мобильных, планшетов и десктопа
  • Кастомная навигация

CircleTimeline

Круговая временная шкала с точками периодов.

Особенности:

  • Автоматический поворот к активному периоду
  • Клик по точкам для переключения
  • Анимация заголовков периодов

EventsCarousel

Карусель исторических событий с использованием Swiper.

Особенности:

  • Адаптивное количество слайдов
  • Кастомная навигация
  • Плавная анимация появления/исчезновения

⚡ Оптимизация производительности

Проект оптимизирован для production:

  • ✅ Code splitting - разделение на chunks (vendors, runtime, main)
  • ✅ Tree shaking - удаление неиспользуемого кода
  • ✅ Gzip compression - сжатие файлов (~68% уменьшение размера)
  • ✅ Minification - минификация JS и CSS
  • ✅ CSS Modules - изолированные стили компонентов
  • ✅ Babel caching - кеширование для быстрой пересборки

Размер бандла:

  • Uncompressed: ~371 KiB
  • Gzipped: ~117 KiB

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

Проект покрыт unit-тестами:

  • ✅ Тесты компонентов (Button, Card, CircleTimeline, TimeFrameSlider, EventsCarousel)
  • ✅ Тесты утилит (calculateCoordinates)
  • ✅ Моки для GSAP и Swiper
  • ✅ 39 тестов, 100% успешных

📱 Адаптивность

Приложение адаптировано для всех устройств:

  • Desktop (>1440px) - полная версия с круговой диаграммой
  • Tablet (768px - 1024px) - оптимизированная версия
  • Mobile (<768px) - упрощенная версия с навигацией внизу

🔧 Конфигурация

Webpack

  • Babel для транспиляции (быстрее ts-loader)
  • CSS Modules для изоляции стилей
  • SVGR для импорта SVG как React компонентов
  • Hot Module Replacement для разработки
  • Bundle Analyzer для анализа размера

TypeScript

  • Strict mode включен
  • Path aliases (@/* → src/*)
  • Проверка типов отдельно от сборки

ESLint

  • Правила для React, TypeScript, Jest
  • Prettier интеграция
  • Import sorting

🤝 Git Hooks

Pre-push hook автоматически запускает:

  1. Type checking
  2. ESLint
  3. Stylelint
  4. Unit tests
  5. Production build

Это гарантирует, что в репозиторий попадает только рабочий код.

📝 Лицензия

ISC

Приятной разработки! 🚀

Reference in New Issue View Git Blame Copy Permalink