GSAP интеграция

Для анимации интерфейсов в SvelteKit часто используют библиотеку GSAP (GreenSock Animation Platform). Она предоставляет высокопроизводительные возможности для создания сложных анимаций с гибким управлением временем и последовательностью. Интеграция GSAP в SvelteKit строится на использовании реактивной системы Svelte и жизненного цикла компонентов.

Установка и подключение

GSAP устанавливается через npm:

npm install gsap

После установки библиотеку можно импортировать в компонент:

<script>
  import { gsap } from 'gsap';
</script>

GSAP не требует специфических оберток для Svelte, но важно учитывать особенности SSR (Server-Side Rendering) в SvelteKit. На сервере window и document недоступны, поэтому инициализацию анимаций нужно производить внутри onMount:

<script>
  import { onMount } from 'svelte';
  import { gsap } from 'gsap';

  let box;

  onMount(() => {
    gsap.to(box, { x: 300, duration: 2 });
  });
</script>

<div bind:this={box} class="box">Анимированный блок</div>

<style>
  .box {
    width: 100px;
    height: 100px;
    background-color: #3498db;
  }
</style>

Использование bind:this позволяет получить прямой доступ к DOM-элементу для GSAP, что критично для корректного управления анимациями.

Анимации при входе и выходе компонентов

SvelteKit поддерживает реактивные состояния, что удобно использовать совместно с GSAP для анимаций появления и исчезновения компонентов. Для этого можно комбинировать transition Svelte и GSAP:

<script>
  import { onMount } from 'svelte';
  import { gsap } from 'gsap';

  let visible = false;
  let panel;

  function togglePanel() {
    visible = !visible;
    if (visible) {
      gsap.fromTo(panel, { y: -50, opacity: 0 }, { y: 0, opacity: 1, duration: 0.5 });
    } else {
      gsap.to(panel, { y: -50, opacity: 0, duration: 0.5 });
    }
  }
</script>

<button on:click={togglePanel}>Переключить панель</button>
{#if visible}
  <div bind:this={panel} class="panel">Контент панели</div>
{/if}

<style>
  .panel {
    width: 300px;
    height: 200px;
    background: #2ecc71;
    margin-top: 10px;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
  }
</style>

Такой подход позволяет плавно управлять входом и выходом элементов, сохраняя преимущества реактивности Svelte.

Таймлайны и сложные последовательности

GSAP Timeline дает возможность строить последовательные и параллельные анимации с детальным управлением:

<script>
  import { onMount } from 'svelte';
  import { gsap } from 'gsap';

  let box1, box2, box3;

  onMount(() => {
    const tl = gsap.timeline({ defaults: { duration: 1, ease: 'power2.out' } });

    tl.to(box1, { x: 200 })
      .to(box2, { y: 100 }, "-=0.5")
      .to(box3, { scale: 1.5, rotation: 360 });
  });
</script>

<div bind:this={box1} class="box">Box 1</div>
<div bind:this={box2} class="box">Box 2</div>
<div bind:this={box3} class="box">Box 3</div>

<style>
  .box {
    width: 80px;
    height: 80px;
    background: #e74c3c;
    margin: 10px;
  }
</style>

Использование "-=0.5" позволяет запускать анимацию второго элемента за полсекунды до окончания первой, создавая перекрывающиеся эффекты. Таймлайны особенно полезны для сложных интерфейсных анимаций, когда требуется строгая последовательность движений.

Интерактивные анимации и привязка к событиям

GSAP интегрируется с событиями DOM и Svelte для создания интерактивного опыта:

<script>
  import { onMount } from 'svelte';
  import { gsap } from 'gsap';

  let card;

  function onHover() {
    gsap.to(card, { scale: 1.1, duration: 0.3 });
  }

  function onLeave() {
    gsap.to(card, { scale: 1, duration: 0.3 });
  }
</script>

<div bind:this={card} class="card" on:mouseenter={onHover} on:mouseleave={onLeave}>
  Hover Me
</div>

<style>
  .card {
    width: 150px;
    height: 150px;
    background: #f1c40f;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    cursor: pointer;
  }
</style>

Такой подход позволяет создавать эффекты наведения, клика и прокрутки, полностью управляемые GSAP, с высокой производительностью и плавностью.

Управление повторениями и обратным проигрыванием

GSAP предоставляет методы repeat, yoyo, reverse для динамического управления анимациями:

<script>
  import { onMount } from 'svelte';
  import { gsap } from 'gsap';

  let ball;

  onMount(() => {
    gsap.to(ball, {
      y: 200,
      duration: 1,
      repeat: -1,
      yoyo: true,
      ease: 'bounce.out'
    });
  });
</script>

<div bind:this={ball} class="ball"></div>

<style>
  .ball {
    width: 50px;
    height: 50px;
    background: #9b59b6;
    border-radius: 50%;
    margin-top: 20px;
  }
</style>

repeat: -1 запускает бесконечное повторение, а yoyo: true заставляет анимацию проигрываться в обратном направлении после каждого цикла. Это особенно полезно для визуальных эффектов и декоративных анимаций интерфейса.

Интеграция с переходами маршрутов SvelteKit

SvelteKit позволяет создавать анимации при смене страниц, используя GSAP совместно с хранилищами состояний или afterNavigate/ beforeNavigate:

<script>
  import { afterNavigate } from '$app/navigation';
  import { gsap } from 'gsap';

  afterNavigate(() => {
    gsap.from('main', { opacity: 0, y: 50, duration: 0.6 });
  });
</script>

<main>
  <slot />
</main>

Это обеспечивает плавное появление нового контента при навигации без потери производительности и полной совместимости с SSR.

GSAP в связке с SvelteKit открывает широкие возможности для создания высокопроизводительных и гибких анимаций: от простых эффектов появления до сложных последовательностей с интерактивными событиями. Важным аспектом является использование onMount, bind:this, таймлайнов и реактивных свойств для управления состояниями и анимациями компонентов.

Оглавление