Scroll Animation con Vanilla JS e CSS
Tags: javascript, css, webdev, design
Published: 2022-09-17 14:01:00

## Introuzione
In questa quida vedremo come creare delle _scroll animations_ con JS Vanilla e CSS.

## Intersection Observer API
Per ottenerle utilizzeremo questa [API](https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API): ciò che fa è determinare se un elemento del DOM è visibile all'utente finale.

## HTML & CSS
Per questa parte avrete carta bianca. In questo caso animeremo delle scritte. Per avere abbastanza spazio per lo scroll ho dato ad ogni `<section>` un'altezza di `100vh` e ho centrato i titoli `<h1>` con `display:grid;` e `place-items: center`. Identifichiamo gli elementi che vogliamo osservare con una classe: in questo caso `hidden` e le diamo un' `opacity: 0;` (poichè inizialmente questi elementi non saranno visibili).
Inoltre creiamo un'altra casse `show` con `opacity: 1;` che andremo ad aggiungere agli elementi con classe `hidden` quando saranno visibili all'utente finale. Per rendere tutto più fluido aggiungiamo una transizione ` transition: all .6s` a `hidden`.

```html
<section class="hidden">
  <h1>
    Lorem ipsum dolor sit amet consectetur adipisicing elit.
  </h1>
</section>

<section class="hidden">
  <h1>
    Lorem ipsum dolor sit amet consectetur adipisicing elit.
  </h1>
</section>

<section class="hidden">
  <h1>
    Lorem ipsum dolor sit amet consectetur adipisicing elit.
  </h1>
</section>
```

```css
section{
  height: 100vh;
  background-color: #1B1F24;
  color: #ffffff;
  display: grid;
  place-items: center;
}

.hidden{
  opacity: 0;
  transition: all .6s;
}

.show {
  opacity: 1;
}
```

## JavaScript

Ora prendiamo tutti gli elementi con classe `hidden`:
```javascript
const hiddenElements = document.querySelectorAll(".hidden");
```
Il prossimo step è quello di creare l'**intersection observer** che è una classe che prende una _callback_ nel suo _constructor_.
Il vantaggio è che può osservare più elementi allo stesso tempo. Quindi itereremo ogni `entry` con un `forEach`:
```javascript
const observer = new IntersectionObserver((entries) => {
  entries.forEach((entry) => {
  })
})
```
Questa funzione verrà eseguita ogni volta che la visibilità di un elemento osservato cambierà.

Ora aggiungeremo un check su ogni `entry` per vedere se è visibile nel _viewport_, ed in caso avvenga aggiungeremo all'elemento la classe `show` dichiarata in precedenza:

```javascript
const observer = new IntersectionObserver((entries) => {
  entries.forEach((entry) => {
    if(entry.isIntersecting){
      entry.target.classList.add('show');
    }
  })
})
```
Se vogliamo che l'animazione venga eseguita ogni volta che un elemento rientra nel _viewport_ ci basterà inserire un `else` statement in cui togliamo la classe `show`:
```javascript
const observer = new IntersectionObserver((entries) => {
  entries.forEach((entry) => {
    if(entry.isIntersecting){
      entry.target.classList.add('show');
    } else {
      entry.target.classList.remove('show');
    }
  })
})
```
Ora che abbiamo l'`observer` dobbiamo dirgli cosa osservare: in questo caso possiamo fare un _loop_ su tutti gli elementi e dire all'`observer` di osservare ogniuno di essi:

```javascript
hiddenElements.forEach((el) => observer.observe(el));
```

## Esempio pratico
{% codepen https://codepen.io/g-pagliara/pen/xxjqjep %}

In questo esempio potete notare che le scritte animate provengono da destra. Per ottenere questo effetto basta giocare con le proprietà di trasformazione _CSS_:

```css
.hidden{
  opacity: 0;
  transform: translateX(100px);
  transition: all .6s;
}

.show {
  opacity: 1;
  transform: translateX(0px);
}
```
---

Spero questa mini guida vi sia piaciuta , considera di mettere ❤️ al post e seguirmi sui miei social:

[Linkedin](https://www.linkedin.com/in/giandomenico-pagliara-699108179/)
[GitHub](https://github.com/PagliaraG)