diff --git a/index.html b/index.html
index e15a23e..1f43734 100644
--- a/index.html
+++ b/index.html
@@ -19,11 +19,11 @@ <h2>A library that modifies element properties as you scroll</h2>
       </div>
 
       <div class="slides">
-        <div class="slides__slide"><div class="line"></div><div class="slides__slide__number">1<div class="slides__slide__progress">0</div></div></div>
-        <div class="slides__slide"><div class="box"></div><div class="line"></div><div class="slides__slide__number">2<div class="slides__slide__progress">0</div></div></div>
-        <div class="slides__slide"><div class="line"></div><div class="slides__slide__number">3<div class="slides__slide__progress">0</div></div></div>
-        <div class="slides__slide"><div class="box"></div><div class="line"></div><div class="slides__slide__number">4<div class="slides__slide__progress">0</div></div></div>
-        <div class="slides__slide"><div class="line"></div><div class="slides__slide__number">5<div class="slides__slide__progress">0</div></div></div>
+        <div class="slides__slide"><div class="line"></div><div class="slides__slide__number">1<div class="progress">0</div></div></div>
+        <div class="slides__slide"><div class="box"></div><div class="line"></div><div class="slides__slide__number">2</div></div>
+        <div class="slides__slide"><div class="line"></div><div class="slides__slide__number">3<div class="progress">0</div></div></div>
+        <div class="slides__slide"><div class="box"></div><div class="line"></div><div class="slides__slide__number">4</div></div>
+        <div class="slides__slide"><div class="line"></div><div class="slides__slide__number">5<div class="progress">0</div></div></div>
       </div>
 
       <footer>
diff --git a/readme.md b/readme.md
index 5806250..59f4f6e 100644
--- a/readme.md
+++ b/readme.md
@@ -18,20 +18,20 @@ A library that modifies element properties as you scroll to achieve parallax mot
 |             | Description | Type    | 
 | ----------- | ----------- | ------- | 
 | el    | The slides elements  | HTMLElement |
-| easing    | The easing function (see easing.js)  | String |
-| debug    | Log out some values  | boolean |
-| modifiers    | See Modifier type below  | Modifier[] |
+| easing?    | The easing function (see easing.js)  | String |
+| debug?    | Log out some values  | boolean |
+| modifiers?    | See Modifier type below  | Modifier[] |
 
 ### Modifier
 
 |             | Description | Type    | 
 | ----------- | ----------- | ------- | 
 | selector    | The css selector for the element to modify   | String |
-| property    | The css property to modify (e.g. width)  | String |
-| start    | The starting property  | number |
-| end    | The destination property value  | number |
-| unit    | The property unit (e.g. px, %)  | String |
-
+| property?    | The css property to modify (e.g. width)  | String |
+| start?    | The starting property  | Number |
+| end?    | The destination property value  | Number |
+| unit?    | The property unit (e.g. px, %)  | String |
+| callback?    | A callback function which receives two parameters, the html element, and the progress through the active slide | Function |
 
 
 
