feat (js) : update oneloop to version 5

Author: n-langle

package.json

@@ -15,7 +15,7 @@
   "license": "GPL-2.0",
   "dependencies": {
     "lazysizes": "^5.3.2",
-    "oneloop.js": "^4.0.0",
+    "oneloop.js": "^5.0.0",
     "what-input": "^5.2.10"
   },
   "devDependencies": {

src/js/classes/Animation.js

@@ -46,8 +46,8 @@ class Animation extends AbstractDomElement {
 
     // add element to scrollObserver
     scrollObserver.observe(el, {
-      onVisible: function (scrollInfos, percentRTE) {
-        if (percentRTE >= start && percentRTE <= end && !that._isVisible) {
+      onVisible: function (scrollInfos, percentRTW, percentRTE) {
+        if (percentRTE.y >= start && percentRTE.y <= end && !that._isVisible) {
           // show element
           that._isVisible = true
           s.onShow(el, scrollInfos, callbacksSharedData)
@@ -57,7 +57,7 @@ class Animation extends AbstractDomElement {
           if (s.playOnce) {
             that.destroy(el, scrollInfos, callbacksSharedData)
           }
-        } else if ((percentRTE < start || (percentRTE > end && s.hideOnReachEnd)) && that._isVisible) {
+        } else if ((percentRTE.y < start || (percentRTE.y > end && s.hideOnReachEnd)) && that._isVisible) {
           // hide element
           that._isVisible = false
           s.onHide(el, scrollInfos, callbacksSharedData)
@@ -162,10 +162,10 @@ Animation.preset = {
       el.children[0].style.transitionDuration = Math.random() * 0.75 + 0.75 + 's'
     },
     onShow: function (el, scrollInfos, data) {
-      el.children[0].style.transform = 'translateY(' + scrollInfos.directionY * data.translate + 'px)'
+      el.children[0].style.transform = 'translateY(' + scrollInfos.direction.y * data.translate + 'px)'
     },
     onHide: function (el, scrollInfos, data) {
-      el.children[0].style.transform = 'translateY(' + scrollInfos.directionY * data.translate + 'px)'
+      el.children[0].style.transform = 'translateY(' + scrollInfos.direction.y * data.translate + 'px)'
     },
   },
   '.js-animation .js-animation-title': {

src/js/classes/ScrollDirection.js

@@ -19,16 +19,16 @@ class ScrollDirection extends AbstractDomElement {
     this._timer = null
 
     this._scrollObserver.observe(this._element, {
-      onAlways: function (scroll, percent, percent2) {
-        const p = Math.min(Math.round(percent2 * 100), 100)
+      onAlways: function (scroll, percentRTW, percentRTE) {
+        const p = Math.min(Math.round(percentRTE.y * 100), 100)
 
         if (p === 0) {
           that.set('top')
         } else if (p === 100) {
           that.set('bottom')
-        } else if (scroll.directionY === -1) {
+        } else if (scroll.direction.y === -1) {
           that.set('up')
-        } else if (scroll.directionY === 1) {
+        } else if (scroll.direction.y === 1) {
           that.set('down')
         }
       },

src/scss/04-utilities/_js-animation.scss

@@ -39,7 +39,7 @@
 %js-animation-translation-init {
     > * {
         opacity: 0;
-        transition: opacity .5s, transform .5s $ease-in-out-expo;
+        transition: opacity .5s, transform .5s $ease-out-expo;
         transform: translateY(100px);
     }
 }