Комбинирование с другими библиотеками анимации

fullPage.js управляет прокруткой на уровне секций и слайдов, перехватывая нативный scroll и заменяя его на контролируемую навигацию. Это означает, что любые сторонние анимации должны синхронизироваться не с прокруткой страницы, а с событиями, генерируемыми библиотекой.

Ключевые точки интеграции:

  • Жизненный цикл секции:

    • afterLoad
    • onLeave

  • Жизненный цикл слайда:

    • afterSlideLoad
    • onSlideLeave

Эти события служат триггерами для запуска или остановки анимаций.

Интеграция с GSAP

GSAP (GreenSock Animation Platform) — один из наиболее мощных инструментов для анимации. Его использование с fullPage.js позволяет создавать сложные последовательности с высокой производительностью.

Базовый пример

new fullpage('#fullpage', {
  afterLoad: function(origin, destination, direction) {
    if (destination.index === 1) {
      gsap.from('.box', { opacity: 0, y: 100, duration: 1 });
    }
  },
  onLeave: function(origin, destination, direction) {
    if (origin.index === 1) {
      gsap.to('.box', { opacity: 0, y: -100, duration: 0.5 });
    }
  }
});

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

Для сложных сцен используется gsap.timeline():

let tl = gsap.timeline({ paused: true });

tl.from('.title', { y: 50, opacity: 0 })
  .from('.subtitle', { y: 50, opacity: 0 }, "-=0.3")
  .from('.image', { scale: 0.8, opacity: 0 }, "-=0.5");

new fullpage('#fullpage', {
  afterLoad: function(origin, destination) {
    if (destination.index === 2) {
      tl.play();
    }
  },
  onLeave: function(origin) {
    if (origin.index === 2) {
      tl.reverse();
    }
  }
});

ScrollTrigger и ограничения

GSAP ScrollTrigger не работает напрямую с fullPage.js, так как последний отключает нативный scroll. Возможные решения:

  • Использование scrollOverflow: true для внутреннего скролла
  • Привязка анимаций к событиям fullPage.js вместо scroll
  • Ручное управление через ScrollTrigger.update()

Интеграция с anime.js

anime.js удобен для декларативных анимаций и последовательностей.

new fullpage('#fullpage', {
  afterLoad: function(origin, destination) {
    if (destination.index === 0) {
      anime({
        targets: '.circle',
        scale: [0, 1],
        opacity: [0, 1],
        duration: 800,
        easing: 'easeOutBack'
      });
    }
  }
});

Повторное использование анимаций

const animation = anime({
  targets: '.item',
  translateX: 250,
  autoplay: false
});

new fullpage('#fullpage', {
  afterLoad: (origin, destination) => {
    if (destination.index === 3) animation.play();
  },
  onLeave: (origin) => {
    if (origin.index === 3) animation.pause();
  }
});

Интеграция с AOS (Animate On Scroll)

AOS ориентирован на события прокрутки, поэтому требует адаптации.

Основной подход

AOS.init({
  disable: true
});

new fullpage('#fullpage', {
  afterLoad: function() {
    AOS.refreshHard();
  }
});

Ограничения

  • Анимации срабатывают не по scroll, а при смене секции
  • Возможны конфликты с позиционированием элементов
  • Требуется ручное обновление

Интеграция с Lottie (Bodymovin)

Lottie позволяет использовать JSON-анимации, экспортированные из After Effects.

const anim = lottie.loadAnimation({
  container: document.getElementById('lottie'),
  renderer: 'svg',
  loop: false,
  autoplay: false,
  path: 'animation.json'
});

new fullpage('#fullpage', {
  afterLoad: function(origin, destination) {
    if (destination.index === 1) {
      anim.goToAndPlay(0, true);
    }
  },
  onLeave: function(origin) {
    if (origin.index === 1) {
      anim.stop();
    }
  }
});

CSS-анимации и классы

fullPage.js активно использует классы:

  • active
  • fp-completely

Это позволяет запускать CSS-анимации без JavaScript.

