Skip to content

Instantly share code, notes, and snippets.

@albingroen

albingroen/todos-animation.tsx

Created August 2, 2020 14:59
Show Gist options
  • Save albingroen/f54b88b999ee30de87d6dbde1e40dde9 to your computer and use it in GitHub Desktop.
Save albingroen/f54b88b999ee30de87d6dbde1e40dde9 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
todos-animation.tsx
<AnimateSharedLayout>
<motion.div layout>
<AnimatePresence>
{todos.map((todo) => (
<motion.div
initial={{ opacity: 0, x: -50 }}
animate={{ opacity: 1, x: 0 }}
exit={{ opacity: 0, x: 50 }}
key={todo.id}
layout
>
<Todo {...todo} />
</motion.div>
))}
</AnimatePresence>
</motion.div>
<motion.div layout>
<Form />
</motion.div>
</AnimateSharedLayout>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment