---
source: fe038e96bfc4
---

# Pagina-animaties

Met pagina-animaties laat je losse elementen de pagina in bewegen zodra de pagina op het scherm verschijnt. Zo wordt een statische opmaak een stuk levendiger.

## Een animatie aan een element toevoegen

1. Open een pagina in de [pagina-editor](/nl/features/page-editor)
2. Klik op een element (tekst, afbeelding, vorm enzovoort)
3. Open in het rechterpaneel het onderdeel **Animatie** en klik op **+ Animatie in toevoegen**. Het element krijgt dan een **Vervagen** van 1 seconde
4. Kies eventueel een ander **Type**. Als je het type wijzigt, wordt de animatie meteen opnieuw afgespeeld, zodat je ziet hoe hij eruitziet

<img class="screenshot-narrow" src="/nl/img/screenshots/page-animation-add.png" alt="Knop Animatie in toevoegen" />

## Animatie-instellingen

<img class="screenshot-narrow" src="/nl/img/screenshots/page-animation-settings.png" alt="Paneel met animatie-instellingen" />

| Instelling | Wat het doet |
|---|---|
| **Type** | De animatiestijl (zie de opties hieronder) |
| **Afspeelduur (s)** | Hoe lang de animatie duurt, in seconden |
| **Vertraging (s)** | Hoeveel seconden er wordt gewacht voordat de animatie start |
| **Easing** | De versnellingscurve: linear, ease, ease-in, ease-out, ease-in-out |
| **Initiële waarden** | Onder **Geavanceerde waarden**: stel de beginwaarden voor doorzichtigheid, schaal en positie in om meerdere effecten te combineren |

### Animatietypes

| Type | Effect |
|---|---|
| **Vervagen** | Het element vervaagt van transparant naar zichtbaar |
| **Schalen** | Het element groeit vanuit een kleiner formaat |
| **Schuiven naar links** | Het element schuift in vanaf rechts |
| **Schuiven naar rechts** | Het element schuift in vanaf links |
| **Schuiven naar boven** | Het element schuift in vanaf onderen |
| **Schuiven naar beneden** | Het element schuift in vanaf boven |
| **Stuiteren naar links** | Het element stuitert in vanaf rechts |
| **Stuiteren naar rechts** | Het element stuitert in vanaf links |
| **Stuiteren naar boven** | Het element stuitert in vanaf onderen |
| **Stuiteren naar beneden** | Het element stuitert in vanaf boven |

### Animaties combineren

Met initiële waarden kun je effecten stapelen. Een voorbeeld: kies het type **Schalen** en zet de initiële **Doorzichtigheid** op `0`. Het element schaalt en vervaagt dan tegelijk in beeld.

Klap **Geavanceerde waarden** uit in het animatiepaneel om de velden **Doorzichtigheid**, **Schalen**, **Verschuiven X** en **Verschuiven Y** voor de beginstand van het element te zien.

<img class="screenshot-narrow" src="/nl/img/screenshots/page-animation-initial-values.png" alt="Uitgeklapte initiële waarden" />

## Animaties opnieuw afspelen

Als je de afspeelduur of vertraging wijzigt, wordt de animatie niet vanzelf opnieuw afgespeeld. Klik op **Animatie afspelen** in de werkbalk onderaan de editor om alle animaties op de pagina tegelijk opnieuw af te spelen.

## Terugzetten

Klik onder **Geavanceerde waarden** op **Standaardwaarden herstellen** om eigen initiële waarden te wissen en opnieuw te beginnen. Wil je de animatie helemaal weghalen? Klik dan op het kruisje naast **Animatie in**.

::: tip
Op apparaten met weinig rekenkracht (zoals sommige SoC-schermen) spelen animaties mogelijk niet af. Test op de hardware die je gaat gebruiken als vloeiende animaties belangrijk zijn.
:::