Page Swipe Navigation

Click on the navigation buttons in this link (this was built in WordPress). You will see the pages zoom out and swipe over. I want to achieve this in my webflow design. Any ideas? I also have access to the JS that was used to do this.

click this link

Here is my read-only in Webflow: read-only webflow site

Here is the JS written for WordPress:
console.log(“Loaded Custom JS”);

jQuery(document).ready(function($) {
  // Code that uses jQuery's $ can follow here.
  console.log("Custom JS Document Ready");

  // loop over the home_section divs and set the width of ecah equal to the window width and position equal to width x array index
  if ($('.home_section').length > 0) {
    var home_section_index = 1;
    var window_width = window.innerWidth;
    var max_section_height = 0;
    $('.home_section').each(function(index, value) {
      $(this).css({
        "left": (window_width * index),
        "width": window_width
      });
      if ($(this).height() > max_section_height) {
        max_section_height = $(this).height();
      }
    });
    $('.home_sections_container_outer').css({
      "height": max_section_height + 51,
      "width": window_width
    });
    $('.home_sections_container_inner').css({
      "height": max_section_height + 51,
      "width": window_width * $('.home_section').length
    });
    $('.home_section').css({
      "height": max_section_height + 51
    });
  }

  // add click handlers to the navigation listing the sections with class "home_section_link"
  $('body').on('click', '.home_section_link', function(event) {
    // move home_section_inner to the selected section, hide the other ones
    var home_sections_container_inner_position = parseInt($("#" + $(this).data("section")).css("left")) * -1;

    // add a class to the home sections with a CSS transform to animate shrinking them, then remove the class once we are done with the transition
    $('.home_section').toggleClass("home_section_shrunk");

    // after scrolling is done remove the class that shrinks the home_section container divs
    setTimeout(function() {
      $('.home_section').toggleClass("home_section_shrunk");
    }, 1500);

    // move the inner container position to the new home_section
    $('.home_sections_container_inner').css({
      "left": home_sections_container_inner_position
    });

    easyScroll({
      'scrollableDomEle': window,
      'direction': 'top',
      'duration': 1500,
      'easingPreset': 'easeInOutQuad'
    });

    return false;
  });

  // trigger resizing of home page divs on window resizing
  /*$( window ).resize(function() {
  	console.log( "Handler for .resize() called." );
  	var home_section_index = 1;
  	var window_width = window.innerWidth;
  	var max_section_height = 0;
  	$( '.home_section' ).each(function( index, value ) {
  		$(this).css({
  			"left": (window_width * index),
  			"width": window_width
  		});
  		if($(this).height() > max_section_height) {
  			max_section_height = $(this).height();
  		}
  	});
  	$( '.home_sections_container_outer' ).css({
  		"height": max_section_height + 51,
  		"width": window_width
  	});
  	$( '.home_sections_container_inner' ).css({
  		"height": max_section_height + 51,
  		"width": window_width * $('.home_section').length
  	});
  });*/

  console.log("Custom JS Document Ready End");

});

