Animeer elementen bij scrollen, hover of klik.

DXPR Builder lerenPagina’s bouwenElementen stylenOntwerpgidsen

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: wijzig kleuren, schaduwen of opaciteit terwijl de pointer op een element rust.
  • Achtergronden: geef de geanimeerde sectie een kleur, een foto of een verloop.
  • Carrousellay-out: speel On trigger-effecten telkens wanneer een slide opent.