ilia/gsap-carousel
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

chore: remove duplicated contend from readme

Browse Source
This commit is contained in:
Ilia Mashkov
2026-02-11 13:41:11 +03:00
parent 338e8b233b
commit 48c8f7b1cf
1 changed files with 4 additions and 245 deletions
Download Patch File Download Diff File Expand all files Collapse all files

249
README.md
View File

@@ -1,3 +1,5 @@
# GSAP Carousel
---
[🌐 English](#english) | [🇷🇺 Русский](#russian)
@@ -8,249 +10,6 @@
---
# Only Task
A 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:
```bash
git clone <repository-url>
cd gsap-carousel
```
2. Install dependencies:
```bash
pnpm install
```
## 🎯 Available Commands
### Development
```bash
# Start dev-server on port 3000
pnpm dev
```
The application will be available at: http://localhost:3000
### Build
```bash
# Production build
pnpm build:prod
# Development build
pnpm build:dev
```
The build result will be in the `dist/` folder
### Testing
```bash
# Run all unit tests
pnpm test:unit
# Check TypeScript types
pnpm type-check
```
### Linting
```bash
# 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
```bash
# Run Storybook for component development
pnpm storybook
# Build static version of Storybook
pnpm build-storybook
```
### Pre-push Checks
```bash
# 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
---
<a id="english"></a>
---
@@ -259,7 +18,7 @@ ISC
---
# Only Task
# 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.
@@ -512,7 +271,7 @@ ISC
---
# Only Task
# GSAP Carousel
React-компонент UI для изучения продвинутых паттернов анимации с использованием GSAP. Проект фокусируется на синхронизации сложных круговых переходов с динамической каруселью контента.