.section .fade-in {
  opacity: 0;
  transform: translateY(30px);
  transition: all 0.6s ease;
}

.section.active .fade-in {
  opacity: 1;
  transform: translateY(0);
}

Использование с задержками

.section.active .item:nth-child(1) { transition-delay: 0.2s; }
.section.active .item:nth-child(2) { transition-delay: 0.4s; }
.section.active .item:nth-child(3) { transition-delay: 0.6s; }

Синхронизация состояния

При использовании нескольких библиотек важно избегать рассинхронизации:

  • Анимации должны:

    • запускаться только при активации секции
    • сбрасываться при выходе

  • Использовать флаги:

let played = false;

afterLoad: function(origin, destination) {
  if (destination.index === 2 && !played) {
    startAnimation();
    played = true;
  }
}

Управление производительностью

Одновременное использование нескольких библиотек может привести к:

  • падению FPS
  • утечкам памяти
  • лагам при переключении секций

Практики оптимизации

  • Отключение анимаций вне экрана
  • Использование will-change
  • Минимизация repaint/reflow
  • Удаление слушателей при onLeave

Асинхронные анимации и задержки

fullPage.js не ожидает завершения анимаций. Для контроля:

onLeave: function(origin, destination, direction) {
  return new Promise(resolve => {
    gsap.to('.box', {
      opacity: 0,
      duration: 1,
      onComplete: resolve
    });
  });
}

Важно учитывать, что не все версии fullPage.js поддерживают асинхронные возвраты — иногда требуется блокировка вручную через setAllowScrolling(false).

Комбинирование нескольких библиотек

Пример одновременного использования GSAP и Lottie:

afterLoad: function(origin, destination) {
  if (destination.index === 4) {
    gsap.from('.text', { y: 50, opacity: 0 });
    lottieAnim.play();
  }
}

Принципы:

  • Одна библиотека — одна зона ответственности
  • Избегать дублирования эффектов
  • Централизованное управление событиями

Частые проблемы

Анимации не запускаются

  • Проверка индексов секций
  • Убедиться, что DOM загружен

Резкие переходы

  • Несовпадение easing между fullPage.js и библиотекой

Дублирование анимаций

  • Отсутствие сброса состояния

Конфликты transform

  • Несколько библиотек изменяют transform одного элемента

Стратегии организации кода

Модульный подход

function initSection1() {
  return gsap.timeline({ paused: true });
}

const sectionAnimations = {
  0: initSection1(),
  1: initSection2()
};

afterLoad: function(origin, destination) {
  sectionAnimations[destination.index]?.play();
}

Хранение состояния

const state = {
  animations: {},
  initialized: {}
};

Использование Intersection Observer (альтернатива)

Внутри секций с прокруткой (scrollOverflow: true) можно использовать Intersection Observer:

const observer = new IntersectionObserver(entries => {
  entries.forEach(entry => {
    if (entry.isIntersecting) {
      animate(entry.target);
    }
  });
});

Тестирование и отладка

  • Проверка:

    • скорости анимаций
    • корректности триггеров

  • Использование:

    • console.log в событиях fullPage.js
    • devtools performance profiler

  • Временное отключение анимаций для изоляции проблем

Расширенные сценарии

Параллакс

С помощью GSAP:

afterLoad: function(origin, destination) {
  gsap.to('.bg', {
    y: -100,
    scrollTrigger: false
  });
}

Интерактивные сцены

Комбинация событий мыши и fullPage.js:

document.addEventListener('mousemove', e => {
  gsap.to('.cursor', {
    x: e.clientX,
    y: e.clientY
  });
});

Управление жизненным циклом

При динамической подгрузке секций:

fullpage_api.reBuild();

Анимации должны инициализироваться повторно.

Вывод ключевых принципов

  • fullPage.js — источник событий, не scroll
  • Все анимации привязываются к lifecycle-хукам
  • Внешние библиотеки требуют ручной синхронизации
  • Производительность — критический фактор при комбинировании
Оглавление