Hook eller annet hjelpemiddel for animasjon FLIP/exit uten eksterne biblioteker

[piofinn]

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.

[wkillerud]

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).

[wkillerud]

Ramlet over React Transition Group, og ser MUI bruker det til blant annet å tilby noen Transition-komponenter som Zoom

[wkillerud]

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.

[leon-ho]

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.