jokul
jokul copied to clipboard
fremtind
Hook eller annet hjelpemiddel for animasjon FLIP/exit uten eksterne biblioteker
I dag trekker vi veldig fort inn Framer Motion (eller lignende) for å animere elementer som bytter posisjon eller går inn/ut av DOM. Det er for så vidt ikke noe galt i det, men det drar potensielt med ganske store kodemengder for til tider enkle animasjoner.
Det hadde vært fint å kunne tilby ett eller flere hjelpemidler for å animere objekter som går inn/ut av DOM eller endrer posisjon (vha. FLIP eller andre etablerte mønstre). Alternativt finne en standardisert løsning via et bibliotek som ikke er så tungt som Framer Motion.
🎯 Sjekkliste
- [ ] Du har laget en branch i Figma og bedt om feedback
- [ ] Du har sjekket at alt av kode og tester kjører som det skal
- [ ] Dere har sammen sjekket at resultatet av design og kode matcher
Hvis du står fast og trenger tips kan du ta en kikk i huskelista vår, eller tagge noen fra Jøkul-teamet i dette issuet.
Noen ressurser:
- Om FLIP-animasjoner og React (lifecycles å huke seg på, f. eks.).
- Salesforce om implementering av animasjoner (CSS > JS. Hvis JS, native WAAPI > GreenSock [pga eksisterende bruk, i vårt tilfelle Framer] > Lottie).
- WAAPI på MDN
- react-flip-toolkit (prior art, API-design for Jøkul-hooks).
- Motion One (potensiell reserveløsning, bruker WAAPI under panseret).
Ramlet over React Transition Group, og ser MUI bruker det til blant annet å tilby noen Transition-komponenter som Zoom
Viser seg at Framer Motion 7.0.1 og nyere har en bruk av React 18 sin useId, som gjør at Tooltip brekker for brukere under React 18. En workaround er å pinne framer-motion til 7.0.0, men vi bør heller pushe på for å få erstattet det. Jeg rebaset branchen i #3202 på main nå i dag.
Hoi - Til info: Vi kikker på animasjoner i Flyt, så ta gjerne en prat med utviklerne i Flyt-teamet om dere har noen best practices eller annet. Jeg har nevnt dette for noen av Flyt-utviklerne, så mulig de dukker opp i designsystemforum snart for å ta en prat.
