Korkealuokkaistaanimaatiotailmanperformance-veroa
Suurin osa 'palkintotason' sivustoista tekee hiljaisen vaihtokaupan: ne näyttävät upeilta ja latautuvat kuin tervassa. Raskas animaatiokirjasto, WebGL-tausta ja sata vieritystapahtumaa, ja yhtäkkiä koko sivu nykii keskihintaisella puhelimella ja Core Web Vitals painuu punaiselle. Rakensin vuosia animoituja sivustoja markkinointitoimistossa, ja koko juju on kieltäytyä tuosta vaihtokaupasta. Tässä työkalut joilla saa liikkeen ja nopeuden yhtä aikaa, samat jotka pyörivät tämänkin sivun alla.
Ansa: animaatio joka romahduttaa Core Web Vitalsin
Animaatio maksaa kolmella tavalla. Se voi pakottaa selaimen laskemaan sivun asettelun uusiksi. Se voi tukkia pääsäikeen pyörittämällä JavaScriptiä joka ainoalla ruudunpäivityksellä. Ja se voi lähettää käyttäjälle megatavuja kirjastokoodia ennen kuin mikään edes liikkuu. Jokainen alla oleva valinta on pohjimmiltaan yhden näiden kolmen välttämistä.
Pehmeä vieritys Lenisillä, ei vierityksen kaappausta
Lenis antaa sen pehmeän, painavan vieritystunnun pehmentämällä vierityksen arvoa, kaappaamatta sitä itselleen: vierityspalkki toimii yhä, näppäimistö ja saavutettavuus toimivat yhä, ja sen saa kytkettyä kokonaan pois niiltä jotka haluavat vähemmän liikettä. Se painaa muutaman kilotavun ja pyörittää huomaamatta kaikkea muuta, koska kun vierityksen arvo on kerran pehmeä, siihen on helppo ripustaa animaatiot siististi.
GSAP ja ScrollTrigger koreografiaan
Kaikkeen mikä on sidottu vierityksen kohtaan, kuten paikalleen lukittuihin osioihin, kerran laukeaviin paljastuksiin ja omaa tahtiaan liikkuviin elementteihin, GSAP ja ScrollTrigger on yhä luotettavin työkalu. Tärkein sääntö on animoida vain transformia ja opacityä. Ne kaksi pyörivät näytönohjaimella eivätkä koskaan pakota asettelua uusiksi, joten otsikko voi liukua ja häipyä sulavasti muun sivun pysyessä rauhallisena. Sillä hetkellä kun animoit leveyttä, korkeutta tai sijaintia, peli on menetetty.
Framer Motion komponenttien liikkeeseen
Reactin sisällä Framer Motion hoitaa pienemmän ja tilallisen puolen: valikoiden avautumiset, hover-tilat sekä komponenttien ilmestymis- ja poistumisanimaatiot. Se ajattelee komponentteina ja toimii luontevasti Next.js:n kanssa. Tartun GSAP:iin kun liike seuraa vieritystä, ja Frameriin kun liike kuuluu komponentin omaan elinkaareen. Kun kumpaakin käyttää siihen mihin se on hyvä, molemmat pysyvät kevyinä.
Säännöt joista en jousta
- Animoi vain transformia ja opacityä. Jos ominaisuus pakottaa asettelun uusiksi, keksi toinen tapa.
- Paljasta elementit vierittäessä IntersectionObserverilla, kerran, ja katkaise sen jälkeen. Älä pidä tarkkailijoita käynnissä sisällölle jota kukaan ei katso.
- Kunnioita käyttäjän 'vähennä liikettä' -asetusta. Animaatio on viimeistely, ei pakko, ja osa käyttäjistä tarvitsee sen pois.
- Lataa raskaat osat viiveellä. WebGL-tausta tai iso animaatio ei saa koskaan viivyttää sivun ensimmäistä piirtoa.
- Mittaa oikealla keskihintaisella puhelimella, älä läppärillä. Siellä se ruutubudjetti oikeasti puristaa.
Mikään tästä ei ole erikoista. Se on vain kieltäytymistä pitämästä animaatiota ja nopeutta toistensa vastakohtina. Custom WebGL-taustakin kuulostaa raskaalta, mutta yhtenä shaderina ilman erillistä 3D-kirjastoa se maksaa vähemmän kuin useimmat hero-kuvat. Juuri kuri, ei pidättyväisyys, on se mikä antaa sivun tuntua elävältä ja silti latautua salamannopeasti.
Miksi juuri nämä työkalut, edelleen
Next.js rakenteeseen ja renderöintiin, Lenis vieritykseen, GSAP koreografiaan, Framer Motion komponentteihin, ja käsin kirjoitettu shader silloin kun sivu tarvitsee sielun. Jokainen palanen ansaitsee paikkansa, ja jokainen on valittu pysymään pois kriittiseltä polulta. Juuri niin syntyy sivu joka voittaa sekä fiiliksessä että Lighthouse-pisteissä, ilman että toisesta on tingittävä.