Animacje komponentów z Framer Motion 🚀

Animacje, interakcje i więcej: Poznaj Framer Motion

1. Animacje CSS: Umożliwia animowanie różnych właściwości CSS, takich jak kolor, wielkość, marginesy czy pozycję elementów.
2. Drag and drop: Prosta implementacja mechanizmu "przeciągnij i upuść" dla elementów na stronie.
3. Gesty: Obsługa gestów, takich jak przesunięcia czy przybliżania, co pozwala na tworzenie bardziej interaktywnych aplikacji.
4. Spring physics: Zastosowanie fizyki sprężynowej do animacji, co pozwala na tworzenie bardziej realistycznych i płynnych efektów.
5. Orchestration: Kontrolowanie kolejności i synchronizacji animacji wielu elementów, dzięki czemu możemy tworzyć złożone sceny.
6. Variants: Tworzenie zdefiniowanych wariantów animacji dla różnych stanów, co ułatwia zarządzanie i kontrolowanie animacji.
7. Shared layout animations: Ułatwienie animacji między różnymi komponentami, np. podczas zmiany stron w aplikacji.
8. AnimatePresence: Łatwe dodawanie animacji wejścia i wyjścia dla komponentów, które pojawiają się i znikają z drzewa DOM.
9. Server-side rendering (SSR) compatibility: Współpraca z renderowaniem po stronie serwera, co ułatwia tworzenie zoptymalizowanych aplikacji.
10. Performance optimizations: Optymalizacja wydajności animacji, dzięki czemu działają one płynnie nawet na słabszych urządzeniach.

Konfiguracja projektu

function Drawer() {
	const [open, setOpen] = useState(false);

  return (
    <>
        {open && (
          <div
            className="drawerOverlay"
          />
        )}
      <div
        className='drawer'
      >
        <div
          className='drawerInner'
        >
        <DrawerHeader />
        <DrawerContent />
        </div>
      </div>
    </>
  );
}

.drawer {
  font-family: 'Open Sans', sans-serif;
  position: fixed;
  top: calc(100% - 94px);
  width: 100%;
  left: 0;
  right: 0;
  height: 90%;
  z-index: 4;
  pointer-events: initial;
}

.drawerInner {
  height: 100%;
}

.drawerOverlay {
  width: 100%;
  height: 100vh;
  position: fixed;
  background-color: rgba(0, 0, 0, 0.3);
  top: 0;
  left: 0;
  z-index: 3;
  backdrop-filter: blur(0.4rem);
  pointer-events: initial;
  transition: all 0.3s ease-in-out;
}

Dodanie animacji z framer motion

const overlayVariants: Variants = {
    hidden: { opacity: 0 },
    visible: { opacity: 1 },
  };

<AnimatePresence>
  {open && (
    <motion.div
      className="drawerOverlay"
      initial="hidden"
      animate="visible"
      exit="hidden"
      onClick={handleCloseDrawer}
      variants={overlayVariants}
    />
  )}
</AnimatePresence>

• initial - stan początkowy komponentu
• animate - jakie własności elementu mają zostać zanimowane - w naszym przypadku opacity ma zostać zanimowane od wartości 0 do wartości 1
• exit - jaka animacja ma zostać odpalona na usunięcie elementu z DOM. W naszym przypadku będzie to animacja ze stanu visible do hidden

const variants: Variants = {
    inactive: { y: 0 },
    active: { y: '-80%' },
 };

const handleDragEnd = (_: unknown, info: PanInfo): void => {
  if (info.offset.y < 0 && info.offset.y < -80) {
    setOpen(true);
  }

  if (info.offset.y > 0 && info.offset.y > 80) {
    setOpen(false);
  }
};

<motion.div
  className={'drawer'}
  dragElastic={0.8}
  onDragEnd={handleDragEnd}
  dragConstraints={{ top: 0, bottom: 0 }}
  drag="y"
>
  <motion.div
    className={'drawerInner'}
    transition={{ type: 'spring', duration: 0.8 }}
    variants={variants}
    initial="inactive"
    animate={open ? 'active' : 'inactive'}
  >
    <DrawerHeader />
    <div className='drawer-content'>
     {/* Placeholder for content */}
    </div>
  </motion.div>
</motion.div>

• drag="y" - definiuje nam, w którą stronę użytkownik może przeciągać. U nas tylko w pionie (góra-dół)
• dragConstraints - definiuje nam granice, za jakie element może zostać przeciagnięty. My blokujemy w taki sposób, aby nie można było wyjść poza górę i dół.
• onDragEnd - metoda odpalająca się, kiedy użytkownik skończy wykonywać gest - tutaj przekazujemy wcześniej zdefiniowaną funkcję
• dragElastic i transition - dodatkowe parametry animacji. Zachęcam do zabawy z nimi!

Rezultat końcowy

I to by było na tyle. Jak widać, nie potrzeba dużo skomplikowanego kodu, aby uzyskać ładną, płynną i wydajną animację. Oto prezentuje się efekt końcowy: