diff --git a/examples/waspello/src/cards/Main.css b/examples/waspello/src/cards/Main.css
index 0029bcbf4..a72be0a64 100644
--- a/examples/waspello/src/cards/Main.css
+++ b/examples/waspello/src/cards/Main.css
@@ -233,12 +233,18 @@ button.open-add-list {
 
   background-color: #ebecf0;
   border-radius: 3px;
+
+  transition: transform 200ms ease-in-out;
 }
 
 .list--dragging {
   transform: rotate(2deg);
 }
 
+.list--drop-animating {
+  transform: rotate(0deg);
+}
+
 .list-header {
   display: flex;
   align-items: center;
@@ -422,12 +428,17 @@ textarea.card-composer-textarea {
   margin-bottom: 8px;
   padding: 6px 8px 2px;
   box-shadow: 0 1px 0 rgb(9 30 66 / 25%);
+  transition: transform 200ms ease-in-out;
 }
 
 .list-card--dragging {
   transform: rotate(4deg);
 }
 
+.list-card--drop-animating {
+  transform: rotate(0deg);
+}
+
 .list-card-title {
   display: block;
   margin: 0 0 4px;
diff --git a/examples/waspello/src/cards/MainPage.jsx b/examples/waspello/src/cards/MainPage.jsx
index 5871ee610..72a01aca4 100644
--- a/examples/waspello/src/cards/MainPage.jsx
+++ b/examples/waspello/src/cards/MainPage.jsx
@@ -236,6 +236,17 @@ const List = ({ list, index, cards }) => {
     )
   }
 
+  const getListClassName = (snapshot) => { 
+    const classes = ['list'] 
+    if (snapshot.isDragging) { 
+      classes.push('list--dragging')
+    }
+    if (snapshot.isDropAnimating) {
+      classes.push('list--drop-animating')
+    } 
+    return classes.join(' ') 
+  }
+  
   return (
     <Draggable
       key={list.id}
@@ -248,7 +259,7 @@ const List = ({ list, index, cards }) => {
           {...provided.draggableProps}
           {...provided.dragHandleProps}
         >
-          <div className={`list ${snapshot.isDragging && 'list--dragging'}`}>
+          <div className={getListClassName(snapshot)}>
             <div className='list-header'>
             {isHeaderTargetShown ? (
                 <div
@@ -324,6 +335,17 @@ const Cards = ({ cards }) => {
 }
 
 const Card = ({ card, index }) => {
+  const getListCardClassName = (snapshot) => { 
+    const classes = ['list-card'] 
+    if (snapshot.isDragging) { 
+      classes.push('list-card--dragging')
+    }
+    if (snapshot.isDropAnimating) {
+      classes.push('list-card--drop-animating')
+    } 
+    return classes.join(' ') 
+  }
+
   return (
     <Draggable
       key={card.id}
@@ -335,7 +357,7 @@ const Card = ({ card, index }) => {
           {...provided.draggableProps}
           {...provided.dragHandleProps}
         >
-          <div className={`list-card ${snapshot.isDragging && 'list-card--dragging'}`}>
+          <div className={getListCardClassName(snapshot)}>
             <span className='list-card-title'>{card.title}</span>
           </div>
         </div>