Tutorial

Drag and drop com Framer Motion

Nível
8 aulas
21m

Assistir agora

1. Apresentação do Projeto

Sobre o Tutorial

Esse tutorial mostra o passo-a-passo para resolver o Mini Projeto Drag and Drop com React e Framer Motion.

Descrição do projeto

Utilize o React e o Framer Motion e construa uma playlist em que você poderá mudar a ordem das músicas utilizando drag and drop! O objetivo desse mini projeto é tanto descobrir como o Framer Motion facilita o uso de drag and drop bem como entender como funciona, por trás dos panos, a lógica de reordenação de uma lista drag and drop.

🤓 Antes de começar

Esse Mini Projeto já possui um template/boilerplate na raiz do repositório com o layout pronto para você focar apenas nas bibliotecas principais (React e Framer Motion).

Se você quer também treinar outras skills front-end como design e CSS, você poderá fazer o projeto do zero (basta apagar os arquivos e começar a partir daí).

🔨 Requisitos

  • A aplicação deverá ser mobile-first. Construa pensando em um celular, e não em um monitor.
  • Utilize as bibliotecas React + Framer Motion.
  • Crie o comportamento de "drag and drop":
    • Quando o usuário realizar um clique longo (sem soltar o mouse), o card de música devera "descolar" da aplicação e ser reordenável.
    • Quando o usuário "soltar" o clique, a música deverá permanecer em sua nova posição.
  • Utilize o componente Reorder do Framer Motion.

🔍 Dicas

  • Estude a biblioteca framer/motion, pois ela possui ferramentas poderosas de animação.
  • Estude particularmente o componente Reorder da biblioteca framer/motion
  • Estude a propriedade pointer-events do CSS.
  • Utilize o Devtools do seu navegador com alguma pré-definição de tela mobile. O Chrome, por exemplo, possui essa funcionalidade.

🎨 Design Sugerido

Temos uma sugestão de design no Figma. Entretanto, fique à vontade para usar sua criatividade e criar um design único.

Screenshot

Design Sugerido

Figma

🔗 Link do design

👉🏽 O que você irá praticar

Framer Motion

  • Listas reordenáveis com Drag and Drop
  • Componente Reorder

React

  • Manipulação de Estado
  • Renderização de Listas

CSS

  • Propriedade pointer-events

Pré-requisitos

  • HTML, CSS
  • JavaScript, React
  • TailwindCSS é recomendável, já que o template está estilizado com ele.

Seu Instrutor

Roberto Cestari

Codante.io

Aulas

  1. 1.

    Apresentação do Projeto

    00:52
  2. 2.

    Instalando o template inicial

    01:21
  3. A estrutura do projeto

    02:16
  4. Os componentes Reorder do Framer Motion

    02:32
  5. Adicionando o Framer Motion ao Projeto

    07:10
  6. Adicionando Estado para tornar a lista reativa

    02:41
  7. A propriedade pointer-events do CSS

    03:32
  8. Finalização e próximos passos

    00:58