Skip to content

Animationsreferens

01 · Översikt-polygonernas entré

Översikt-polygonernas entré

Strecket ritas runt varje byggnad, sedan en kort pulse (vit flash eller liten studs) innan polygonen sjunker till viloläget. Stagger sprider effekten över översikten.

decorative · ≤ 0.8s0.78sfönster 0.28sritarpulse flash
Översikt över Hugos kvarter
02 · Fasadpolygonernas entré-animation

Fasadpolygonernas entré-animation

Varje vägg ritas en gång, inga delade kanter dubblas. Välj om vågen förgrenar sig från botten eller drar linjärt från valfri riktning, eller stäng av ritandet helt och låt polygonerna bara tonas in.

decorative · ≤ 0.8s0.78sfönster 0.28sbottomförgrenadritar
Hugos fasad
03 · Sidopanelens öppning och stängning

Sidopanelens öppning och stängning

Sidopanelen glider in när en enhet väljs. Höger på desktop, draggbar bottensheet på mobil med tre snäpp: stängd, halv (vid bildens kant) och fullskärm.

transition · ≤ 0.6s0.55sslide 0.4söverlapp 0.2sslät
Hugos byggnad
For saleReady to move in

FG-C5-1 L. Baliukevičiaus-Dzūko g. 113-53

Price1 650 000 kr
Room2
Size60 m²
Fee4 850 kr
Floor2
Housing typeApartment
Move in dateReady to move in

Spacious apartment with windows three directions and a large west-facing balcony

04 · Innehållsbyte i öppen panel

Innehållsbyte i öppen panel

När användaren klickar en annan polygon korstonas innehållet i den öppna panelen. Klicka chips för att se transitionen.

transition · ≤ 0.6s0.36sswitch 0.24sstagger 0.025sslät
Hugos byggnad
For saleReady to move in

Hugos 1, 13001-1

Price3 695 000 kr
Room3 rok
Size72 m²
Fee4 850 kr
Floor2
Housing typeApartment
Move in dateReady to move in

Spacious apartment with windows three directions and a large west-facing balcony

05 · Filtreringens stagger-animation

Filtreringens stagger-animation

Polygoner tonas och krymper bort när filter snävar resultatet. Endast statusarna som ändras animeras. Välj ordning på staggern för en mjuk våg, linjär riktning eller slumpvis spridning.

ui · ≤ 0.4s0.39sstagger 0.018sordning bottom-upslät
Hugos byggnad med statusfilter
06 · POI:ernas entré-animation

POI:ernas entré-animation

POI:erna poppar in efter att polygonerna landat. Slumpmässig stagger ger ögat en sekvens att följa istället för fem markörer i rutnät.

decorative · ≤ 0.8s0.69sstagger 0.06sdrop 18pxstudsande
Översikt med POI-markörer
07 · Övergång mellan översikt och fasad

Övergång mellan översikt och fasad

Översikten drar sig tillbaka i djupet, en scrim tonas in mellan lagren och fasaden glider upp via expo.out med blur som försvinner. Fasadens polygoner kommer in efter en kort paus så klienten hinner byta polygon-set. Klick pulsar vald byggnad parallellt med övergången.

transition · ≤ 0.6s0.49s0.45s slideslät2px blur-0.2s poly
Översikt över Hugos kvarter
Hugos fasad
08 · Växling mellan fasader

Växling mellan fasader

Två fasadbilder växlas via en pill-kontroll under bilden. Mekaniken speglar övergången översikt → fasad fast horisontellt: utgående vy dimmas och skalas ner på plats, en scrim tonas in mellan lagren, inkommande vy glider in från motsatt sida med expo.out och blur som försvinner.

transition · ≤ 0.6s0.49s0.45s slideslät2px blur
Hus 1 · Fasad mot innergård
Hus 1 · Fasad mot gatan
Hus 1 · Fasad mot innergård
09 · Expansion till fullskärm

Expansion till fullskärm

Bostadsväljaren expanderar från kort till fullskärm och tillbaka. Chrome morfar på plats istället för att tonas bort.

transition · ≤ 0.6s0.34s0.34ssnabb
10 · Solstudie

Solstudie

Sun study-knappen byter ut fasad-växlaren mot tids-slider och årstidsväljare i den nedre toolbar:en. Fasad-kontrollerna lämnar plats, sol-kontrollerna träder in.

transition · ≤ 0.6s0.42s0.42ssnabbstandard
Hus 1 · fasad mot gatan
Hus 1 · Fasad mot gatan
13:00