---
url: 'https://dxpr.com/nl/hc/documentatie/dxpr-builder-leren/ontwerp/animatie-tabblad'
title: 'Animeer elementen bij scrollen, hover of klik | DXPR'
author:
  name: Jurriaan
  url: 'https://dxpr.com/users/jurriaan'
date: '2023-11-06T09:38:34+00:00'
updated: '2026-10-24T17:19:22+00:00'
copyright: 'Copyright DXPR. All rights reserved.'
type: article
summary: |-
  Je kunt een sectie, een rij of elk inhoudselement laten bewegen. Laat een kop omhoog faden
  terwijl die in beeld scrollt, laat een knop even later volgen, of laat een pictogram pulseren bij
  hover. Elk heeft een paneel Animation in zijn instellingen. Het voorbeeld fadet een kop in,
  daarna een inschrijfknop na een korte vertraging.
  De video fadet een knop en een kop in terwijl de sectie in beeld komt.
tags:
  - 'Design guides'
image: 'https://dxpr.com/themes/custom/dxpr_com/images/dxpr-share-card.jpg'
published: true
og:
  site_name: DXPR
  updated_time: '2026-10-24T17:19:22+0000'
  'image:alt': 'DXPR, powered by Drupal: AI-powered Drupal for marketers.'
schema:
  '@context': 'https://schema.org'
  '@graph':
    -
      mainEntity: {  }
    -
      '@type': TechArticle
      headline: 'Animeer elementen bij scrollen, hover of klik'
      description: |-
        Je kunt een sectie, een rij of elk inhoudselement laten bewegen. Laat een kop omhoog faden
        terwijl die in beeld scrollt, laat een knop even later volgen, of laat een pictogram pulseren bij
        hover. Elk heeft een paneel Animation in zijn instellingen. Het voorbeeld fadet een kop in,
        daarna een inschrijfknop na een korte vertraging.
        De video fadet een knop en een kop in terwijl de sectie in beeld komt.
      image:
        '@type': ImageObject
        url: 'https://dxpr.com/themes/custom/dxpr_com/images/dxpr-share-card.jpg'
        width: '1200'
        height: '630'
      datePublished: '2023-11-06T09:38:34+0000'
      dateModified: '2026-10-24T17:19:22+0000'
      author:
        '@type': Organization
        '@id': 'https://dxpr.com/#organization'
        name: DXPR
        url: 'https://dxpr.com/'
        logo:
          '@type': ImageObject
          url: 'https://dxpr.com/themes/custom/dxpr_com/dxpr-logo-dark.svg'
          width: '1348'
          height: '501'
      publisher:
        '@type': Organization
        '@id': 'https://dxpr.com/#organization'
        name: DXPR
        url: 'https://dxpr.com/'
        logo:
          '@type': ImageObject
          url: 'https://dxpr.com/themes/custom/dxpr_com/dxpr-logo-dark.svg'
          width: '1348'
          height: '501'
      mainEntityOfPage: 'https://dxpr.com/nl/hc/documentatie/dxpr-builder-leren/ontwerp/animatie-tabblad'
      articleSection: Ontwerpgidsen
    -
      '@type': WebPage
      '@id': 'https://dxpr.com/nl/hc/documentatie/dxpr-builder-leren/ontwerp/animatie-tabblad'
      description: |-
        Je kunt een sectie, een rij of elk inhoudselement laten bewegen. Laat een kop omhoog faden
        terwijl die in beeld scrollt, laat een knop even later volgen, of laat een pictogram pulseren bij
        hover. Elk heeft een paneel Animation in zijn instellingen. Het voorbeeld fadet een kop in,
        daarna een inschrijfknop na een korte vertraging.
        De video fadet een knop en een kop in terwijl de sectie in beeld komt.
      breadcrumb:
        '@type': BreadcrumbList
        itemListElement:
          -
            '@type': ListItem
            position: 1
            name: Home
            item: 'https://dxpr.com/nl'
      publisher:
        '@type': Organization
        '@id': 'https://dxpr.com/#organization'
        name: DXPR
      inLanguage: nl
---
[Helpcentrum](/nl/hc)/[Documentatie](/nl/hc/documentatie) /[DXPR Builder leren](/nl/hc/documentation/learn-dxpr-builder) /[Pagina’s bouwen](/nl/hc/documentation/learn-dxpr-builder/build) /[Elementen stylen](/nl/hc/documentation/learn-dxpr-builder/element-settings) /[Ontwerpgidsen](/nl/hc/documentation/learn-dxpr-builder/design/overview) # Animeer elementen bij scrollen, hover of klik.

 DXPR Builder lerenPagina’s bouwenElementen stylenOntwerpgidsen

   ## In deze gids

 Gerelateerde gidsen

- [Elementen laten reageren bij hover](/nl/hc/documentatie/dxpr-builder-leren/ontwerp/hovereffecten)
- [Geef een sectie een kleur-, foto- of verloopachtergrond](/nl/hc/documentatie/dxpr-builder-leren/ontwerp/achtergronden)
- [Een carrousel toevoegen](/nl/hc/documentatie/dxpr-builder-leren/lay-out/carrousel)

Je kunt een sectie, een rij of elk inhoudselement laten bewegen. Laat een kop omhoog faden terwijl die in beeld scrollt, laat een knop even later volgen, of laat een pictogram pulseren bij hover. Elk heeft een paneel **Animation** in zijn instellingen. Het voorbeeld fadet een kop in, daarna een inschrijfknop na een korte vertraging.

