Streaming live at 10am (PST)

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