MAGLR BLOG / 08 August 2018

Geavanceerde scroll animaties maak je vanaf nu zelf

Nu beschik je al over heel wat animatie mogelijkheden in Maglr Pro. Vanaf vandaag zijn dat er nog meer. We hebben de editor uitgebreid met verschillende ’scrolling animations'. Zonder ook maar een regel code te typen bouw je nu zelf de meest uiteenlopende verticaal geanimeerde pagina’s. 
 

Bekijk direct de demo om alle nieuwe mogelijkheden in actie te zien


Demos
Geen tijd om dit artikel te lezen maar wel benieuwd? Bekijk direct het resultaat:


Van fullscreen naar longreads

De Pro editor is oorspronkelijk ontworpen voor fullscreen pagina’s. Daarbij werken animaties op basis van tijd prima. Elementen staan al ergens op het zichtbare deel van je beeldscherm en kunnen met vertraging op een mooie manier in beeld worden geanimeerd.

Door de toenemende populariteit van longreads liepen we op gebied van animatie wel tegen een beperking aan. Als je elementen in het midden van je langere pagina geanimeerd in beeld wil laten komen, dan kan het zijn dat de animatie al voorbij is voordat je naar dat specifieke punt bent gescrold. 


Scroll animaties

Nieuw zijn scroll animaties niet, na het bekijken van 10 verschillende websites op de inspiratie website Awwwards kom je deze animaties overal tegen. Scroll animaties kunnen een grote toevoeging zijn aan een statische website. Het maakt mooie subtiele bewegingen mogelijk die tijdens het scrollen het verhaal langzaam opbouwen of je kunt juist extra aandacht leggen op belangrijke onderdelen in pagina. Ook parallax effecten vallen op waardoor een pagina ineens diepte krijgt tijdens het scrollen.

Dit moeten we dus ook hebben in de Pro editor, maar hoe? We mogen niet vergeten dat deze voorbeeld websites bijna allemaal door grotere internationale teams, bestaande uit designers en developers, zijn gemaakt. Met Maglr Pro willen we hetzelfde eindresultaat evenaren, maar dan vanuit een enkele designer, zonder technische kennis. 

Het uitwerken van de mogelijkheden heeft wat tijd gekost...


Nog steeds eenvoudig te begrijpen voor de designer

Nu zijn er voldoende standaard kant-en-klare animatie oplossingen, maar deze bleken al snel te beperkt voor hetgeen wat wij voor ogen hadden. Als designer zou je niet voldoende grip hebben op hoe een animatie zichzelf opbouwt. We waren dus op zoek naar meer.

Wij focussen met Maglr Pro op de professionele designer. De vormgever die goede ideeën heeft, maar vooral niet aan techniek moet denken. De designer moet direct in Maglr aan de slag kunnen om het idee om te zetten in een beeldende, interactieve pagina. 

Soms clasht dit een beetje, je wilt veel opties bieden om een mooi interactief ontwerp te kunnen maken, maar daarentegen wil je niet tientallen paneeltjes met instellingen waar je niet meer aan uitkomt. Het moest dus zo visueel mogelijk worden. Als ontwerper wil je zien waar je mee bezig bent. 

We zijn dus uiteindelijk zelf aan de slag gegaan. Na heel wat proberen, testen, ontwikkelen, proberen, verwijderen, opnieuw beginnen en weer proberen denken we dat we tot iets moois zijn gekomen waar je het volgende mee kunt bouwen.

 

Instellen van scroll triggers, bekijk demo

Bepaal waar je in & uitgaande animatie start

Maak gebruik van alle bestaande animaties maar bepaal wanneer ze tijdens het scrollen in beeld moeten komen. Bij instellen kies je tussen een 'animatie op tijd' of 'viewport'. Een 'viewport’ is het formaat van het venster waar de pagina in staat. Dit venster met alle schermformaten die er zijn, zijn altijd anders. De volgende keuze is dan ook op welk percentage de animatie moet starten. We laten duidelijk een indicatie-lijn zien waar dit ongeveer zou zijn. Komt het element op die hoogte, dan wordt de animatie gestart. Hetzelfde geldt voor uitgaande animaties, al is deze lijn juist omgedraaid.


 

