7^th Practical Class:
TODO List Page

Code

• here you can see working final version (with all refactorings and features)
  • code is in branch practical-07-final (also see the diff)
• code in state from the end of each practical class:
  • for 16:15 see branch practical-07-1615-end (also see the diff)
  • for 18:00 see branch practical-07-1800-end (also see the diff)

Animation - Framer Motion

Animations in final version of TODO List are done using framer-motion package (GitHub page)

You can add it to your frontend using: yarn add framer-motion@4 (you have to use version 4, because due to unresolved bug version 5 does not work with our setup now).

Example

Notes for code below:

• AnimatePresence animates when you remove elements from it (see the docs)
  • setting initial={false} will disable the animation when you render the page for the first time
• motion.div is version of div with animation support from Framer Motion (see the docs):
  • initial={{ ... }} are initial values of the element when it is mounted to the page
  • animate={{ ... }} are final values after element is mounted and animation stops
  • exit={{ ... }} are values that will be animated to when you remove the element
  • in addition you can use <motion.div layout>...</div> to animate space around the component
    • you can see it here in TodoListTemplate
    • it will add smooth animation when you add or delete TODO item
• see more examples
• note:
  • some animations can be done purely in CSS, but not everything what Framer Motion supports can be done in CSS
  • Framer Motion is using high performance JavaScript APIs for animations, performance is similar to pure CSS animations