11 Ottobre 2023

ScrollMagic — Controllare animazioni scrollMagiche allo scorrimento della pagina

Le animazioni degli elementi controllate dallo scorrimento di una pagina web possono essere molto efficaci e sorprendenti, accompagnano l’esplorazione e contribuiscono a rendere unici siti e landing page.

Insight

Autore

Andrea Sironi

Designer

Trovare librerie che consentano di ottenere tutti i diversi effetti in maniera semplice — anche per chi si trova più a suo agio con i CSS che non javascript — non è facile.

In questo articolo vedremo alcune delle potenzialità di ScrollMagic:
una libreria molto completa che permette davvero di ottenere qualsiasi risultato, soprattutto lavorando in accoppiata con la GSAP, oppure sfruttando al meglio l’animazione CSS.

L’obiettivo è quello di esplorare i concetti di base per ottenere già buona parte degli effetti che utilizzeremo nella maggior parte dei casi e che potete vedere nella demo.

Guarda la Demo

Controller, scene, trigger

I concetti di base:

il controller. Inizializza la libreria.
le scene. Ogni blocco di animazioni (diciamo una sezione della pagina) viene racchiuso all’interno di una scena che definisce le caratteristiche delle animazioni degli elementi che la compongono (ed è agganciata al controller).
il trigger. Per ogni scena, il trigger è cioè che dà il via all’animazione (es. un elemento html specifico) quando viene visualizzato o si trova in un certo punto della pagina.

Per le varie opzioni, rimando all’ottimo cheatsheet.

Colleghiamo i .js necessari e siamo pronti a seguire il nostro personaggio (che per comodità chiameremo “pino”) nello scroll della pagina. (crediti: CSS Emoji)

<!-- Main scrollMagic Js -->
<script src="js/lib/scrollmagic/ScrollMagic.min.js"></script>
<!-- greensock / GSAP animation library (optional) -->
<script src="js/lib/greensock/TweenMax.min.js"></script>
<script src="js/lib/scrollmagic/plugins/animation.gsap.min.js"></script>
<!-- scrollMagic debug plugin (optional) -->
<script src="js/lib/scrollmagic/plugins/debug.addIndicators.min.js"></script>
<!-- Our .js file. we will insert site-specific scrollmagic code here --> 
<script src="js/main.js"></script>

Indicators (debug plugin)

ScrollMagic ci fornisce inoltre un comodo plugin che mostra inizio e fine di una scena e il relativo trigger. Basta inserire il riferimento al plugin nella scena che stiamo preparando.

Scena 1

Pino rimane agganciato alla scena allo scroll per una durata limitata.

var controller = new ScrollMagic.Controller({});

// --------------------
// Scena 1

new ScrollMagic.Scene({
  triggerElement: '#scene1',
  triggerHook: 0,
  offset: -50,
  duration: '100%' // durata legata all'altezza della schermata visibile
})
  .setPin('#pino1', { pushfollowers: false })
  .addTo(controller);

Scena 2

Pino rimane agganciato alla scena e ci segue fino alla fine della pagina (duration non specificata).

// --------------------
// scena 2

new ScrollMagic.Scene({
  triggerElement: '#scene2'
})
  .setPin('#pino2')
  .addTo(controller);

Scena 3

Un altro Pino inizia un movimento sinistra/destra in loop (usando la libreria TweenMax per l’animazione).

// --------------------
// scena 3
var tween = TweenMax.fromTo(
  '#pino3',
  1,
  { left: -100 },
  { left: 300, repeat: -1, yoyo: true, ease: Circ.easeInOut }
);

new ScrollMagic.Scene({
  triggerElement: '#scene3',
  duration: '100%'
})
  .setTween(tween)
  .addTo(controller);

Scena 4

Un altro Pino cambia progressivamente in base ad una classe css.

// --------------------
// scena 4

var tween2 = TweenMax.to('#pino4', 3, { className: '+=big' });

new ScrollMagic.Scene({
  triggerElement: '#scene4',
  offset: -100,
  duration: '100%'
})
  .setTween(tween2)
  .setPin('#pino4')
  .addTo(controller);

Scena 5

Una serie di piccoli gino fa il suo ingresso con un leggero ritardo uno dall’altro.

// --------------------
// scena 5

var tween3 = TweenMax.staggerFromTo(
  '.gino',
  3,
  { left: 600, opacity: 0 },
  { left: 0, opacity: 1, ease: Back.easeOut },
  0.3
);

var scene = new ScrollMagic.Scene({
  triggerElement: '#scene5',
  duration: 600
})
  .setTween(tween3)
  .addTo(controller);

In generale

È possibile aggiungere con un funzione una classe css a tutti gli elementi con una classe specifica in modo da prevedere molto rapidamente animazioni in ingresso da gestire via css (es. fade-in, move-up, slide-left,…)

// --------------------
// Aggiungi classe allo scroll

var revealElements = document.getElementsByClassName('el-rev');
for (var i = 0; i & lt; revealElements.length; i++) {
  new ScrollMagic.Scene({
    triggerElement: revealElements[i],
    offset: -50,
    reverse: false,
    triggerHook: 0.9
  })
    .setClassToggle(revealElements[i], 'visible')
    .addTo(controller);
}

In conclusione, le possibilità che si aprono sono davvero moltissime.
La vera difficoltà sta nel pensare e progettare grafica ed esperienza di esplorazione fluide ed efficaci coerenti con l’argomento e i contenuti della pagina.