Geavanceerde animatie blok
Met het Geavanceerde animatie block voeg je bewegingseffecten toe aan inhoud op een pagina. Je plaatst het block om andere blokken heen en bepaalt hoe, wanneer en waarmee de animatie wordt gestart. Het block biedt kant-en-klare voorinstellingen en uitgebreide handmatige opties.
Het block toevoegen
Zoek in de blokken-editor op “Advanced Animation” en voeg het block toe. Voeg daarna de blokken die je wilt animeren toe binnenin het animatieblock.
Modus
Kies hoe de animatie is opgebouwd:
- Enkelvoudig — één animatie op de inhoud van het block
- Tijdlijn — meerdere animatiestappen na elkaar (tot 5 stappen)
Voorinstelling
Kies een kant-en-klare animatie als startpunt. De instellingen worden automatisch ingevuld en zijn daarna nog aan te passen.
| Categorie | Voorinstellingen |
|---|---|
| Intree-effecten | Fade In Up, Fade In Down, Scale In, Slide In Left, Slide In Right, Bounce In, Flip In X/Y, Rotate In, Zoom In, Swing In, Roll In, Fade In Scale |
| Uittree-effecten | Fade Out, Fade Out Up/Down, Bounce Out, Flip Out X/Y, Rotate Out, Zoom Out, Roll Out |
| Aandachtseffecten | Pulse, Shake, Wobble, Bounce, Flash |
| Teksteffecten | Typewriter, Text Fade In, Text Slide Up, Text Bounce In |
| Speciale effecten | Glitch |
Trigger
Kies wanneer de animatie start:
| Trigger | Omschrijving |
|---|---|
| Bij laden | De animatie start zodra de pagina geladen is |
| Bij scrollen | De animatie start wanneer het element in beeld schuift |
| Bij hover | De animatie start wanneer de bezoeker over het element beweegt |
| Bij klik | De animatie start wanneer de bezoeker op het element klikt |
Extra opties bij scrollen
- Scroll start / einde — bepaal op welk punt de animatie begint en stopt ten opzichte van het scherm en het element (bijv.
top bottom= zodra de bovenkant van het element de onderkant van het scherm raakt) - Scrubben — koppel de animatie direct aan de scrollpositie; de animatie loopt mee met het scrollen in plaats van automatisch af te spelen
- Scrub soepelheid — hoe soepel de scrub-animatie de scrollbeweging volgt
- Eénmalig — de animatie speelt maar één keer af, ook als de bezoeker terugscrollt
- Vastzetten — houd het element vast op het scherm terwijl de bezoeker scrolt (parallax-effect)
- Foutopsporingsmarkeringen — toont hulplijnen in de editor om de scroll-trigger zichtbaar te maken (alleen in de editor)
Extra opties bij hover
- Omgekeerd bij weggaan — de animatie keert terug naar de beginstand wanneer de muis het element verlaat
Extra opties bij klik
- Schakelen — de animatie wisselt bij elke klik tussen de begin- en eindstand
Doelwit
Kies welke elementen worden geanimeerd:
| Optie | Omschrijving |
|---|---|
| Volledig block | Het hele block wordt als één geheel geanimeerd |
| Binnenste blokken | Elk binnenste block wordt afzonderlijk geanimeerd, met optionele vertraging per element |
| Eigen selector | Geef een CSS-selector op om specifieke elementen te animeren |
| Tekstelementen | Tekst wordt opgesplitst en elk onderdeel afzonderlijk geanimeerd |
Bij Tekstelementen stel je in waarop de tekst wordt gesplitst:
- Tekens — elk karakter afzonderlijk
- Woorden — elk woord afzonderlijk
- Regels — elke tekstregels afzonderlijk
Animatietype
Bepaal de richting van de animatie:
| Type | Omschrijving |
|---|---|
| Van | Animeert vanuit de ingestelde waarden naar de normale staat (intree-effect) |
| Naar | Animeert vanuit de normale staat naar de ingestelde waarden (uittree-effect) |
| Van → Naar | Animeert van één set waarden naar een andere set waarden |
Animatie-eigenschappen
Stel in welke CSS-eigenschappen worden geanimeerd. Standaard zichtbare eigenschappen:
| Eigenschap | Omschrijving |
|---|---|
| Doorzichtigheid | Transparantie: 0 = onzichtbaar, 1 = volledig zichtbaar |
| X | Horizontale verplaatsing in pixels |
| Y | Verticale verplaatsing in pixels |
| Schaal | Grootte: 1 = normaal, 2 = dubbel, 0,5 = half |
| Rotatie | Graden: 360 = volledige draai, -90 = 90° naar links |
Via Geavanceerde eigenschappen zijn ook beschikbaar: X% / Y% (op basis van elementbreedte/-hoogte), Schaal X/Y afzonderlijk, 3D-rotatie (X/Y-as), Schuintrekken (Skew X/Y), Filter (blur, brightness, e.d.), Transform Origin, Box Shadow, Clip Path, Achtergrondpositie en Border Radius.
Timing
| Instelling | Omschrijving | Standaard |
|---|---|---|
| Duur | Hoe lang de animatie duurt in seconden | 1 s |
| Vertraging | Hoe lang er gewacht wordt voor de animatie start | 0 s |
| Stagger | Vertraging tussen opeenvolgende elementen (bij meerdere doelwitten) | 0 s |
| Stagger richting | Volgorde van de stagger: begin, einde, midden of willekeurig | Begin |
Verloopfunctie (easing)
Bepaalt hoe de animatie versnelt en vertraagt. Beschikbare opties onder andere:
- Power2/3/4 Out — versnelt snel en remt af (meest gebruikt voor intree-effecten)
- Power2/3/4 In — begint langzaam en versnelt (uittree-effecten)
- Back Out / In — overshoots licht voor een veerkrachtig effect
- Elastic Out / In — trillend, elastisch effect
- Bounce Out / In — stuitert aan het einde of begin
- Linear — constante snelheid zonder versnelling
Tijdlijn (meerdere stappen)
In de Tijdlijn-modus voeg je tot 5 animatiestappen toe. Elke stap heeft zijn eigen:
- Positie — op welk moment in de tijdlijn de stap begint (bijv.
0= direct,+=0.5= een halve seconde na de vorige stap) - Animatietype, eigenschappen, duur en verloopfunctie — dezelfde opties als bij een enkelvoudige animatie
Responsive
Schakel de animatie uit op specifieke schermformaten:
- Mobiel uitschakelen
- Tablet uitschakelen
- Desktop uitschakelen
Toegankelijkheid
Het block respecteert standaard de voorkeur Verminder beweging van het besturingssysteem van de bezoeker. Bezoekers die in hun systeeminstellingen hebben aangegeven minder beweging te willen zien, krijgen de animaties niet te zien.