Materials¹ scroll-animation

De fleste hero-sektioner er statiske skærmbilleder. Et billede, en overskrift, en knap, og så er scroll-handlingen udelukkende en transportmekanisme, der flytter brugeren videre til næste blok. Materials¹ bryder med den logik ved at gøre selve hero-figuren til et objekt, der reagerer på brugerens bevægelse. Figuren ændrer form, mens siden scrolles, så det første indtryk ikke er ét billede, men en lille fortælling udspillet over de første sekunder af besøget.

Det kræver en anden tilgang til opbygningen end en traditionel one-page-side. I stedet for at stable sektioner ovenpå hinanden og lade brugeren bladre igennem dem, bliver scroll-positionen selve styringsmekanismen for animationen. Hver pixel, brugeren scroller, svarer til et bestemt trin i figurens transformation. Det er teknisk set ikke nyt, scroll-drevne animationer har eksisteret i webdesign i årevis, men Materials¹ demonstrerer, hvor rent og gennemført greb kan udføres, når det er den bærende idé for hele siden frem for et enkelt pynteelement.

Det, der gør scroll-morphing forskelligt fra almindelig scroll-animation, er kontinuiteten. En typisk scroll-effekt lader et element fade ind eller glide op, når det rammer skærmen, en isoleret hændelse per sektion. Morphing er derimod en glidende overgang, hvor figuren aldrig forsvinder og genopstår, den transformeres direkte fra en tilstand til den næste. Brugeren oplever det som ét sammenhængende forløb snarere end en serie af separate effekter.

Det stiller andre krav til designet. Formerne, figuren bevæger sig imellem, skal være beslægtede nok til, at overgangen føles naturlig, men forskellige nok til, at forandringen faktisk mærkes. Timingen skal matche scroll-hastigheden, så animationen hverken haler bagud eller overhaler brugerens bevægelse. Og fordi effekten er hero-sektionens omdrejningspunkt, skal den fungere upåklageligt på både desktop og mobil, hvor scroll-adfærden er markant anderledes.

En hero-sektion, der reagerer direkte på brugerens handling, skaber en anden form for engagement end en passiv side. Brugeren bliver medskaber af oplevelsen i de første sekunder, fordi det er deres egen scroll-bevægelse, der driver historien frem. Det holder på opmærksomheden længere end et statisk billede, fordi nysgerrigheden om, hvad figuren bliver til næste gang, trækker brugeren videre ned ad siden.

Det ændrer også, hvordan man skal tænke om hero-sektionens rolle. Den er ikke længere kun et visuelt førstehåndsindtryk, den er en invitation til at udforske resten af siden. Når selve interaktionen med hero-figuren belønner scroll med noget nyt at se, bliver overgangen til næste sektion mindre af et brud og mere af en naturlig fortsættelse. Det er en subtil, men effektiv måde at reducere den friktion, der ellers ofte opstår, når brugere lander på en side og ikke er sikre på, om der er mere at se.

Danske virksomheder, der bygger eller opdaterer deres hjemmeside, står ofte over for et valg mellem en klassisk, sikker struktur og noget, der skiller sig ud. Materials¹ viser, at man ikke behøver en overdådig mængde af effekter for at skabe det sidste. Ét gennemført greb, udført konsekvent gennem hero-sektionen, kan gøre mere for oplevelsen end ti spredte animationer, der hver især kæmper om opmærksomheden.

For virksomheder, der arbejder med produkter eller ydelser, hvor formidling og forståelse er en del af salget, byggerier, teknologi, design, konsulentydelser, er scroll-baseret morphing en påmindelse om, at hero-sektionen kan bære en pointe frem for blot at være dekoration. Det kræver ikke et stort teknisk apparat at komme i gang. Det kræver et klart valg om, hvilken idé eller transformation figuren eller elementet skal formidle, og disciplin til at holde resten af siden enkel nok til, at greb som dette får lov at stå tydeligt frem.