/* EASY SCROLL FUNCTION FROM https://unpkg.com/easy-scroll@0.6.0/dist/easy-scroll.js / https://github.com/tarun-dugar/easy-scroll */
! function(e, t) {
  "object" == typeof exports && "object" == typeof module ? module.exports = t() : "function" == typeof define && define.amd ? define("easyScroll", [], t) : "object" == typeof exports ? exports.easyScroll = t() : e.easyScroll = t()
}(this, function() {
  return function(e) {
    function t(r) {
      if (n[r]) return n[r].exports;
      var o = n[r] = {
        i: r,
        l: !1,
        exports: {}
      };
      return e[r].call(o.exports, o, o.exports, t), o.l = !0, o.exports
    }
    var n = {};
    return t.m = e, t.c = n, t.d = function(e, n, r) {
      t.o(e, n) || Object.defineProperty(e, n, {
        configurable: !1,
        enumerable: !0,
        get: r
      })
    }, t.n = function(e) {
      var n = e && e.__esModule ? function() {
        return e.default
      } : function() {
        return e
      };
      return t.d(n, "a", n), n
    }, t.o = function(e, t) {
      return Object.prototype.hasOwnProperty.call(e, t)
    }, t.p = "/", t(t.s = 0)
  }([function(e, t, n) {
    "use strict";

    function r(e) {
      return e && e.__esModule ? e : {
        default: e
      }
    }
    Object.defineProperty(t, "__esModule", {
      value: !0
    });
    var o = n(1),
      i = r(o),
      u = n(2),
      l = r(u),
      a = function(e) {
        var t = e.easingPreset,
          n = e.cubicBezierPoints,
          r = e.duration,
          o = e.runTime,
          u = o / r;
        return i.default.hasOwnProperty(t) ? i.default[t](u) : n && !isNaN(n.x1) && !isNaN(n.y1) && !isNaN(n.x2) && !isNaN(n.y2) && n.x1 >= 0 && n.x2 >= 0 ? (0, l.default)({
          percentTimeElapsed: u,
          x1: n.x1,
          x2: n.x2,
          y1: n.y1,
          y2: n.y2
        }) : (console.error("Please enter a valid easing value"), !1)
      },
      c = function(e) {
        var t = e.isWindow,
          n = e.scrollableDomEle,
          r = e.elementLengthProp,
          o = e.initialScrollPosition,
          i = e.isHorizontalDirection,
          u = e.scrollLengthProp,
          l = e.direction,
          a = void 0;
        if (t) {
          var c = document.documentElement;
          a = i ? c.offsetWidth : c.offsetHeight
        } else a = n[u] - n[r];
        return ["left", "top"].includes(l) ? o : a - o
      },
      s = function(e) {
        var t = e.scrollableDomEle,
          n = e.onAnimationCompleteCallback,
          r = e.direction,
          o = e.onRefUpdateCallback,
          i = e.duration,
          u = e.cubicBezierPoints,
          l = e.easingPreset,
          s = e.scrollAmount,
          f = null,
          d = null,
          p = null,
          m = null,
          x = t === window,
          b = ["left", "right"].indexOf(r) > -1,
          y = ["right", "bottom"].indexOf(r) > -1;
        b ? (d = x ? "scrollX" : "scrollLeft", m = x ? "innerWidth" : "clientWidth", p = "scrollWidth") : (d = x ? "scrollY" : "scrollTop", m = x ? "innerHeight" : "clientHeight", p = "scrollHeight");
        var v = t[d],
          h = c({
            isWindow: x,
            scrollableDomEle: t,
            elementLengthProp: m,
            initialScrollPosition: v,
            isHorizontalDirection: b,
            scrollLengthProp: p,
            direction: r
          });
        !isNaN(s) && s < h && (h = s);
        var P = function e(r) {
          var c = r - f,
            s = a({
              easingPreset: l,
              cubicBezierPoints: u,
              runTime: c,
              duration: i
            });
          if (!isNaN(s)) {
            var p = s * h,
              m = y ? p + v : h - p;
            if (c < i) {
              if (x) {
                var P = b ? m : 0,
                  O = b ? 0 : m;
                window.scrollTo(P, O)
              } else t[d] = m;
              o ? o(requestAnimationFrame(e)) : requestAnimationFrame(e)
            } else n && n()
          }
        };
        requestAnimationFrame(function(e) {
          f = e, P(e)
        })
      };
    t.default = s, e.exports = t.default
  }, function(e, t, n) {
    "use strict";
    Object.defineProperty(t, "__esModule", {
      value: !0
    }), t.default = {
      linear: function(e) {
        return e
      },
      easeInQuad: function(e) {
        return e * e
      },
      easeOutQuad: function(e) {
        return e * (2 - e)
      },
      easeInOutQuad: function(e) {
        return e < .5 ? 2 * e * e : (4 - 2 * e) * e - 1
      },
      easeInCubic: function(e) {
        return e * e * e
      },
      easeOutCubic: function(e) {
        return --e * e * e + 1
      },
      easeInOutCubic: function(e) {
        return e < .5 ? 4 * e * e * e : (e - 1) * (2 * e - 2) * (2 * e - 2) + 1
      },
      easeInQuart: function(e) {
        return e * e * e * e
      },
      easeOutQuart: function(e) {
        return 1 - --e * e * e * e
      },
      easeInOutQuart: function(e) {
        return e < .5 ? 8 * e * e * e * e : 1 - 8 * --e * e * e * e
      },
      easeInQuint: function(e) {
        return e * e * e * e * e
      },
      easeOutQuint: function(e) {
        return 1 + --e * e * e * e * e
      },
      easeInOutQuint: function(e) {
        return e < .5 ? 16 * e * e * e * e * e : 1 + 16 * --e * e * e * e * e
      }
    }, e.exports = t.default
  }, function(e, t, n) {
    "use strict";
    Object.defineProperty(t, "__esModule", {
      value: !0
    });
    var r = function(e) {
        return Math.pow(e, 3)
      },
      o = function(e) {
        return 3 * e * e * (1 - e)
      },
      i = function(e) {
        return 3 * e * Math.pow(1 - e, 2)
      },
      u = function(e) {
        return Math.pow(1 - e, 3)
      },
      l = function(e) {
        var t = e.percentTimeElapsed,
          n = e.x1,
          l = e.y1,
          a = e.x2,
          c = e.y2;
        return 1 - (n * r(t) + l * o(t) + a * i(t) + c * u(t))
      };
    t.default = l, e.exports = t.default
  }])
});

So this doesn’t look like its navigating to different pages - all it does it moves divs around…

So you can do this by creating a number of divs that are 100vw wide, and are in a parent div that has the width of 100vw * by number of divs, with flex horizontal layout and has hidden overflow, and then you add an interaction that will slide the div’s back and forth on click… thats probably all…

1 Like

I’ll give that a shot! Thanks!

@IVG hey man! seriously, thanks for helping me figure that out.

I’m curious if you would have any idea how to do this yet set each div/page to a certain height. They are currently different heights making the container the same height as the tallest page, therefore leaving white space in the shorter pages/divs.

If you look at the first page/home page and scroll down, you will see the white space I am talking about. The technology page/div is creating that white space.

Let me know if you have any ideas for this? Thanks!!

Here is the read-only: CLICK HERE

I would think this would require some custom jquery code that will first check whether the last div of the page i is visible in the viewport and then move it into position relative to that div…
alternatively you can do it manually with an interaction…

Hey @bruh,

Could you change each page wrapper like page-home to have a dedicated height of 100vh, then set the overflow to scroll so that every page is only as large as the browser window, and scrolls its content within itself?

I might not have a complete understanding of what’s happening without seeing the published version.

Hope I can help!
AC

@Andrew_Coderre hey man! thanks for the tip. So it kind of works… this is the result of what you said: CLICK HERE

I only have it set up for the home page. Seems to be on the right track though