Update for Waypoints 3.0+

demo/demo.html

@@ -31,7 +31,7 @@
         color: #999;
     }
     span {
-        font-size: 66px;
+        font-size: 33px;
         color: #555;
         margin-bottom: 350px;
         display: inline-block;
@@ -65,19 +65,19 @@
     }
     @media only screen and (max-width: 1024px) {
         span {
-            font-size: 33px;
+            font-size: 22px;
             margin-bottom: 200px;
         }
     }
     @media only screen and (max-width: 800px) {
         div > span {
-            font-size: 66px;
+            font-size: 33px;
             display: block;
             width: 100% !important;
             margin-bottom: 100px;
         }
         span {
-            font-size: 66px;
+            font-size: 33px;
         }
         code {
             margin-bottom: 100px;
@@ -118,12 +118,12 @@ <h3>(Scroll down)</h3>
         &lt;body><br>
         <span style="color: #f1c40f">
         &nbsp; &nbsp; &lt;span class="counter">1,234,567&lt;/span><br>
-        &nbsp; &nbsp; &lt;script src="//cdnjs.cloudflare.com/ajax/libs/waypoints/2.0.3/waypoints.min.js">&lt;/script><br>
+        &nbsp; &nbsp; &lt;script src="jquery.waypoints.min.js">&lt;/script><br>
         &nbsp; &nbsp; &lt;script src="jquery.counterup.min.js">&lt;/script><br>
         </span>
         &lt;/body>
     </code>
-    <!-- <span><span class="counter circle">12345</span></span> -->
+    <span><span class="counter circle">12345</span></span>
     <div>
         <span class="counter" style="display: inline-block; width: 32%">52,147</span>
         <span class="counter" style="display: inline-block; width: 32%">1.9583</span>
@@ -154,7 +154,7 @@ <h3>(Scroll down)</h3>
         <span class="counter" style="display: inline-block; width: 32%">958393.10</span>
         <span class="counter" style="display: inline-block; width: 32%">5,123,348</span>
     </div>
-    <script src="http://cdnjs.cloudflare.com/ajax/libs/waypoints/2.0.3/waypoints.min.js"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/waypoints/4.0.0/jquery.waypoints.min.js"></script>
     <script src="../jquery.counterup.min.js"></script>
 </body>
 </html>

jquery.counterup.js

@@ -75,7 +75,10 @@
         };
 
         // Perform counts when the element gets into view
-        $this.waypoint(counterUpper, { offset: '100%', triggerOnce: true });
+        $this.waypoint(function(direction){
+            counterUpper();
+            this.destroy(); //-- Waypoint 3.0 version of triggerOnce
+        }, { offset: '100%'});
     });
 
   };