quick-cast v2.0.1

QuickCast Animation Library

Beta · In Development · Unstable

QuickCast — это лёгкая библиотека для анимаций на странице. На данный момент доступны две основные анимации: слайдер (Slider) и аккордеон (Accordion). В будущем планируются новые эффекты (например: «бегущая строка», «toggle-бары» и т. д.).

• Установка
• Базовая настройка (брейкпоинты)
• Работа со Slider
  • selectors
  • animation
  • behavior
  • Колбэки и кастомизация
  • Пример использования
• Accordion
  • selectors
  • animation
  • behavior
  • Колбэки и кастомизация
  • Пример использования (Accordion)
• API колбэков (qcApi)
  • qcApi в Slider
  • qcApi в Accordion
• В разработке

Установка

Требуется обязательное покдлючение последней версии GSAP перед QC

npm install gsap
npm install quick-cast

или

<script src="https://cdn.jsdelivr.net/npm/gsap@3.12.7/dist/gsap.min.js"></script>
<script src="https://cdn.jsdelivr.net/gh/Mishka122/quick-cast@main/dist/prod/qcast.min.js"></script>

Особенности

• Гибкая настройка брейкпоинтов (брейкпоинты отвечают за классификацию устройств: mobile, tablet, desktop).
• Простая инициализация анимации через единый класс Cast.
• Две готовые анимации: slider и accordion.
• Поддержка колбэков для управления логикой во время анимации.
• Возможность использования пресетов usePreset или полной кастомизации анимации через колбэк useCustom.

Базовая настройка (брейкпоинты)

Перед использованием любой анимации (не обязательно, если устраивают значения по умолчанию), вы можете задать собственные брейкпоинты под мобильную и планшетную версии. Это делается через:

new Cast("settings", {
  mobileMax: 480, // Максимальная ширина для mobile
  tabletMax: 992, // Максимальная ширина для tablet
});

По умолчанию, если вы не вызываете "settings", mobileMax будет 480, а tabletMax — 992.

Использование анимаций

Библиотека предоставляет класс Cast, который вы вызываете с нужным типом анимации и объектом опций.

new Cast("тип_анимации", {
  /* ...настройки... */
});

Доступные типы на данный момент:

• slider — анимация-слайдер
• accordion — анимация-аккордеон

Slider

Объект настроек для слайдера может содержать следующие поля (все поля — необязательные, кроме target). Ниже основные категории: selectors, animation, behavior, а также колбэки.

selectors

animation

behavior

callbacks & customization

{ qcApi } для слайдера содержит: direction, currentSlide, previousSlide, nextSlide, previousSlide2, nextSlide2 | Параметр | Тип | Описание | |---|---|---| |onStart|function|Вызывается в начале анимации. Аргументом передаётся объект { qcApi }, содержащий вспомогательные методы.| |onComplete|function|Вызывается в конце анимации, также получает { qcApi }.| |usePreset|string|Название преднастроенного пресета анимации (Доступный пресет: classic.opacity).| |useCustom|function|Полная ручная кастомизация анимации. При задании управление анимацией передаётся этой функции, все остальные параметры игнорируются, аргумент — { qcApi }.|

Пример использования Slider

const swiperFirst = new Cast("slider", {
  target: ".swiper", // главный селектор блока, где будет слайдер
  devices: "desktop", // работать только на десктопе
  selectors: {
    paginationContainer: ".pagination",
    // ... прочие селекторы
  },
  animation: {
    duration: 0.2,
    ease: "power1.inOut",
  },
  behavior: {
    pagination: true,
    infinity: true,
    swipe: true,
  },
  onStart: ({ qcApi }) => {
    console.log("Slider started, direction:", qcApi.direction);
  },
  // ... при желании onComplete, usePreset, useCustom и т.п.
});

Accordion

Объект настроек для аккордеона имеет схожую структуру: target (обязательный), devices, selectors, animation, behavior, колбэки.

selectors

animation

behavior

callbacks & customization

{ qcApi } для аккордеона содержит: currentPanel, previousPanel, event. | Параметр | Тип | Описание | |---|---|---| |onStart|function|Вызывается в начале открытия/закрытия, получает { qcApi }.| |onComplete|function|Вызывается в конце открытия/закрытия, также получает { qcApi }.| |usePreset|string|Название пресета анимации (Доступный пресет: classic).| |useCustom|function|Полная ручная кастомизация анимации. При задании управление анимацией передаётся этой функции, все иные параметры игнорируются, аргумент — { qcApi }.|

Пример использования Accordion

new Cast("accordion", {
  target: ".faq-accordion",
  devices: "mobile,desktop", // Например, работать на мобилке и десктопе
  selectors: {
    panels: ".panel",
    header: ".panel-header",
    content: ".panel-content",
  },
  animation: {
    delayStart: 0,
    durationStart: 0.8,
    easeStart: "power1.inOut",
    // ...
  },
  behavior: {
    initialPanel: 1, // Открыть вторую панель при загрузке (считаем с 0)
  },
  onStart: ({ qcApi }) => {
    console.log("Accordion onStart, currentPanel:", qcApi.currentPanel);
  },
});

API колбэков (qcApi)

Во всех колбэках (onStart, onComplete, useCustom и т. д.) первым аргументом приходит объект, содержащий поле qcApi. С его помощью вы можете взаимодействовать с элементами анимации.

qcApi в Slider

Для слайдера slider доступны геттеры:

qcApi.currentSlide;
qcApi.previousSlide;
qcApi.nextSlide;
qcApi.previousSlide2;
qcApi.nextSlide2;
qcApi.direction;

• currentSlide — индекс (или ссылка) на текущий слайд.
• previousSlide, previousSlide2 — предыдущий слайд и «ещё на один» до предыдущего (если нужно).
• nextSlide, nextSlide2 — следующий слайд и «последующий» за ним.
• direction — направление прокрутки ("forward", "backward", etc.).

qcApi в Accordion

Для аккордеона accordion состав такой:

qcApi.currentPanel;
qcApi.previousPanel;
qcApi.event;

• currentPanel — индекс (или ссылка) на текущую панель, которая открывается.
• previousPanel — индекс (или ссылка) на предыдущую открытую панель.
• event — тип события, например "open", "close" и т. д.

В разработке

• Перенос бибилотеки на TS.
• Новые анимации: бегущая строка (marquee), toggle-бары и прочие эффекты.
• Улучшенный механизм пресетов, расширение библиотеки пресетов.
• Расширенная документация и примеры.

Следите за обновлениями, библиотека находится в состоянии активной разработки и может изменяться (см. теги beta, in-development, unstable).