Add tweened example

Author: vadimkorr

package-lock.json

@@ -17,6 +17,7 @@
     "svelte": "^3.0.0"
   },
   "dependencies": {
+    "d3-interpolate": "^2.0.1",
     "sirv-cli": "^1.0.0",
     "uuid": "^8.3.2"
   }

package.json

@@ -13,22 +13,35 @@
 	}
 </script>
 
-<AddTodoItem
-	title='Please type todo here:'
-	buttonTitle={`Add (${$todoStats.doneCount}/${$todoStats.totalCount})`}
-	on:add={handleAddTodoItem}
-/>
+<div class="add-todo-item-container">
+	<AddTodoItem
+		title='Please type todo here:'
+		buttonTitle={`Add (${$todoStats.doneCount}/${$todoStats.totalCount})`}
+		on:add={handleAddTodoItem}
+	/>
+</div>
 
 {#if $todoStats.totalCount === 0}
   No items yet
 {:else}
-  <div>
+  <div class="todo-items-container">
 		{#each $todoItems as { id, text, checked }, index (id)}
-			<TodoItem
-				text={`${index + 1}: ${text}`}
-				{checked}
-				on:checked={event => handleItemChecked(id, event.detail)}
-			/>
+			<div class="todo-item-container">
+				<TodoItem
+					text={`${index + 1}: ${text}`}
+					{checked}
+					on:checked={event => handleItemChecked(id, event.detail)}
+				/>
+			</div>
     {/each}
   </div>
 {/if}
+
+<style>
+	.add-todo-item-container {
+		margin-bottom: 5px;
+	}
+	.todo-items-container:not(:last-child) > .todo-item-container {
+		margin-bottom: 5px;
+	}
+</style>

src/App.svelte

@@ -1,16 +1,32 @@
 <script>
   import { createEventDispatcher } from 'svelte'
+  import { tweened } from 'svelte/motion';
+  import { cubicOut } from 'svelte/easing';
+  import { interpolateLab } from 'd3-interpolate';
+  
   const dispatch = createEventDispatcher()
 
   export let text
   export let checked
 
+  const checkedMotion = tweened('#faf792', {
+    delay: 0,
+    duration: 250,
+    easing: cubicOut,
+    interpolate: (from, to) => (t) => {
+      // return t < 0.5 ? from : to
+      // interpolate and interpolateLab function signatures are the same
+      return interpolateLab(from, to)(t)
+    }
+  });
+
   $: {
     dispatch('checked', checked)
+    checkedMotion.set(checked ? '#64ad80' : '#faf792')
   }
 </script>
 
-<div class="main-container">
+<div class="main-container" style="background-color: {$checkedMotion}">
   <input
     type="checkbox"
     bind:checked={checked}