@nanoporetech-digital/components 5.5.2 → 5.6.0

package/CHANGELOG.md

@@ -3,6 +3,30 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [5.6.0](https://git.oxfordnanolabs.local/Digital/nano-components/compare/v5.5.3...v5.6.0) (2023-10-06)
+
+
+### Bug Fixes
+
+* **slides:** only apply parallax animation to first slide child element ([54764a6](https://git.oxfordnanolabs.local/Digital/nano-components/commits/54764a62c658910164086c6a9ad34f594f8468bb))
+
+
+### Features
+
+* **slides:** allow for custom animation function ([36d9932](https://git.oxfordnanolabs.local/Digital/nano-components/commits/36d993203e7fb4ff1524aa7ea6ccf176d27dd2c5))
+
+
+
+
+
+## [5.5.3](https://git.oxfordnanolabs.local/Digital/nano-components/compare/v5.5.2...v5.5.3) (2023-10-04)
+
+**Note:** Version bump only for package @nanoporetech-digital/components
+
+
+
+
+
 ## [5.5.2](https://git.oxfordnanolabs.local/Digital/nano-components/compare/v5.5.1...v5.5.2) (2023-10-03)
 
 

package/dist/cjs/nano-slides.cjs.entry.js

@@ -3875,8 +3875,8 @@ const Slides = class {
     this.parallax = async () => {
       const flkty = await this.flickity;
       const cells = flkty.cells;
-      cells.forEach((cell, i) => {
-        const ele = this.childrenEles[i];
+      cells.forEach((cell) => {
+        const ele = cell.element.children[0];
         let flkX = flkty.x;
         if (flkty.options.wrapAround && flkty.cells.length > 1) {
           flkX = modulo(flkX, flkty.slideableWidth);
@@ -3890,6 +3890,8 @@ const Slides = class {
           x = ((cell.target + (flkX + flkty.slideableWidth)) * -1) / 3;
         }
         ele.style.transform = 'translate3d(' + x + 'px, 0, 0)';
+        const animAmount = ((x * 3) / cell.size.width) * 100;
+        cell.element.style.setProperty('--animation-amount', animAmount.toString());
       });
     };
     this.handleFullscreen = (isFullScreen) => {
@@ -3957,6 +3959,16 @@ const Slides = class {
       });
       this.update();
     }
+    // was a custom animation
+    if (typeof oldAnim === 'function') {
+      flkty.off('scroll', oldAnim);
+    }
+    // is a custom animation
+    if (typeof this.animation === 'function') {
+      this.options = { fade: false, percentPosition: true };
+      flkty.on('scroll', this.animation);
+      return;
+    }
     // setup new stuff
     switch (this.animation) {
       case 'fade':