Interacties en animatie

Voeg interacties toe aan lagen, zet ze per breakpoint uit, houd rekening met minder beweging en stel overgangen in.

Interacties

Selecteer één laag en kies Interactie toevoegen in de sectie Interacties van Eigenschappen. De laag vaagt in wanneer ze in beeld komt.
Elke interactie toont wat ze start en wat ze doet, zoals Bij verschijnen · Animeren.
Zet ze uit op een breakpoint met Op Desktop, Op Tablet of Op Phone.
Minder beweging bepaalt wat er gebeurt voor mensen die hun toestel om minder beweging vragen: Alleen vervagen houdt een vervaging, Uit toont de laag meteen.
Interactie verwijderen haalt ze weg. Een laag verwijderen haalt ook haar interacties weg, en ongedaan maken zet beide terug.

Open Overgang om in te stellen hoe een animatie beweegt. De curve toont het.
Veer neemt een duur en een vering. Fysieke veer neemt stijfheid, demping en massa.
Versnellingscurve biedt kant-en-klare curves, de versnellingstokens van je project of een Eigen curve met twee handvatten.
Direct verandert meteen. Vertraging wacht voor het begint, en Verspringing start de lagen die het animeert na elkaar.

Selecteer een laag en kies Hover, Indrukken of Focus in Toestanden. Zolang een toestand gekozen is, geldt wat je in Eigenschappen wijzigt alleen in die toestand.
Overgang bepaalt hoe de laag naar die toestand gaat. Wissen haalt weg wat de toestand wijzigt, en Klaar gaat terug naar de laag zelf.
Hover is alleen te zien op toestellen die het kunnen, zoals een computer met een muis.

Trigger bepaalt wat een interactie start: wanneer de laag verschijnt, bij het laden van de pagina, of een klik, hover, indrukken of toetsenbordfocus.
Een klik, hover, indrukken of focus kan de laag Animeren naar de waarden onder Animeert naar, of Scrollen naar een andere laag, en stopt Verschuiving pixels erboven.
Een laag die een link is, kan niet ook een interactie bij een klik starten.

Interactieve elementen voeg je toe vanuit de groep Interactief van het paneel Invoegen. Selecteer er een om de instellingen te wijzigen in Element.
Een element dat gemaakt is met een functie die deze editor niet heeft, blijft zoals het is. Element meldt dat, en de gepubliceerde pagina toont het als een lege box.

Kies Bij scrollen naar het element als trigger om een laag te animeren zolang een laag in beeld is, en terug wanneer die uit beeld gaat.
Laag in beeld is de laag die in beeld moet komen: Deze laag, of een andere sectie of benoemde laag van de pagina.
Verschuiving is hoeveel pixels ervan in beeld moeten zijn voordat de animatie start.

Een Accordeon toont vragen waarvan de antwoorden met een klik openen, zoals een FAQ. Elk item is een frame erin: de eerste laag is de vraag, de rest het antwoord.
In Element laat Meerdere tegelijk open bezoekers meer dan één antwoord open houden; anders sluit het openen van een antwoord de andere. Eerst open is het item dat open begint (0 voor geen).
Tijdens het bewerken zie je alle antwoorden, zodat je ze ter plaatse kunt aanpassen. De gepubliceerde pagina heeft geen script nodig, en met het toetsenbord open en sluit je de antwoorden met Enter of Spatie.

Selecteer een rijstapel of een collectielijst en kies In ticker plaatsen in het opdrachtenpalet. De items scrollen dan eindeloos op de gepubliceerde site; op het canvas staat de ticker stil.
Stel in Element de Snelheid (px per seconde), de Richting en de Snelheid onder de aanwijzer in (0 pauzeert hem). Stel de snelheid in op een ander breakpoint om ze alleen daar te veranderen.
Een ticker pauzeert buiten beeld en staat stil voor bezoekers die liever minder beweging zien. Schermlezers lezen de items één keer.

Selecteer een rijstapel of een collectielijst en kies In carrousel plaatsen in het opdrachtenpalet. De items worden dia's waar bezoekers doorheen vegen, scrollen of stappen met de pijlen, de stippen of de pijltjestoetsen.
Zet in Element de Pijlen en Stippen aan of uit, kies Herhalen, of Automatisch afspelen om de paar seconden; dat stopt zolang de aanwijzer of de toetsenbordfocus erop staat.
De namen van de knoppen zijn sitetekst: schrijf ze in de taal van de site en vertaal ze zoals andere tekst. In de naam van een stip is {n} het nummer van de dia.

Een interactie kan een instantie van een component naar een andere variant laten wisselen: kies Variant wijzigen als Actie, daarna de instantie op de pagina en de variant. Een klik, aanwijzen, indrukken, toetsenbordfocus of scrollen naar het element kan ze starten; aanwijzen, indrukken, focus of scrollen gaat terug naar de variant van daarvoor zodra het stopt.
De wissel beweegt met de Overgang van de variant: kies in de master van de component de variant bij Varianten en stel in hoe die verschijnt. Alleen de eigenschappen die de variant wijzigt, bewegen.