diff --git a/packages/core/src/components/item-sliding/item-sliding.tsx b/packages/core/src/components/item-sliding/item-sliding.tsx
index c64dce05a7..ecfe9a198e 100644
--- a/packages/core/src/components/item-sliding/item-sliding.tsx
+++ b/packages/core/src/components/item-sliding/item-sliding.tsx
@@ -1,4 +1,4 @@
-import { Component, h, Ionic, State } from '@stencil/core';
+import { Component, h, Ionic, Method, State } from '@stencil/core';
 
 import { GestureDetail, HostElement } from '../../utils/interfaces';
 import { swipeShouldReset } from '../../utils/helpers';
@@ -240,7 +240,10 @@ export class ItemSliding {
   }
 
   onDragEnd(gesture: GestureDetail) {
-    this.selectedContainer.endSliding(gesture.velocityX);
+    let coordX = gesture.currentX;
+    let deltaX = (coordX - this.firstCoordX);
+    let deltaT = (Date.now() - this.firstTimestamp);
+    this.selectedContainer.endSliding(deltaX / deltaT);
     this.selectedContainer = null;
     this.preSelectedContainer = null;
   }
@@ -461,6 +464,7 @@ export class ItemSliding {
    * }
    * ```
    */
+  @Method()
   close() {
     this.setOpenAmount(0, true);
   }
@@ -498,4 +502,4 @@ export class ItemSliding {
     </ion-gesture>
     );
   }
-}
\ No newline at end of file
+}
diff --git a/packages/core/src/components/item-sliding/test/basic.html b/packages/core/src/components/item-sliding/test/basic.html
index a888dcaa75..1d27e86e20 100644
--- a/packages/core/src/components/item-sliding/test/basic.html
+++ b/packages/core/src/components/item-sliding/test/basic.html
@@ -8,15 +8,27 @@
 </head>
 <body>
   <ion-app>
+    <ion-header>
+      <ion-toolbar>
+        <ion-title>Sliding Items</ion-title>
+        <ion-buttons slot="start">
+          <ion-button onclick="changeDynamicText()">Dynamic</ion-button>
+        </ion-buttons>
+        <ion-buttons slot="end">
+          <ion-button onclick="reload()">Reload</ion-button>
+        </ion-buttons>
+      </ion-toolbar>
+    </ion-header>
+
     <ion-content>
 
       <div padding>
         <ion-button block onclick="toggleSliding()">Toggle sliding</ion-button>
-        <ion-button block onclick="changeDynamic()">Change Dynamic Options</ion-button>
+        <ion-button block onclick="toggleDynamicOptions()">Toggle Dynamic Options</ion-button>
         <ion-button block onclick="closeOpened()">Close Opened Items</ion-button>
       </div>
 
-      <ion-list #myList>
+      <ion-list id="list">
 
         <ion-item-sliding>
           <ion-item>
@@ -33,14 +45,14 @@
               One Line, dynamic option and text
             </ion-label>
           </ion-item>
-          <ion-item-options *ngIf="showOptions">
+          <ion-item-options class="show-options">
             <ion-item-option color="primary">
               <ion-icon name="more"></ion-icon>
-              {{ moreText }}
+              <span class="more-text"></span>
             </ion-item-option>
             <ion-item-option color="secondary" onclick="archive('item6')">
               <ion-icon name="archive"></ion-icon>
-              {{ archiveText }}
+              <span class="archive-text"></span>
             </ion-item-option>
           </ion-item-options>
         </ion-item-sliding>
@@ -56,19 +68,19 @@
               <ion-icon slot="icon-only" name="more"></ion-icon>
             </ion-item-option>
           </ion-item-options>
-          <ion-item-options side="right" *ngIf="showOptions">
+          <ion-item-options side="right" class="show-options">
             <ion-item-option color="primary">
               <ion-icon name="more"></ion-icon>
-              {{ moreText }}
+              <span class="more-text"></span>
             </ion-item-option>
             <ion-item-option color="secondary" onclick="archive('item6')">
               <ion-icon name="archive"></ion-icon>
-              {{ archiveText }}
+              <span class="archive-text"></span>
             </ion-item-option>
           </ion-item-options>
         </ion-item-sliding>
 
-        <ion-item-sliding id="item1"00>
+        <ion-item-sliding id="item100">
           <ion-item href="#">
             <ion-label>
               <h2>HubStruck Notifications</h2>
@@ -81,12 +93,12 @@
           </ion-item>
 
           <ion-item-options side="left">
-            <ion-item-option onclick="noclose(item100)">
+            <ion-item-option onclick="noclose('item100')">
               No close
             </ion-item-option>
           </ion-item-options>
           <ion-item-options side="right">
-            <ion-item-option color="danger" onclick="unread('item100')">
+            <ion-item-option color="light" onclick="unread('item100')">
               <ion-icon slot="icon-only" name="trash"></ion-icon>
             </ion-item-option>
             <ion-item-option onclick="unread('item100')">
@@ -97,13 +109,13 @@
         </ion-item-sliding>
 
         <ion-item-sliding id="item0">
-          <ion-item text-wrap onclick="didClick(item0)">
+          <ion-item text-wrap onclick="clickedItem('item0')">
             <ion-label>
               <h2>RIGHT side - no icons</h2>
               <p>Hey do you want to go to the game tonight?</p>
             </ion-label>
           </ion-item>
-          <ion-item-options *ngIf="slidingEnabled">
+          <ion-item-options class="sliding-enabled">
             <ion-item-option color="primary" onclick="archive('item0')">Archive</ion-item-option>
             <ion-item-option color="danger" onclick="del('item0')">Delete</ion-item-option>
           </ion-item-options>
@@ -116,7 +128,7 @@
               <p>I think I figured out how to get more Mountain Dew</p>
             </ion-label>
           </ion-item>
-          <ion-item-options side="left" *ngIf="slidingEnabled">
+          <ion-item-options side="left" class="sliding-enabled">
             <ion-item-option color="primary" onclick="archive('item1')">Archive</ion-item-option>
             <ion-item-option color="danger" onclick="del('item1')">Delete</ion-item-option>
           </ion-item-options>
@@ -130,13 +142,13 @@
               <p>I think I figured out how to get more Mountain Dew</p>
             </ion-label>
           </ion-item>
-          <ion-item-options side="left" (ionSwipe)="unread($event)" *ngIf="slidingEnabled">
+          <ion-item-options side="left" (ionSwipe)="unread($event)" class="sliding-enabled">
             <ion-item-option color="secondary" expandable onclick="unread('item2')">
               <ion-icon name="ios-checkmark"></ion-icon>Unread
             </ion-item-option>
           </ion-item-options>
 
-          <ion-item-options side="right" (ionSwipe)="del('item2')" *ngIf="slidingEnabled">
+          <ion-item-options side="right" (ionSwipe)="del('item2')" class="sliding-enabled">
             <ion-item-option color="primary" onclick="archive('item2')">
               <ion-icon name="mail"></ion-icon>Archive
             </ion-item-option>
@@ -153,7 +165,7 @@
               <p>I think I figured out how to get more Mountain Dew</p>
             </ion-label>
           </ion-item>
-          <ion-item-options side="left" icon-start (ionSwipe)="unread($event)" *ngIf="slidingEnabled">
+          <ion-item-options side="left" icon-start (ionSwipe)="unread($event)" class="sliding-enabled">
             <ion-item-option color="secondary" expandable onclick="unread('item3')">
               <ion-icon name="ios-checkmark"></ion-icon>Unread
             </ion-item-option>
@@ -163,7 +175,7 @@
             <ion-item-option color="primary" onclick="archive('item3')">
               <ion-icon name="mail"></ion-icon>Archive
             </ion-item-option>
-            <ion-item-option color="danger" onclick="del('item3')" expandable *ngIf="slidingEnabled">
+            <ion-item-option color="danger" onclick="del('item3')" expandable class="sliding-enabled">
               <ion-icon name="trash"></ion-icon>Delete
             </ion-item-option>
           </ion-item-options>
@@ -178,14 +190,14 @@
             </ion-label>
           </ion-item>
           <ion-item-options icon-start (ionSwipe)="archive($event)">
-            <ion-item-option color="primary" onclick="archive('item4')" expandable *ngIf="slidingEnabled">
+            <ion-item-option color="primary" onclick="archive('item4')" expandable class="sliding-enabled">
               <ion-icon name="archive"></ion-icon>Archive
             </ion-item-option>
           </ion-item-options>
         </ion-item-sliding>
 
 
-        <ion-item-sliding id="item5" *ngIf="slidingEnabled">
+        <ion-item-sliding id="item5" class="sliding-enabled">
           <ion-item>
             <ion-avatar slot="start">
               <img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAAAAACH5BAAAAAAALAAAAAABAAEAAAICTAEAOw==">
@@ -201,7 +213,7 @@
             <ion-item-option color="secondary" onclick="archive('item5')">
               <ion-icon name="archive"></ion-icon>Archive
             </ion-item-option>
-            <ion-item-option color="danger" onclick="del('item5')">
+            <ion-item-option color="light" onclick="del('item5')">
               <ion-icon name="trash"></ion-icon>Delete
             </ion-item-option>
           </ion-item-options>
@@ -217,11 +229,11 @@
           <ion-item-options icon-start>
             <ion-item-option color="primary">
               <ion-icon name="more"></ion-icon>
-              {{ moreText }}
+              <span class="more-text"></span>
             </ion-item-option>
             <ion-item-option color="secondary" onclick="archive('item7')">
               <ion-icon name="archive"></ion-icon>
-              {{ archiveText }}
+              <span class="archive-text"></span>
             </ion-item-option>
           </ion-item-options>
         </ion-item-sliding>
@@ -236,14 +248,16 @@
               <p>Paragraph text.</p>
             </ion-label>
           </ion-item>
-          <ion-item-options (ionSwipe)="download($event)">
+          <ion-item-options (ionSwipe)="download('item8')">
             <ion-item-option color="primary" onclick="archive('item8')">
               <ion-icon name="archive"></ion-icon>Archive
             </ion-item-option>
-            <ion-item-option color="secondary" expandable onclick="download(item8)">
+            <ion-item-option color="secondary" expandable onclick="download('item8')">
               <ion-icon name="download" class="download-hide"></ion-icon>
               <div class="download-hide">Download</div>
-              <ion-spinner id="download-spinner"></ion-spinner>
+
+              <ion-icon class="download-spinner" name="refresh"></ion-icon>
+              <div class="download-spinner">Loading...</div>
             </ion-item-option>
           </ion-item-options>
         </ion-item-sliding>
@@ -267,7 +281,7 @@
           </ion-label>
         </ion-item>
 
-        <ion-item text-wrap onclick="didClick(item9)">
+        <ion-item text-wrap onclick="clickedItem('item9')">
           <ion-label>
             <h2>Normal button (no sliding)</h2>
             <p>Hey do you want to go to the game tonight?</p>
@@ -277,32 +291,118 @@
       </ion-list>
 
       <script>
-        var dynamicColor = document.getElementById('dynamicColor');
+        var dynamicSlidingEnabled = document.getElementsByClassName('sliding-enabled');
 
-        function unread(item) {
-          console.log('unread');
+        // Toggle the dynamic options
+        var dynamicShowOptions = document.getElementsByClassName('show-options');
+        toggleDynamicOptions();
+
+        function toggleDynamicOptions() {
+          // TODO the element needs to be removed / added to the DOM
         }
 
-        function archive(item) {
-          console.log('archive');
-        }
+        // Change the text for the more and archive buttons
+        var dynamicText = true;
+        var moreTextSpans = document.getElementsByClassName('more-text');
+        var archiveTextSpans = document.getElementsByClassName('archive-text');
+        changeDynamicText();
 
-        function del(item) {
-          console.log('del');
+        function changeDynamicText() {
+          dynamicText = !dynamicText;
+
+          for (var i = 0; i < moreTextSpans.length; i++) {
+            var moreText = dynamicText ? 'Changed More' : 'Dynamic More';
+            moreTextSpans[i].innerHTML = moreText;
+          }
+
+          for (var i = 0; i < archiveTextSpans.length; i++) {
+            var archiveText = dynamicText ? 'Changed Archive' : 'Dynamic Archive';
+            archiveTextSpans[i].innerHTML = archiveText;
+          }
         }
 
         function toggleSliding() {
-
-        }
-
-        function changeDynamic() {
-
+          // this.slidingEnabled = !this.slidingEnabled;
         }
 
         function closeOpened() {
+          var list = document.getElementById('list');
+          list.closeSlidingItems();
+        }
 
+        function noclose(item) {
+          var itemEle = document.getElementById(item);
+          console.log('no close', itemEle);
+        }
+
+        function unread(item) {
+          closeSlidingItem('UNREAD', item);
+        }
+
+        function archive(item) {
+          closeSlidingItem('ARCHIVE', item);
+        }
+
+        function del(item) {
+          closeSlidingItem('DELETE', item);
+        }
+
+        function download(item) {
+          var itemEle = document.getElementById(item);
+          console.log(itemEle);
+          itemEle.classList.add('downloading');
+          setTimeout(() => {
+            alert('Item was downloaded!');
+
+            itemEle.classList.remove('downloading');
+            itemEle.close();
+          }, 1500);
+        }
+
+        function closeSlidingItem(option, item) {
+          var itemEle = document.getElementById(item);
+
+          // TODO open alert instead
+          if (itemEle) {
+            itemEle.close();
+          }
+          console.log(option, itemEle);
+        }
+
+        function clickedItem(item) {
+          var itemEle = document.getElementById(item);
+          console.log('Clicked, ion-item', itemEle);
+        }
+
+        function reload() {
+          window.location.reload();
         }
       </script>
+      <style>
+        img {
+          height: 100px;
+        }
+
+        .download-spinner {
+          display: none;
+        }
+
+        svg circle {
+          stroke: white;
+        }
+
+        .downloading .download-spinner {
+          display: block;
+        }
+
+        .downloading .download-hide {
+          display: none;
+        }
+
+        [padding] {
+          padding: 16px;
+        }
+      </style>
     </ion-content>
   </ion-app>
 </body>
diff --git a/packages/core/src/components/list/list.tsx b/packages/core/src/components/list/list.tsx
index 5d21e3151e..507ee2ec70 100644
--- a/packages/core/src/components/list/list.tsx
+++ b/packages/core/src/components/list/list.tsx
@@ -1,4 +1,4 @@
-import { Component, h } from '@stencil/core';
+import { Component, h, Method } from '@stencil/core';
 
 @Component({
   tag: 'ion-list',
@@ -15,4 +15,14 @@ export class List {
   render() {
     return <slot></slot>;
   }
+
+  /**
+   * Close any sliding items that are open.
+   */
+  @Method()
+  closeSlidingItems() {
+    // TODO implement this
+    console.log('in list method closeSlidingItems');
+    // this._slidingGesture && this._slidingGesture.closeOpened();
+  }
 }
