##  [Tabblad Animatie](/nl/hc/documentation/learn-dxpr-builder/getting-started/tabblad-animatie) 

 Voeg bewegingseffecten toe om elementen te onderscheiden van de rest van de pagina.

 Volg de onderstaande stappen om animaties aan uw element toe te voegen:

- Klik op het **+** icoon
- Ga naar het tabblad **Inhoud**
- Selecteer een element
- Ga naar het tabblad **Animatie**
- Selecteer een animatieoptie in de **Animatiestartinstellingen**
    
    
    - **Bij weergave** betekent dat de animaties beginnen zodra het element in het browservenster verschijnt
    - **Bij hover** betekent dat de animaties beginnen zodra u met de muis over het element beweegt
    - **On Click** betekent dat de animaties beginnen zodra u op het element klikt
    - **Bij trigger** betekent dat de animatie verschijnt zodra deze door een script wordt geactiveerd

1. Selecteer een **animatie in** die verschijnt zodra de startanimatie begint. Als u bijvoorbeeld Zweven selecteert, verschijnt de animatie zodra de muis over het element gaat
2. Selecteer *optioneel* een **Animation Out** die verschijnt zodra de Start Animation stopt. Als u bijvoorbeeld Zweven selecteert, verschijnt de animatie zodra de muis niet meer boven het element staat
3. Stel de optie in voor het element **Verborgen** , voor of na de in-animatie. Dit wordt voornamelijk gebruikt wanneer de in-animatie is ingesteld op een animatie met "in". Bijvoorbeeld: als u ervoor kiest om het element **Vóór** de animatie te verbergen. Als uw startanimatie-optie **On Click** is, zal het element pas zichtbaar zijn als u erop klikt (doe dit dus niet).
4. Stel de grens van het element in bij **Vormgevingsgrens** ***.*** Als deze bijvoorbeeld is ingesteld op 50, start de animatie zodra het element voorbij het midden van het browservenster is gescrolld. Als u dit op 100% instelt, wordt het element onmiddellijk geanimeerd wanneer het element in het browservenster scrolt.
5. Schakel de **Infinite** in zodat de animatie zich blijft herhalen
6. Stel de **duur** van de animatie in milliseconden in (lagere duur staat gelijk aan snellere beweging)
7. Stel een vertraging in voor de in-animatie via de **In-Delay** -instellingen (hogere vertraging staat gelijk aan langzamere beweging)
8. Stel een vertraging in voor de uit-animatie via de **Out-Delay** -instellingen (hogere vertraging staat gelijk aan langzamere beweging)
9. Nadat u uw voorkeursinstellingen heeft geselecteerd, kunt u op **Wijzigingen opslaan** klikken en u bent klaar!