@@ -40,14 +40,35 @@ A library that modifies element properties as you scroll to achieve parallax mot
 e.g.
 
 ```javascript
+import "./main.scss";
+
 import SlideScroll from "./slide-scroll"
+import { Options } from "./interfaces";
 
 const slides = document.querySelectorAll<HTMLElement>(`.slides`);
 
 slides.forEach(el => {
   const options: Options = {
     el,
-    easing: "linear"
+    easing: "easeInOutCubic",
+    modifiers: [{
+      selector: ".line",
+      property: "width",
+      start: 0,
+      end: 100,
+      unit: "%"
+    }, {
+      selector: ".box",
+      property: "height",
+      start: 0,
+      end: 100,
+      unit: "%"
+    }, {
+      selector: ".progress",
+      callback: function(el, progress) {
+        el.innerHTML = `${Math.ceil(progress)}%`
+      }
+    }]
   };
   const slides = new SlideScroll(options)
 
diff --git a/src/index.ts b/src/index.ts
index b2a730e..8ac6fd6 100644
--- a/src/index.ts
+++ b/src/index.ts
@@ -25,6 +25,11 @@ slides.forEach(el => {
       start: 0,
       end: 100,
       unit: "%"
+    }, {
+      selector: ".progress",
+      callback: function(el, progress) {
+        el.innerHTML = `${Math.ceil(progress)}%`
+      }
     }]
   };
   const slides = new SlideScroll(options)
diff --git a/src/interfaces.ts b/src/interfaces.ts
index 1f26cee..d8e4e6b 100644
--- a/src/interfaces.ts
+++ b/src/interfaces.ts
@@ -4,10 +4,11 @@
 
 export interface Modifier {
   selector: string,
-  property: string,
-  start: number,
-  end: number,
-  unit: string
+  property?: string,
+  start?: number,
+  end?: number,
+  unit?: string,
+  callback?: Function
 }
 
 export interface Options {
diff --git a/src/main.scss b/src/main.scss
index 40d4b67..f4e418f 100644
--- a/src/main.scss
+++ b/src/main.scss
@@ -143,10 +143,10 @@ footer {
       position: absolute;
       top: 0;
       left: 50%;
-      height: 30px;
+      height: 0;
       transform: translate(-50%, 0);
-      width: 300px;
-      background: orange;
+      width: 30px;
+      background: blue;
     }
     
     &__number {
@@ -158,8 +158,8 @@ footer {
       line-height: 1.5em;
       border: 20px solid #333;
       padding: 0 100px;
-      background: rgba(#fff, 0.5);
-      backdrop-filter: sepia(90%);
+      // background: rgba(#fff, 0.5);
+      // backdrop-filter: blur(50px);
       
       @media (min-width: 600px) {
         font-size: 400px;
@@ -169,10 +169,10 @@ footer {
 
     &:nth-child(odd) &__number {
       border-color: #fff;
-      background: rgba(#333, 0.5);
+      // background: rgba(#333, 0.5);
     } 
 
-    &__progress {
+    .progress {
       position: absolute;
       right: 10px;
       top: 10px;
diff --git a/src/slide-scroll.ts b/src/slide-scroll.ts
index a3cc082..ec0e515 100644
--- a/src/slide-scroll.ts
+++ b/src/slide-scroll.ts
@@ -139,27 +139,29 @@ export default class Slides extends InView {
       this.els.slides.forEach((el, index) => {
         const min = index * this.portion;
         const max = min + this.portion;
-        const progressEl = el.querySelector(`.${css.progress}`);
 
         // this particular slide is in the viewport
         if (progress > min && progress <= max) {
           const sectionProgress = (progress - min) * this.total;
           const easing = easings.linear(sectionProgress / 100);
           const slideOffset = this.vh - (easing * this.vh);
-          // const progressOpacity = easing;
+          const modeEasing = easings[this.options.easing](sectionProgress / 100);
           
           fastdom.mutate(() => {
             el.style.opacity = "1";
             el.style.transform = `translate3d(0, ${slideOffset}px, 0)`;
-            
-            progressEl.innerHTML = Math.round(sectionProgress);
 
             this.options.modifiers?.forEach(modifier => {
-              const modeEasing = easings[this.options.easing](sectionProgress / 100);
               const modEl = el.querySelector(modifier.selector);
-              const modVal = (modifier.start + (modifier.end - modifier.start) * modeEasing);
-
-              modEl.style[modifier.property] = `${modVal}${modifier.unit}`;
+              
+              if(modEl && typeof modifier.property !== "undefined" && typeof modifier.start !== "undefined" && typeof modifier.end !== "undefined"){
+                const modVal = (modifier.start + (modifier.end - modifier.start) * modeEasing);
+                modEl.style[modifier.property] = `${modVal}${modifier.unit}`;
+              }
+
+              if(modEl && typeof modifier.callback === "function") {
+                modifier.callback(modEl, sectionProgress);
+              }
             });
           });
         }
@@ -169,7 +171,6 @@ export default class Slides extends InView {
             // we've scrolled passed it
             fastdom.mutate(() => {
               el.style.transform = "translate3d(0, 0, 0)";
-              progressEl.innerHTML = "100"
             });
           }
           else {