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.
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
}])
});