Avanzado · portado del demo de GSAP

Secciones continuas

Un port del demo Animated Continuous Sections de GreenSock: cada tick de rueda, deslizamiento o arrastre mueve una sección completa, con envoltorios en capas que se deslizan en direcciones opuestas, un fondo con parallax y títulos que entran carácter por carácter. El original es GSAP puro; esta versión usa queries de signal e injectGsap, sin cambiar nada más.

ObserverSplitTextgsap.utils.wrap

Con scope

Reactivo

Limpio

Tuyo

rueda o desliza dentro del marco

<div #stage class="stage">
  @for (slide of slides; track $index) {
    <section class="slide" #slideEl>
      <div class="outer" #outerEl>
        <div class="inner" #innerEl>
          <div class="bg" #bgEl>
            <h2 #titleEl>{{ slide }}</h2>
          </div>
        </div>
      </div>
    </section>
  }
</div>

Cómo funciona

La capa deslizante son dos envoltorios anidados animados en direcciones opuestas (yPercent 100 y −100 encontrándose en 0), mientras el fondo se mueve 15% en contra. La dirección decide el signo, así que subir y bajar se sienten igual de bien.
Un Observer convierte rueda, touch y puntero en 'siguiente' y 'anterior'. Una bandera animating ignora la entrada a mitad de transición; gsap.utils.wrap hace que los extremos den la vuelta.
Los títulos se dividen una vez con SplitText y cada transición escalona los caracteres en orden aleatorio. Todo, las divisiones, el Observer y los tweens, muere con el componente.