feat: add config 'zeroMarginBreakpoint'

2 files changed, 16 insertions, 6 deletions

diff --git a/src/animation.js b/src/animation.js
index 5d9b5f5..85c6dd7 100644
--- a/src/animation.js
+++ b/src/animation.js
@@ -4,7 +4,11 @@ export default class Animation {
   static calculateFinalState(element) {
     let finals = {}
 
-    const margin = config.margin;
+    let margin = config.margin;
+    if (window.innerWidth <= config.zeroMarginBreakpoint) {
+        margin = 0
+    }
+
     const nw = element.naturalWidth;
     const nh = element.naturalHeight;
     const ratio = nw / nh;
diff --git a/src/config.js b/src/config.js
index c306d8f..2a64db1 100644
--- a/src/config.js
+++ b/src/config.js
@@ -1,9 +1,15 @@
 const config = {
-  selector: '[data-libra]',
-  margin: 50,
-  offset: { x: 0, y: 0 },
-  transitionDuration: 200, // milliseconds
-  imageCursor: 'zoom-in',
+    selector: '[data-libra]',
+    margin: 50,
+
+    // in small screens, it's best to not use margins
+    // otherwise, the zoomed image gets even smaller
+    // define on screen smaller than what size, margin is set to 0
+    zeroMarginBreakpoint: 768,
+
+    offset: { x: 0, y: 0 },
+    transitionDuration: 200, // milliseconds
+    imageCursor: 'zoom-in',
 };
 
 function deepMerge(target, source) {