https://github.com/askomarov/vite-gsap-scroll-cards
https://github.com/askomarov/vite-gsap-scroll-cards
gsap scrolltrigger vite
Last synced: 3 months ago
JSON representation
- Host: GitHub
- URL: https://github.com/askomarov/vite-gsap-scroll-cards
- Owner: askomarov
- Created: 2024-12-17T10:12:35.000Z (over 1 year ago)
- Default Branch: main
- Last Pushed: 2024-12-19T12:21:39.000Z (over 1 year ago)
- Last Synced: 2025-07-11T15:32:43.029Z (about 1 year ago)
- Topics: gsap, scrolltrigger, vite
- Language: CSS
- Homepage: https://askomarov.github.io/vite-gsap-scroll-cards/
- Size: 21.5 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Vite + GSAP ScrollTrigger
Этот проект демонстрирует использование Vite и GSAP ScrollTrigger для создания анимаций при скролле.
## Описание
При скролле страницы появляются карточки с информацией. На десктопе заголовок фиксирован позади карточек, и пункты пагинации подсвечиваются в зависимости от текущей карточки.
## Файлы
### main.js
Основной файл JavaScript, который инициализирует анимации с использованием GSAP и ScrollTrigger.
- При загрузке страницы инициализируется функция `animateSection`, которая создает анимации для карточек в зависимости от размера экрана (десктоп или мобильный).
- На десктопе заголовок фиксирован позади карточек, и пункты пагинации подсвечиваются при скролле.
- На мобильных устройствах карточки появляются с эффектом плавного появления и смещения.
### style.css
Файл стилей, который содержит стили для карточек, контейнеров и элементов пагинации.
### index.html
Основной HTML файл, который содержит структуру страницы с контейнером для анимаций и карточками.
## Установка и запуск
1. Установите зависимости:
```bash
npm install
```
2. Запустите проект:
```bash
npm run dev
```
Откройте браузер и перейдите по адресу `http://localhost:3000`, чтобы увидеть анимации в действии.