{"@attributes":{"version":"2.0"},"channel":{"title":"DEV Community: Mario Pabon","description":"The latest articles on DEV Community by Mario Pabon (@restlessbit).","link":"https:\/\/dev.to\/restlessbit","image":{"url":"https:\/\/media2.dev.to\/dynamic\/image\/width=90,height=90,fit=cover,gravity=auto,format=auto\/https:%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F17640%2Fe3806af9-23b7-42b6-8dd4-389a3de91c5e.png","title":"DEV Community: Mario Pabon","link":"https:\/\/dev.to\/restlessbit"},"language":"en","item":[{"title":"Adding animations to your React app with React Transition Group","pubDate":"Tue, 11 Jul 2017 15:57:57 +0000","link":"https:\/\/dev.to\/underdogio\/adding-animations-to-your-react-app-with-react-transition-group","guid":"https:\/\/dev.to\/underdogio\/adding-animations-to-your-react-app-with-react-transition-group","description":"

Adding functional animations<\/a> to your app can be a great way to enhance its user experience. When used correctly, animation can help guide the user's attention to certain parts of your app, help re-enforce relationships within the interface, and prevent change blindness<\/a>. <\/p>\n\n

An example of an animation that can improve the user's experience is fading in an item when it is added to a list. The steps for this animation might look something like this:<\/p>\n\n

    \n
  1. Render the new item.<\/li>\n
  2. Prepare the item for the animation. In this case, set its opacity to 0<\/code>.<\/li>\n
  3. Transition the opacity of the element from 0<\/code> to 1<\/code> over a period of time.<\/li>\n<\/ol>\n\n

    And for removing the item:<\/p>\n\n

      \n
    1. Mark the item for removal.<\/li>\n
    2. Transition the opacity of the element from 1<\/code> to 0<\/code> over a period of time.<\/li>\n
    3. Remove the element once the transition has completed.<\/li>\n<\/ol>\n\n

      Managing all of these states can get cumbersome, so let's try to find a library that can handle it for us. Enter React Transition Group<\/a>. <\/p>\n\n

      React Transition Group contains a set of components that manage the state of a component mounting and un-mounting over time. It doesn't dictate how our components behave as they are mounted or unmounted\u2013 that part is up to us. This minimalism gives us the flexibility to define our animations however we want.<\/p>\n\n

      In this article we are going to add transition animations to a board of cards, animating cards as they are added to and removed from the board.<\/p>\n\n

      Here's the finished result:<\/p>\n\n

      \"End<\/a><\/p>\n\n

      You can see a live demo of the animation here<\/a>.<\/p>\n\n

      \n \n \n Prerequisites\n<\/h2>\n\n

      You should have a basic understanding of React<\/a> and CSS transitions<\/a>.<\/p>\n\n

      \n \n \n Packages used\n<\/h3>\n\n
        \n
      1. react v15.6.1<\/a><\/li>\n
      2. react-dom v15.6.1<\/a><\/li>\n
      3. react-transition-group v2.0.2<\/a><\/li>\n<\/ol>\n\n

        \n \n \n Getting set up\n<\/h2>\n\n

        Before we can add animations to our app, we're going to need an app to animate!<\/p>\n\n

        The app we're going to be creating is fairly simple as it consists of just 3 components:<\/p>\n\n

          \n
        1. \n<Card \/><\/code>\n\n