Standar animations with Gsap
Pagina di esempio per le animazioni in gsap
La libreria è molto base per permettere l'aggiunta di altre animazioni solo se necessario
L'animazione di ingresso integrata è un fadeFromBottom
gli elementi si animano aggiungendo gli attributi:
- wsk-anima="fadeFromBottom" *il nome dell'animazione
- wsk-anima-delay=""
- wsk-anima-offset=""
- wsk-anima-duration=""
- wsk-anima-trigger="A custom trigger selector, the default is the element itself"
- wsk-anima-markers="true" *per mostrare i marker sull'elemento
Se si desidera sviluppare nuove animazioni base è sufficente creare la funzione all'interno della classe wskAnimations.class.js prendendo come esempio fadeFromBottom
L'inizializzazione delle animazioni di base si trova in js/modules/animations.js
new wskAnimations({ ease: "power4", delay: 0, duration: 0.6, markers: true }, { enable: bool, smoothness: 0.8, content: '#smooth-scroll-content' });
ATTENZIONE allo SMOOTH SCROLL!
Se si abilita lo SMOOTH SCROLL della pagina gli elementi in fixed all'interno vanno gestiti adeguatamente.
wsk-anima="fadeFromBottom" wsk-anima-ease="power2"
wsk-anima-offset="200"
wsk-anima="fadeFromBottom" wsk-anima-duration="2" wsk-anima-offset="200"