Instellen van een keyframe animatie op basis van tijd, open de demo

Laat animaties op tijd langs een getekend pad lopen

De huidige animaties bestaan uit een begin en eindpunt. Met de keyframe animaties ben je nu in staat uitgebreidere animaties te tekenen die uit meerdere frames bestaan. Bij het bewerken van de animatie komt er een nieuwe animatie-editor in beeld. Hier voeg je meerdere frames toe, bepaal je de tijd tussen de frames en trek je met gebogen lijnen een pad waar de animatie zich overheen beweegt.

 

Parallax effect toegepast op meerdere elementen, open de demo

Zorg voor diepte met parallax animaties

Als je een pagina naar beneden scrollt bewegen alle elementen met dezelfde snelheid mee. Met de parallax animatie bepaal je juist of een element sneller of langzamer dan de standaard scroll moet bewegen. Als je dit toepast voor meerdere lagen die over elkaar liggen, dan krijg je een gevoel van diepte. 

 

Menu in dit scherm staat vast met sticky animatie. Open de demo

Zet onderdelen vast met de sticky optie

Wil je tijdens het scrollen onderdelen juist vast zetten? Dan is de sticky animatie een mooie toevoeging. Denk bijvoorbeeld aan een menu wat je altijd bovenaan je pagina in beeld wilt houden. 

 

Instellen van scroll paden in de Pro editor, bekijk het resultaat

Teken verticale scrollpaden met meerdere keyframes 

Een onderdeel wat we nu nog afronden maar al wel willen laten zien, is het verticale scroll pad. Net zoals bij de eerder vermelde 'keyframe animatie' teken je ook hier een pad uit meerdere frames. Het grote verschil is echter dat deze animatie niet op tijd loopt, maar reageert op de scroll afstand van de gebruiker. 

Paden teken je in alle richtingen. Door versnellingen en vertragingen tussen frames toe te passen laat je elementen sneller of langzamer bewegen dan de rest van de pagina. Het is tevens mogelijk om een element tijdelijk vast te zetten (sticky) tijdens het doorlopen van een pad. 

Deze functionaliteit wordt nu nog afgemaakt en is eind augustus beschikbaar.
 

Performance

Met al deze nieuwe mogelijkheden wordt het verleidelijk om alles wat je ook maar kunt selecteren op je werkblad te voorzien van een scroll animatie. Let echter wel op, scroll animaties zijn vooral voor oudere systemen zwaar. Bij iedere tik op je muis moet de browser berekeningen uitvoeren. Daarbij verschilt het ook per besturingssysteem en muis hoe de scrollsnelheid staat ingesteld. 

Waar de max ligt kunnen wij niet vertellen. Dit is geheel afhankelijk van de opbouw van de pagina, gebruik de animatie wel in mate. Naast performance kan het ook irritant worden voor de lezer als je teveel animatie gebruikt. Op onze inspiratie pagina hebben al wat voorbeelden geplaatst waar de scroll animatie is toegepast. 
 

Next step, mobile

Voor nu hebben we de scroll animaties nog enkel ingesteld op desktop. De volgende stap wordt het klaarmaken van een versimpelde versie voor mobiel. Op mobiel heb je minder ruimte dus wordt het timen van animaties een heel stuk lastiger. Wat we hier dan ook zullen uitwerken is een eenvoudiger preset met net voldoende opties om de pagina spannender te maken. 

Aan de slag? Lees de nieuwe documentatie

Gelijktijdig met het bouwen van alle nieuwe animatie mogelijkheden hebben we tevens onze help website helemaal hernieuwd. Alle artikelen zijn herschreven in het engels met bijbehorende (engelse) hulp video's. Open de nieuwe documentatie website