De video fadet een knop en een kop in terwijl de sectie in beeld komt.

  ## Een kop en een knop infaden

1. Klik op **Add Elements** in het lege inhoudsgebied en kies **Section** op het tabblad **Layout**.
2. Wijs de sectie aan en open **More > Settings**.
3. Kies onder **HTML classes** **Align text center** en klik op **Save**.
4. Klik op **+** op de sectie en kies **Button** op het tabblad **Content**. Zijn instellingen openen.
5. Typ `Register now` in **Title** en `/register` in **Link**.
6. Open het paneel **Animation** en zet **Animation start** op **On appear**.
7. Zet **Animation in** op **fadeInUp**.
8. Vink onder **Hidden** **Before in-animation** aan.
9. Zet **In-delay** op 600 en klik op **Save**.
10. Klik opnieuw op **+** op de sectie en kies **Text** op het tabblad **Content**. Die komt boven de knop.
11. Typ een kop, zoals `Open day 2026`, en zet hem op **Heading 2** in de editorwerkbalk.
12. Open het paneel **Animation**. Kies **On appear**, **fadeInUp** en **Before in-animation**, zoals bij de knop.
13. Zet **Duration** op 800 en klik op **Save**.
14. Klik op de werkbalk op **Save**.
15. Open het weergavemenu (het oogpictogram op de werkbalk) en kies **Preview**.

## Meer effecten om te proberen

- **Scroll reveal:** **On appear**, **fadeInUp**, **Before in-animation** en een **Duration** van 800.
- **Staggered cards:** hetzelfde effect op drie kaarten, met een **In-delay** van 0, 200 en 400.
- **Attention pulse:** **On appear**, **pulse**, **Infinite** aan en een **Duration** van 1500.
- **Hover pulse:** **On hover**, **pulse** en een **Parent number** van 0, zodat alleen het element zelf reageert.
- **Tab reveal:** **On trigger** en **fadeIn** op de elementen in een tab. Ze spelen telkens wanneer de tab opent.

## Wat je ziet

Wanneer je de tekst opslaat, speelt de editor beide effecten af: de kop fadet omhoog over 800 milliseconden en de knop volgt 600 milliseconden later. Bezoekers zien hetzelfde terwijl de sectie in beeld scrollt, één keer per paginalading. Beide blijven onzichtbaar totdat hun effect start, omdat **Before in-animation** is aangevinkt.

## Instellingen

| Instelling | Wat het doet | Standaard |
|---|---|---|
| **Animation start** | Wanneer het effect speelt: **On appear** (in beeld gescrolld), **On hover**, **On click** of **On trigger** (wanneer de carrouselslide, tab of toggle met het element opent) | **No animation** |
| **Animation in** | Het entrance-effect: fades, slides, zooms, flips en aandachtseffecten zoals bounce, pulse en shake | **No animation** |
| **Animation out** | Het exit-effect, uit dezelfde lijst. Toont alleen voor **On hover** en **On trigger**. | **No animation** |
| **Hidden** | **Before in-animation** houdt het element onzichtbaar totdat zijn effect speelt. **After in-animation** verbergt het zodra het effect eindigt. | Geen van beide |
| **Infinite** | Herhaalt het effect zonder einde | Uit |
| **Appear boundary** | Voor **On appear**: hoe ver onder het scherm het effect start, in procenten van de schermhoogte. 0 start het zodra het element in beeld scrollt; 100 start het één schermhoogte eerder. | 100 |
| **Duration** | Lengte van het effect, 0 tot 3000 milliseconden | 1000 |
| **In-delay** | Wacht voordat de entrance speelt, tot 10000 milliseconden | 0 |
| **Out-delay** | Wacht voordat de exit speelt, tot 10000 milliseconden | 0 |
| **Parent number** | Voor **On hover** en **On click**: op welk element de bezoeker wijst of klikt. 0 is het element zelf, 1 zijn parent, 2 de parent van de parent. | 1 |

Kolommen hebben geen paneel **Animation**. Enkele tabs, toggles en slides in lay-outelementen evenmin. Animeer in plaats daarvan het element erin.

## Als je de animatie niet ziet

- **Het element verschijnt nooit.** **Before in-animation** verbergt het totdat zijn effect speelt, maar **Animation in** staat op **No animation**. Kies een effect in **Animation in**.
- **Het effect speelde één keer en stopte.** **On appear** speelt één keer per paginalading. Herlaad de pagina om het opnieuw te zien, of schakel **Infinite** in voor een effect dat herhaalt.
- **Het effect start voordat de bezoeker het element bereikt.** **Appear boundary** staat hoog: bij 100 start het effect één schermhoogte voordat het element in beeld scrollt. Zet hem op 0 in het paneel **Animation**.
- **Hoveren bij het element start het effect.** **Parent number** staat op 1, dus de parent luistert naar de pointer. Zet **Parent number** op 0.

## Wat nu?

- [Hovereffecten](/nl/hc/documentatie/dxpr-builder-leren/ontwerp/hovereffecten): wijzig kleuren, schaduwen of opaciteit terwijl de pointer op een element rust.
- [Achtergronden](/nl/hc/documentatie/dxpr-builder-leren/ontwerp/achtergronden): geef de geanimeerde sectie een kleur, een foto of een verloop.
- [Carrousellay-out](/nl/hc/documentation/learn-dxpr-builder/layout/carousel-layout): speel **On trigger**-effecten telkens wanneer een slide opent.