Justering på FadeInFromTop

[mhauken]

Litt aggressivt å flytte hele objektet. Holder med 1rem.

[XSlemX]

Burde ikke dette være en prop med dette som default? Dette er jo "breaking" 😂

[mhauken]

Kanskje? Søkte forøvrig i hele Github, og ingen steder vi har brukt den der i hvertfall.. 100% er veeeledig aggressivt da.

Men er kanskje mer funksjonelt med noe slikt, det er ikke breaking. Da burde den i såfall endret navn til fadeInFromY eller noe..

const fadeInFromTop = (y = "-100%") => keyframes`
from {
    opacity: 0;
    transform: translateY(${y});
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
`

[mhauken]

Eller jo: den er nok breaking siden du må referere ${FadeInFromTop()} og ikke ${FadeInFromTop}

Men er ikke v13. breaking anyway? Forøvrig klager linteren over stor forbokstav om vi skal ta imot props, så den burde nok vært ${fadeInFromTop()}

[XSlemX]

Jeg misforsto! Denne fader jo inn fra "toppen" aka utenfor skjermen. Men hva med et element som er større enn 1rem?

[XSlemX]

Vi trenger ikke prop på den iaf. Men er 0.5rem nok?

[mhauken]

Jada. Det er bare for å gi en effekt for at det kommer ovenifra. Ikke nødvendigvis fra toppen av skjermen. Animasjoner som kommer helt fra toppen kan bli litt voldsomme, men det kan jo være ønskelig det også.. 🤔 Eksempel på 0.5rem er vedlagt. Men likte egentlig den løsningen med prop. Da har vi støtte for alt.

[mhauken]

Men det blir i såfall breaking siden den går fra FadeInFromTop til fadeInFromTop(). Hva tenker du? tanker @robinsandborg ?

[robinsandborg]

Greit for meg, bruker stort sett ikke animasjonene i bento siden jeg ikke har oversikt over hva de gjør 😅

[mhauken]

Haha. Er vel stort sett jeg som bruker de, ja. Så for min del ville jeg gått over til den funksjonen. Burde potensielt hatt en css-blob som resatte det også ala:

const resetFadeFromUp = css`
opacity: 0;
translateY: -{y};
`

Sånn sett kan den blubben bare refere direkte til keyframen også slik at du bare kan si fadeInFromUp og så har den reset + animasjonen i seg. Da slipper du å tenke på reset, etc.🤔

Så kan den få proppen y + hastighet? Forenkler ting en del..

[mhauken]

Ok. Lager en commit her på dette, og har det internt i danske bank prosjektet en stund: Forslaget er som følger:

const fadeInFromTopKeyframe = (y = "-0.5rem") => keyframes`
  from {
    opacity: 0;
    transform: translateY(${y});
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
`

const fadeInFromTop = (y = "-0.5rem") => css`
  opacity: 0;
  transform: translateY(${y});
  animation: ${fadeInFromTopKeyframe({ y })} 0.4s ease-out forwards 1;
`

Da kan den brukes bare slik inni en styled component: ${fadeInFromTop()}; og har magisk alt appliet når det blir mountet. Kan også sende inn ${fadeInFromTop('100%')}; om en heller ønsker andre avstander..

Det er nok sånn alle animasjoner heller burde vært håndtert siden man da slipper å spesifisere hele animation-syntaxet. (Ja, vi bør eksportere ut keyframesene også, men siden start-punktet alltid følger med er det veldig behagelig å bare kunne skrive ${fadeInFromTop()};)