HTML preprocessors can make writing HTML more powerful or convenient. For instance, Markdown is designed to be easier to write and read for text documents and you could write a loop in Pug.
In CodePen, whatever you write in the HTML editor is what goes within the <body>
tags in a basic HTML5 template. So you don't have access to higher-up elements like the <html>
tag. If you want to add classes there that can affect the whole document, this is the place to do it.
In CodePen, whatever you write in the HTML editor is what goes within the <body>
tags in a basic HTML5 template. If you need things in the <head>
of the document, put that code here.
The resource you are linking to is using the 'http' protocol, which may not work when the browser is using https.
CSS preprocessors help make authoring CSS easier. All of them offer things like variables and mixins to provide convenient abstractions.
It's a common practice to apply CSS to a page that styles elements such that they are consistent across all browsers. We offer two of the most popular choices: normalize.css and a reset. Or, choose Neither and nothing will be applied.
To get the best cross-browser support, it is a common practice to apply vendor prefixes to CSS properties and values that require them to work. For instance -webkit-
or -moz-
.
We offer two popular choices: Autoprefixer (which processes your CSS server-side) and -prefix-free (which applies prefixes via a script, client-side).
Any URLs added here will be added as <link>
s in order, and before the CSS in the editor. You can use the CSS from another Pen by using its URL and the proper URL extension.
You can apply CSS to your Pen from any stylesheet on the web. Just put a URL to it here and we'll apply it, in the order you have them, before the CSS in the Pen itself.
You can also link to another Pen here (use the .css
URL Extension) and we'll pull the CSS from that Pen and include it. If it's using a matching preprocessor, use the appropriate URL Extension and we'll combine the code before preprocessing, so you can use the linked Pen as a true dependency.
JavaScript preprocessors can help make authoring JavaScript easier and more convenient.
Babel includes JSX processing.
Any URL's added here will be added as <script>
s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.
You can apply a script from anywhere on the web to your Pen. Just put a URL to it here and we'll add it, in the order you have them, before the JavaScript in the Pen itself.
If the script you link to has the file extension of a preprocessor, we'll attempt to process it before applying.
You can also link to another Pen here, and we'll pull the JavaScript from that Pen and include it. If it's using a matching preprocessor, we'll combine the code before preprocessing, so you can use the linked Pen as a true dependency.
Search for and use JavaScript packages from npm here. By selecting a package, an import
statement will be added to the top of the JavaScript editor for this package.
Using packages here is powered by esm.sh, which makes packages from npm not only available on a CDN, but prepares them for native JavaScript ESM usage.
All packages are different, so refer to their docs for how they work.
If you're using React / ReactDOM, make sure to turn on Babel for the JSX processing.
If active, Pens will autosave every 30 seconds after being saved once.
If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.
If enabled, your code will be formatted when you actively save your Pen. Note: your code becomes un-folded during formatting.
Visit your global Editor Settings.
<html data-wf-page="593920adce0d3962fc0758d8" data-wf-site="593920adce0d3962fc0758d7">
<head>
<meta charset="utf-8">
<title>Micro-interaction Download Button</title>
<meta content="width=device-width, initial-scale=1" name="viewport">
<meta content="Webflow" name="generator">
<link href="css/normalize.css" rel="stylesheet" type="text/css">
<link href="css/webflow.css" rel="stylesheet" type="text/css">
<link href="css/002-micro-interaction-download-button.webflow.css" rel="stylesheet" type="text/css">
<script src="https://ajax.googleapis.com/ajax/libs/webfont/1.4.7/webfont.js"></script>
<script type="text/javascript">
WebFont.load({
google: {
families: [
"Montserrat:100,100italic,200,200italic,300,300italic,400,400italic,500,500italic,600,600italic,700,700italic,800,800italic,900,900italic"
]
}
});
</script>
<!-- [if lt IE 9]><script src="https://cdnjs.cloudflare.com/ajax/libs/html5shiv/3.7.3/html5shiv.min.js" type="text/javascript"></script><![endif] -->
<script type="text/javascript">
!(function(o, c) {
var n = c.documentElement,
t = " w-mod-";
(n.className += t + "js"), ("ontouchstart" in o ||
(o.DocumentTouch && c instanceof DocumentTouch)) &&
(n.className += t + "touch");
})(window, document);
</script>
<link href="https://daks2k3a4ib2z.cloudfront.net/img/favicon.ico" rel="shortcut icon" type="image/x-icon">
<link href="https://daks2k3a4ib2z.cloudfront.net/img/webclip.png" rel="apple-touch-icon">
</head>
<body>
<div class="body-wrapper">
<div class="details-card">
<div class="project-number">PROJECT NUMBER 002</div>
<h1 class="project-title">Micro-interaction Download Button</h1>
<div class="hr"></div>
<a class="flex-row w-inline-block" href="https://webflow.com/azz"><img alt="Webflow Logo" sizes="(max-width: 767px) 18px, (max-width: 991px) 2vw, 18px" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/1313272/k7tNnBIr.jpg" srcset="https://s3-us-west-2.amazonaws.com/s.cdpn.io/1313272/k7tNnBIr-p-500.jpeg" width="18">
<div class="channel-link">Visit my Webflow Profile</div>
</a>
<a class="flex-row w-inline-block" href="https://webflow.com/website/002-micro-interaction-download-button"><img alt="Clone Icon" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/1313272/paper.svg" width="18">
<div class="channel-link"><strong>Clone</strong> this project</div>
</a><a class="inspired-link" href="https://dribbble.com/shots/3004224-Download-transition-principle-freebie" target="_blank">Inspired by Alex Pronsky's Dribble Shot</a></div>
<a class="download-button-wrapper w-inline-block" data-ix="button-interaction" href="#" target="_blank">
<div class="button-filler"></div>
<div class="button-text">DOWNLOADED</div>
<div class="arrow-wrapper">
<div class="arrow-stem"></div>
<div class="arrow-left"></div>
<div class="arrow-right"></div>
</div>
</a>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js" type="text/javascript"></script>
<script src="js/webflow.js" type="text/javascript"></script>
<!-- [if lte IE 9]><script src="https://cdnjs.cloudflare.com/ajax/libs/placeholders/3.0.2/placeholders.min.js"></script><![endif] -->
</body>
</html>
body {
font-family: Montserrat, sans-serif;
color: #5a5a5a;
font-size: 14px;
line-height: 20px;
}
p {
margin-bottom: 10px;
}
a {
text-decoration: underline;
}
.body-wrapper {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
min-height: 100vh;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-webkit-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column;
-webkit-box-pack: center;
-webkit-justify-content: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: center;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
background-image: -webkit-linear-gradient(
270deg,
rgba(245, 0, 255, .37),
rgba(245, 0, 255, .37)
),
-webkit-linear-gradient(45deg, #86fff1, #7effbc);
background-image: linear-gradient(
180deg,
rgba(245, 0, 255, .37),
rgba(245, 0, 255, .37)
),
linear-gradient(45deg, #86fff1, #7effbc);
}
.download-button-wrapper {
position: relative;
width: 50px;
height: 50px;
border: 2px solid #fff;
border-radius: 2px;
cursor: pointer;
}
.button-filler {
position: absolute;
left: 0px;
right: 0px;
bottom: 0px;
height: 0px;
background-color: #fff;
}
.arrow-stem {
position: absolute;
left: 0px;
right: 0px;
bottom: 0px;
display: block;
width: 2px;
height: 40px;
margin-right: auto;
margin-left: auto;
border-radius: 1px;
background-color: #fff;
}
.arrow-wrapper {
position: relative;
left: 0px;
right: 0px;
bottom: 18.5px;
display: block;
width: 30px;
height: 40px;
margin-right: auto;
margin-left: auto;
}
.arrow-left {
position: absolute;
left: 0px;
bottom: 6px;
width: 17px;
height: 2px;
border-radius: 1px;
background-color: #fff;
-webkit-transform: rotate(45deg);
-ms-transform: rotate(45deg);
transform: rotate(45deg);
}
.arrow-right {
position: absolute;
right: 0px;
bottom: 6px;
width: 17px;
height: 2px;
background-color: #fff;
-webkit-transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
transform: rotate(-45deg);
}
.button-text {
position: absolute;
left: 0px;
top: 23px;
right: 0px;
display: none;
-webkit-box-pack: center;
-webkit-justify-content: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: center;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
opacity: 0;
-webkit-transform: translate(0px, -50%);
-ms-transform: translate(0px, -50%);
transform: translate(0px, -50%);
font-family: Montserrat, sans-serif;
color: #aca1e6;
font-weight: 600;
text-decoration: none;
text-transform: uppercase;
}
.details-card {
position: fixed;
left: 20px;
top: 20px;
overflow: hidden;
width: 300px;
padding: 35px 35px 25px;
border-radius: 3px;
background-color: #fff;
box-shadow: 1px 1px 23px 0 rgba(0, 0, 0, .19);
}
.project-number {
color: #ccc;
font-size: 10px;
line-height: 10px;
font-weight: 700;
letter-spacing: 1px;
text-transform: uppercase;
}
.project-title {
margin-top: 5px;
margin-bottom: 15px;
font-size: 25px;
line-height: 32px;
}
.hr {
height: 1px;
margin-top: 25px;
margin-bottom: 25px;
border-radius: 1px;
background-color: #e2e2e2;
}
.channel-link {
margin-top: 4.5px;
margin-bottom: 4.5px;
margin-left: 5px;
color: #5a5a5a;
font-size: 12px;
line-height: 17px;
text-decoration: none;
}
.flex-row {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
text-decoration: none;
}
.inspired-link {
display: block;
margin-top: 10px;
-webkit-transition: color 200ms ease;
transition: color 200ms ease;
color: #7c7c7c;
font-size: 10px;
}
.inspired-link:hover {
color: #ff0a4f;
}
/*!
* Webflow: Front-end site library
* @license MIT
* Inline scripts may access the api using an async handler:
* var Webflow = Webflow || [];
* Webflow.push(readyFunction);
*/
!(function() {
"use strict";
function t(t, e) {
return (e = { exports: {} }), t(e, e.exports), e.exports;
}
window.tram = (function(t) {
function e(t, e) {
return new F.Bare().init(t, e);
}
function n(t) {
return t.replace(/[A-Z]/g, function(t) {
return "-" + t.toLowerCase();
});
}
function i(t) {
var e = parseInt(t.slice(1), 16);
return [(e >> 16) & 255, (e >> 8) & 255, 255 & e];
}
function r(t, e, n) {
return "#" + ((1 << 24) | (t << 16) | (e << 8) | n).toString(16).slice(1);
}
function o() {}
function a(t, e) {
c("Type warning: Expected: [" + t + "] Got: [" + typeof e + "] " + e);
}
function s(t, e, n) {
c("Units do not match [" + t + "]: " + e + ", " + n);
}
function u(t, e, n) {
if ((void 0 !== e && (n = e), void 0 === t)) return n;
var i = n;
return J.test(t) || !K.test(t)
? (i = parseInt(t, 10))
: K.test(t) && (i = 1e3 * parseFloat(t)), 0 > i && (i = 0), i === i
? i
: n;
}
function c(t) {
Y.debug && window && window.console.warn(t);
}
function l(t) {
for (var e = -1, n = t ? t.length : 0, i = []; ++e < n; ) {
var r = t[e];
r && i.push(r);
}
return i;
}
var h = (function(t, e, n) {
function i(t) {
return "object" == typeof t;
}
function r(t) {
return "function" == typeof t;
}
function o() {}
function a(s, u) {
function c() {
var t = new l();
return r(t.init) && t.init.apply(t, arguments), t;
}
function l() {}
u === n && ((u = s), (s = Object)), (c.Bare = l);
var h,
f = (o[t] = s[t]),
d = (l[t] = c[t] = new o());
return (d.constructor = c), (c.mixin = function(e) {
return (l[t] = c[t] = a(c, e)[t]), c;
}), (c.open = function(t) {
if (
(
(h = {}),
r(t) ? (h = t.call(c, d, f, c, s)) : i(t) && (h = t),
i(h)
)
)
for (var n in h) e.call(h, n) && (d[n] = h[n]);
return r(d.init) || (d.init = s), c;
}), c.open(u);
}
return a;
})("prototype", {}.hasOwnProperty),
f = {
ease: [
"ease",
function(t, e, n, i) {
var r = (t /= i) * t,
o = r * t;
return (
e +
n * (-2.75 * o * r + 11 * r * r + -15.5 * o + 8 * r + 0.25 * t)
);
}
],
"ease-in": [
"ease-in",
function(t, e, n, i) {
var r = (t /= i) * t,
o = r * t;
return e + n * (-1 * o * r + 3 * r * r + -3 * o + 2 * r);
}
],
"ease-out": [
"ease-out",
function(t, e, n, i) {
var r = (t /= i) * t,
o = r * t;
return (
e +
n * (0.3 * o * r + -1.6 * r * r + 2.2 * o + -1.8 * r + 1.9 * t)
);
}
],
"ease-in-out": [
"ease-in-out",
function(t, e, n, i) {
var r = (t /= i) * t,
o = r * t;
return e + n * (2 * o * r + -5 * r * r + 2 * o + 2 * r);
}
],
linear: [
"linear",
function(t, e, n, i) {
return n * t / i + e;
}
],
"ease-in-quad": [
"cubic-bezier(0.550, 0.085, 0.680, 0.530)",
function(t, e, n, i) {
return n * (t /= i) * t + e;
}
],
"ease-out-quad": [
"cubic-bezier(0.250, 0.460, 0.450, 0.940)",
function(t, e, n, i) {
return -n * (t /= i) * (t - 2) + e;
}
],
"ease-in-out-quad": [
"cubic-bezier(0.455, 0.030, 0.515, 0.955)",
function(t, e, n, i) {
return (t /= i / 2) < 1
? n / 2 * t * t + e
: -n / 2 * (--t * (t - 2) - 1) + e;
}
],
"ease-in-cubic": [
"cubic-bezier(0.550, 0.055, 0.675, 0.190)",
function(t, e, n, i) {
return n * (t /= i) * t * t + e;
}
],
"ease-out-cubic": [
"cubic-bezier(0.215, 0.610, 0.355, 1)",
function(t, e, n, i) {
return n * ((t = t / i - 1) * t * t + 1) + e;
}
],
"ease-in-out-cubic": [
"cubic-bezier(0.645, 0.045, 0.355, 1)",
function(t, e, n, i) {
return (t /= i / 2) < 1
? n / 2 * t * t * t + e
: n / 2 * ((t -= 2) * t * t + 2) + e;
}
],
"ease-in-quart": [
"cubic-bezier(0.895, 0.030, 0.685, 0.220)",
function(t, e, n, i) {
return n * (t /= i) * t * t * t + e;
}
],
"ease-out-quart": [
"cubic-bezier(0.165, 0.840, 0.440, 1)",
function(t, e, n, i) {
return -n * ((t = t / i - 1) * t * t * t - 1) + e;
}
],
"ease-in-out-quart": [
"cubic-bezier(0.770, 0, 0.175, 1)",
function(t, e, n, i) {
return (t /= i / 2) < 1
? n / 2 * t * t * t * t + e
: -n / 2 * ((t -= 2) * t * t * t - 2) + e;
}
],
"ease-in-quint": [
"cubic-bezier(0.755, 0.050, 0.855, 0.060)",
function(t, e, n, i) {
return n * (t /= i) * t * t * t * t + e;
}
],
"ease-out-quint": [
"cubic-bezier(0.230, 1, 0.320, 1)",
function(t, e, n, i) {
return n * ((t = t / i - 1) * t * t * t * t + 1) + e;
}
],
"ease-in-out-quint": [
"cubic-bezier(0.860, 0, 0.070, 1)",
function(t, e, n, i) {
return (t /= i / 2) < 1
? n / 2 * t * t * t * t * t + e
: n / 2 * ((t -= 2) * t * t * t * t + 2) + e;
}
],
"ease-in-sine": [
"cubic-bezier(0.470, 0, 0.745, 0.715)",
function(t, e, n, i) {
return -n * Math.cos(t / i * (Math.PI / 2)) + n + e;
}
],
"ease-out-sine": [
"cubic-bezier(0.390, 0.575, 0.565, 1)",
function(t, e, n, i) {
return n * Math.sin(t / i * (Math.PI / 2)) + e;
}
],
"ease-in-out-sine": [
"cubic-bezier(0.445, 0.050, 0.550, 0.950)",
function(t, e, n, i) {
return -n / 2 * (Math.cos(Math.PI * t / i) - 1) + e;
}
],
"ease-in-expo": [
"cubic-bezier(0.950, 0.050, 0.795, 0.035)",
function(t, e, n, i) {
return 0 === t ? e : n * Math.pow(2, 10 * (t / i - 1)) + e;
}
],
"ease-out-expo": [
"cubic-bezier(0.190, 1, 0.220, 1)",
function(t, e, n, i) {
return t === i ? e + n : n * (1 - Math.pow(2, -10 * t / i)) + e;
}
],
"ease-in-out-expo": [
"cubic-bezier(1, 0, 0, 1)",
function(t, e, n, i) {
return 0 === t
? e
: t === i
? e + n
: (t /= i / 2) < 1
? n / 2 * Math.pow(2, 10 * (t - 1)) + e
: n / 2 * (2 - Math.pow(2, -10 * --t)) + e;
}
],
"ease-in-circ": [
"cubic-bezier(0.600, 0.040, 0.980, 0.335)",
function(t, e, n, i) {
return -n * (Math.sqrt(1 - (t /= i) * t) - 1) + e;
}
],
"ease-out-circ": [
"cubic-bezier(0.075, 0.820, 0.165, 1)",
function(t, e, n, i) {
return n * Math.sqrt(1 - (t = t / i - 1) * t) + e;
}
],
"ease-in-out-circ": [
"cubic-bezier(0.785, 0.135, 0.150, 0.860)",
function(t, e, n, i) {
return (t /= i / 2) < 1
? -n / 2 * (Math.sqrt(1 - t * t) - 1) + e
: n / 2 * (Math.sqrt(1 - (t -= 2) * t) + 1) + e;
}
],
"ease-in-back": [
"cubic-bezier(0.600, -0.280, 0.735, 0.045)",
function(t, e, n, i, r) {
return void 0 === r && (r = 1.70158), n *
(t /= i) *
t *
((r + 1) * t - r) +
e;
}
],
"ease-out-back": [
"cubic-bezier(0.175, 0.885, 0.320, 1.275)",
function(t, e, n, i, r) {
return void 0 === r && (r = 1.70158), n *
((t = t / i - 1) * t * ((r + 1) * t + r) + 1) +
e;
}
],
"ease-in-out-back": [
"cubic-bezier(0.680, -0.550, 0.265, 1.550)",
function(t, e, n, i, r) {
return void 0 === r && (r = 1.70158), (t /= i / 2) < 1
? n / 2 * t * t * ((1 + (r *= 1.525)) * t - r) + e
: n / 2 * ((t -= 2) * t * ((1 + (r *= 1.525)) * t + r) + 2) + e;
}
]
},
d = {
"ease-in-back": "cubic-bezier(0.600, 0, 0.735, 0.045)",
"ease-out-back": "cubic-bezier(0.175, 0.885, 0.320, 1)",
"ease-in-out-back": "cubic-bezier(0.680, 0, 0.265, 1)"
},
p = document,
v = window,
w = "bkwld-tram",
m = /[\-\.0-9]/g,
g = /[A-Z]/,
b = "number",
y = /^(rgb|#)/,
x = /(em|cm|mm|in|pt|pc|px)$/,
_ = /(em|cm|mm|in|pt|pc|px|%)$/,
k = /(deg|rad|turn)$/,
z = "unitless",
T = /(all|none) 0s ease 0s/,
E = /^(width|height)$/,
q = " ",
A = p.createElement("a"),
O = ["Webkit", "Moz", "O", "ms"],
j = ["-webkit-", "-moz-", "-o-", "-ms-"],
$ = function(t) {
if (t in A.style) return { dom: t, css: t };
var e,
n,
i = "",
r = t.split("-");
for (e = 0; e < r.length; e++)
i += r[e].charAt(0).toUpperCase() + r[e].slice(1);
for (e = 0; e < O.length; e++)
if ((n = O[e] + i) in A.style) return { dom: n, css: j[e] + t };
},
M = (e.support = {
bind: Function.prototype.bind,
transform: $("transform"),
transition: $("transition"),
backface: $("backface-visibility"),
timing: $("transition-timing-function")
});
if (M.transition) {
var B = M.timing.dom;
if (((A.style[B] = f["ease-in-back"][0]), !A.style[B]))
for (var R in d) f[R][0] = d[R];
}
var L = (e.frame = (function() {
var t =
v.requestAnimationFrame ||
v.webkitRequestAnimationFrame ||
v.mozRequestAnimationFrame ||
v.oRequestAnimationFrame ||
v.msRequestAnimationFrame;
return t && M.bind
? t.bind(v)
: function(t) {
v.setTimeout(t, 16);
};
})()),
S = (e.now = (function() {
var t = v.performance,
e = t && (t.now || t.webkitNow || t.msNow || t.mozNow);
return e && M.bind
? e.bind(t)
: Date.now ||
function() {
return +new Date();
};
})()),
D = h(function(e) {
function i(t, e) {
var n = l(("" + t).split(q)),
i = n[0];
e = e || {};
var r = Q[i];
if (!r) return c("Unsupported property: " + i);
if (!e.weak || !this.props[i]) {
var o = r[0],
a = this.props[i];
return a || (a = this.props[i] = new o.Bare()), a.init(
this.$el,
n,
r,
e
), a;
}
}
function r(t, e, n) {
if (t) {
var r = typeof t;
if (
(
e ||
(
this.timer && this.timer.destroy(),
(this.queue = []),
(this.active = !1)
),
"number" == r && e
)
)
return (this.timer = new U({
duration: t,
context: this,
complete: o
})), void (this.active = !0);
if ("string" == r && e) {
switch (t) {
case "hide":
s.call(this);
break;
case "stop":
a.call(this);
break;
case "redraw":
h.call(this);
break;
default:
i.call(this, t, n && n[1]);
}
return o.call(this);
}
if ("function" == r) return void t.call(this, this);
if ("object" == r) {
var c = 0;
d.call(
this,
t,
function(t, e) {
t.span > c && (c = t.span), t.stop(), t.animate(e);
},
function(t) {
"wait" in t && (c = u(t.wait, 0));
}
), f.call(this), c > 0 &&
(
(this.timer = new U({ duration: c, context: this })),
(this.active = !0),
e && (this.timer.complete = o)
);
var l = this,
p = !1,
v = {};
L(function() {
d.call(l, t, function(t) {
t.active && ((p = !0), (v[t.name] = t.nextStyle));
}), p && l.$el.css(v);
});
}
}
}
function o() {
if (
(
this.timer && this.timer.destroy(),
(this.active = !1),
this.queue.length
)
) {
var t = this.queue.shift();
r.call(this, t.options, !0, t.args);
}
}
function a(t) {
this.timer &&
this.timer.destroy(), (this.queue = []), (this.active = !1);
var e;
"string" == typeof t
? ((e = {}), (e[t] = 1))
: (e = "object" == typeof t && null != t
? t
: this.props), d.call(this, e, p), f.call(this);
}
function s() {
a.call(this), (this.el.style.display = "none");
}
function h() {
this.el.offsetHeight;
}
function f() {
var t,
e,
n = [];
this.upstream && n.push(this.upstream);
for (t in this.props) (e = this.props[t]).active && n.push(e.string);
(n = n.join(
","
)), this.style !== n && ((this.style = n), (this.el.style[M.transition.dom] = n));
}
function d(t, e, r) {
var o,
a,
s,
u,
c = e !== p,
l = {};
for (o in t)
(s = t[o]), o in V
? (l.transform || (l.transform = {}), (l.transform[o] = s))
: (
g.test(o) && (o = n(o)),
o in Q ? (l[o] = s) : (u || (u = {}), (u[o] = s))
);
for (o in l) {
if (((s = l[o]), !(a = this.props[o]))) {
if (!c) continue;
a = i.call(this, o);
}
e.call(this, a, s);
}
r && u && r.call(this, u);
}
function p(t) {
t.stop();
}
function v(t, e) {
t.set(e);
}
function m(t) {
this.$el.css(t);
}
function b(t, n) {
e[t] = function() {
return this.children
? y.call(this, n, arguments)
: (this.el && n.apply(this, arguments), this);
};
}
function y(t, e) {
var n,
i = this.children.length;
for (n = 0; i > n; n++) t.apply(this.children[n], e);
return this;
}
(e.init = function(e) {
if (
(
(this.$el = t(e)),
(this.el = this.$el[0]),
(this.props = {}),
(this.queue = []),
(this.style = ""),
(this.active = !1),
Y.keepInherited && !Y.fallback
)
) {
var n = Z(this.el, "transition");
n && !T.test(n) && (this.upstream = n);
}
M.backface && Y.hideBackface && G(this.el, M.backface.css, "hidden");
}), b("add", i), b("start", r), b("wait", function(t) {
(t = u(
t,
0
)), this.active ? this.queue.push({ options: t }) : ((this.timer = new U({ duration: t, context: this, complete: o })), (this.active = !0));
}), b("then", function(t) {
return this.active
? (
this.queue.push({ options: t, args: arguments }),
void (this.timer.complete = o)
)
: c(
"No active transition timer. Use start() or wait() before then()."
);
}), b("next", o), b("stop", a), b("set", function(t) {
a.call(this, t), d.call(this, t, v, m);
}), b("show", function(t) {
"string" != typeof t && (t = "block"), (this.el.style.display = t);
}), b("hide", s), b("redraw", h), b("destroy", function() {
a.call(this), t.removeData(this.el, w), (this.$el = this.el = null);
});
}),
F = h(D, function(e) {
function n(e, n) {
var i = t.data(e, w) || t.data(e, w, new D.Bare());
return i.el || i.init(e), n ? i.start(n) : i;
}
e.init = function(e, i) {
var r = t(e);
if (!r.length) return this;
if (1 === r.length) return n(r[0], i);
var o = [];
return r.each(function(t, e) {
o.push(n(e, i));
}), (this.children = o), this;
};
}),
I = h(function(t) {
function e() {
var t = this.get();
this.update("auto");
var e = this.get();
return this.update(t), e;
}
function n(t, e, n) {
return void 0 !== e && (n = e), t in f ? t : n;
}
function i(t) {
var e = /rgba?\((\d+),\s*(\d+),\s*(\d+)/.exec(t);
return (e ? r(e[1], e[2], e[3]) : t).replace(
/#(\w)(\w)(\w)$/,
"#$1$1$2$2$3$3"
);
}
var o = { duration: 500, ease: "ease", delay: 0 };
(t.init = function(t, e, i, r) {
(this.$el = t), (this.el = t[0]);
var a = e[0];
i[2] && (a = i[2]), W[a] && (a = W[a]), (this.name = a), (this.type =
i[1]), (this.duration = u(
e[1],
this.duration,
o.duration
)), (this.ease = n(e[2], this.ease, o.ease)), (this.delay = u(
e[3],
this.delay,
o.delay
)), (this.span =
this.duration +
this
.delay), (this.active = !1), (this.nextStyle = null), (this.auto = E.test(
this.name
)), (this.unit = r.unit || this.unit || Y.defaultUnit), (this.angle =
r.angle || this.angle || Y.defaultAngle), Y.fallback || r.fallback
? (this.animate = this.fallback)
: (
(this.animate = this.transition),
(this.string =
this.name +
q +
this.duration +
"ms" +
("ease" != this.ease ? q + f[this.ease][0] : "") +
(this.delay ? q + this.delay + "ms" : ""))
);
}), (t.set = function(t) {
(t = this.convert(t, this.type)), this.update(t), this.redraw();
}), (t.transition = function(t) {
(this.active = !0), (t = this.convert(t, this.type)), this.auto &&
(
"auto" == this.el.style[this.name] &&
(this.update(this.get()), this.redraw()),
"auto" == t && (t = e.call(this))
), (this.nextStyle = t);
}), (t.fallback = function(t) {
var n =
this.el.style[this.name] || this.convert(this.get(), this.type);
(t = this.convert(t, this.type)), this.auto &&
(
"auto" == n && (n = this.convert(this.get(), this.type)),
"auto" == t && (t = e.call(this))
), (this.tween = new P({
from: n,
to: t,
duration: this.duration,
delay: this.delay,
ease: this.ease,
update: this.update,
context: this
}));
}), (t.get = function() {
return Z(this.el, this.name);
}), (t.update = function(t) {
G(this.el, this.name, t);
}), (t.stop = function() {
(this.active || this.nextStyle) &&
(
(this.active = !1),
(this.nextStyle = null),
G(this.el, this.name, this.get())
);
var t = this.tween;
t && t.context && t.destroy();
}), (t.convert = function(t, e) {
if ("auto" == t && this.auto) return t;
var n,
r = "number" == typeof t,
o = "string" == typeof t;
switch (e) {
case b:
if (r) return t;
if (o && "" === t.replace(m, "")) return +t;
n = "number(unitless)";
break;
case y:
if (o) {
if ("" === t && this.original) return this.original;
if (e.test(t))
return "#" == t.charAt(0) && 7 == t.length ? t : i(t);
}
n = "hex or rgb string";
break;
case x:
if (r) return t + this.unit;
if (o && e.test(t)) return t;
n = "number(px) or string(unit)";
break;
case _:
if (r) return t + this.unit;
if (o && e.test(t)) return t;
n = "number(px) or string(unit or %)";
break;
case k:
if (r) return t + this.angle;
if (o && e.test(t)) return t;
n = "number(deg) or string(angle)";
break;
case z:
if (r) return t;
if (o && _.test(t)) return t;
n = "number(unitless) or string(unit or %)";
}
return a(n, t), t;
}), (t.redraw = function() {
this.el.offsetHeight;
});
}),
C = h(I, function(t, e) {
t.init = function() {
e.init.apply(this, arguments), this.original ||
(this.original = this.convert(this.get(), y));
};
}),
H = h(I, function(t, e) {
(t.init = function() {
e.init.apply(this, arguments), (this.animate = this.fallback);
}), (t.get = function() {
return this.$el[this.name]();
}), (t.update = function(t) {
this.$el[this.name](t);
});
}),
N = h(I, function(t, e) {
function n(t, e) {
var n, i, r, o, a;
for (n in t)
(o = V[n]), (r = o[0]), (i = o[1] || n), (a = this.convert(
t[n],
r
)), e.call(this, i, a, r);
}
(t.init = function() {
e.init.apply(this, arguments), this.current ||
(
(this.current = {}),
V.perspective &&
Y.perspective &&
(
(this.current.perspective = Y.perspective),
G(this.el, this.name, this.style(this.current)),
this.redraw()
)
);
}), (t.set = function(t) {
n.call(this, t, function(t, e) {
this.current[t] = e;
}), G(this.el, this.name, this.style(this.current)), this.redraw();
}), (t.transition = function(t) {
var e = this.values(t);
this.tween = new X({
current: this.current,
values: e,
duration: this.duration,
delay: this.delay,
ease: this.ease
});
var n,
i = {};
for (n in this.current) i[n] = n in e ? e[n] : this.current[n];
(this.active = !0), (this.nextStyle = this.style(i));
}), (t.fallback = function(t) {
var e = this.values(t);
this.tween = new X({
current: this.current,
values: e,
duration: this.duration,
delay: this.delay,
ease: this.ease,
update: this.update,
context: this
});
}), (t.update = function() {
G(this.el, this.name, this.style(this.current));
}), (t.style = function(t) {
var e,
n = "";
for (e in t) n += e + "(" + t[e] + ") ";
return n;
}), (t.values = function(t) {
var e,
i = {};
return n.call(this, t, function(t, n, r) {
(i[
t
] = n), void 0 === this.current[t] && ((e = 0), ~t.indexOf("scale") && (e = 1), (this.current[t] = this.convert(e, r)));
}), i;
});
}),
P = h(function(e) {
function n(t) {
1 === d.push(t) && L(a);
}
function a() {
var t,
e,
n,
i = d.length;
if (i) for (L(a), e = S(), t = i; t--; ) (n = d[t]) && n.render(e);
}
function u(e) {
var n,
i = t.inArray(e, d);
i >= 0 &&
(
(n = d.slice(i + 1)),
(d.length = i),
n.length && (d = d.concat(n))
);
}
function c(t) {
return Math.round(t * p) / p;
}
function l(t, e, n) {
return r(
t[0] + n * (e[0] - t[0]),
t[1] + n * (e[1] - t[1]),
t[2] + n * (e[2] - t[2])
);
}
var h = { ease: f.ease[1], from: 0, to: 1 };
(e.init = function(t) {
(this.duration = t.duration || 0), (this.delay = t.delay || 0);
var e = t.ease || h.ease;
f[e] && (e = f[e][1]), "function" != typeof e &&
(e = h.ease), (this.ease = e), (this.update =
t.update || o), (this.complete = t.complete || o), (this.context =
t.context || this), (this.name = t.name);
var n = t.from,
i = t.to;
void 0 === n && (n = h.from), void 0 === i && (i = h.to), (this.unit =
t.unit || ""), "number" == typeof n && "number" == typeof i
? ((this.begin = n), (this.change = i - n))
: this.format(i, n), (this.value =
this.begin + this.unit), (this.start = S()), !1 !== t.autoplay &&
this.play();
}), (e.play = function() {
this.active ||
(this.start || (this.start = S()), (this.active = !0), n(this));
}), (e.stop = function() {
this.active && ((this.active = !1), u(this));
}), (e.render = function(t) {
var e,
n = t - this.start;
if (this.delay) {
if (n <= this.delay) return;
n -= this.delay;
}
if (n < this.duration) {
var i = this.ease(n, 0, 1, this.duration);
return (e = this.startRGB
? l(this.startRGB, this.endRGB, i)
: c(this.begin + i * this.change)), (this.value =
e + this.unit), void this.update.call(this.context, this.value);
}
(e = this.endHex || this.begin + this.change), (this.value =
e + this.unit), this.update.call(
this.context,
this.value
), this.complete.call(this.context), this.destroy();
}), (e.format = function(t, e) {
if (((e += ""), "#" == (t += "").charAt(0)))
return (this.startRGB = i(e)), (this.endRGB = i(
t
)), (this.endHex = t), (this.begin = 0), void (this.change = 1);
if (!this.unit) {
var n = e.replace(m, "");
n !== t.replace(m, "") && s("tween", e, t), (this.unit = n);
}
(e = parseFloat(e)), (t = parseFloat(
t
)), (this.begin = this.value = e), (this.change = t - e);
}), (e.destroy = function() {
this.stop(), (this.context = null), (this.ease = this.update = this.complete = o);
});
var d = [],
p = 1e3;
}),
U = h(P, function(t) {
(t.init = function(t) {
(this.duration = t.duration || 0), (this.complete =
t.complete || o), (this.context = t.context), this.play();
}), (t.render = function(t) {
t - this.start < this.duration ||
(this.complete.call(this.context), this.destroy());
});
}),
X = h(P, function(t, e) {
(t.init = function(t) {
(this.context = t.context), (this.update =
t.update), (this.tweens = []), (this.current = t.current);
var e, n;
for (e in t.values)
(n = t.values[e]), this.current[e] !== n &&
this.tweens.push(
new P({
name: e,
from: this.current[e],
to: n,
duration: t.duration,
delay: t.delay,
ease: t.ease,
autoplay: !1
})
);
this.play();
}), (t.render = function(t) {
var e,
n,
i = !1;
for (e = this.tweens.length; e--; )
(n = this.tweens[e]).context &&
(n.render(t), (this.current[n.name] = n.value), (i = !0));
return i
? void (this.update && this.update.call(this.context))
: this.destroy();
}), (t.destroy = function() {
if ((e.destroy.call(this), this.tweens)) {
var t;
for (t = this.tweens.length; t--; ) this.tweens[t].destroy();
(this.tweens = null), (this.current = null);
}
});
}),
Y = (e.config = {
debug: !1,
defaultUnit: "px",
defaultAngle: "deg",
keepInherited: !1,
hideBackface: !1,
perspective: "",
fallback: !M.transition,
agentTests: []
});
(e.fallback = function(t) {
if (!M.transition) return (Y.fallback = !0);
Y.agentTests.push("(" + t + ")");
var e = new RegExp(Y.agentTests.join("|"), "i");
Y.fallback = e.test(navigator.userAgent);
}), e.fallback("6.0.[2-5] Safari"), (e.tween = function(t) {
return new P(t);
}), (e.delay = function(t, e, n) {
return new U({ complete: e, duration: t, context: n });
}), (t.fn.tram = function(t) {
return e.call(null, this, t);
});
var G = t.style,
Z = t.css,
W = { transform: M.transform && M.transform.css },
Q = {
color: [C, y],
background: [C, y, "background-color"],
"outline-color": [C, y],
"border-color": [C, y],
"border-top-color": [C, y],
"border-right-color": [C, y],
"border-bottom-color": [C, y],
"border-left-color": [C, y],
"border-width": [I, x],
"border-top-width": [I, x],
"border-right-width": [I, x],
"border-bottom-width": [I, x],
"border-left-width": [I, x],
"border-spacing": [I, x],
"letter-spacing": [I, x],
margin: [I, x],
"margin-top": [I, x],
"margin-right": [I, x],
"margin-bottom": [I, x],
"margin-left": [I, x],
padding: [I, x],
"padding-top": [I, x],
"padding-right": [I, x],
"padding-bottom": [I, x],
"padding-left": [I, x],
"outline-width": [I, x],
opacity: [I, b],
top: [I, _],
right: [I, _],
bottom: [I, _],
left: [I, _],
"font-size": [I, _],
"text-indent": [I, _],
"word-spacing": [I, _],
width: [I, _],
"min-width": [I, _],
"max-width": [I, _],
height: [I, _],
"min-height": [I, _],
"max-height": [I, _],
"line-height": [I, z],
"scroll-top": [H, b, "scrollTop"],
"scroll-left": [H, b, "scrollLeft"]
},
V = {};
M.transform &&
(
(Q.transform = [N]),
(V = {
x: [_, "translateX"],
y: [_, "translateY"],
rotate: [k],
rotateX: [k],
rotateY: [k],
scale: [b],
scaleX: [b],
scaleY: [b],
skew: [k],
skewX: [k],
skewY: [k]
})
), M.transform &&
M.backface &&
(
(V.z = [_, "translateZ"]),
(V.rotateZ = [k]),
(V.scaleZ = [b]),
(V.perspective = [x])
);
var J = /ms/,
K = /s|\./;
return (t.tram = e);
})(window.jQuery);
var e = {},
n = t(function(t) {
var n = window.$,
i =
e &&
n.tram; /*!
* Webflow._ (aka) Underscore.js 1.6.0 (custom build)
* _.each
* _.map
* _.find
* _.filter
* _.any
* _.contains
* _.delay
* _.defer
* _.throttle (webflow)
* _.debounce
* _.keys
* _.has
* _.now
*
* http://underscorejs.org
* (c) 2009-2013 Jeremy Ashkenas, DocumentCloud and Investigative Reporters & Editors
* Underscore may be freely distributed under the MIT license.
* @license MIT
*/
t.exports = (function() {
var t = {};
t.VERSION = "1.6.0-Webflow";
var e = {},
n = Array.prototype,
r = Object.prototype,
o = Function.prototype,
a = (n.push, n.slice),
s = (n.concat, r.toString, r.hasOwnProperty),
u = n.forEach,
c = n.map,
l = (n.reduce, n.reduceRight, n.filter),
h = (n.every, n.some),
f = n.indexOf,
d = (n.lastIndexOf, Array.isArray, Object.keys),
p = (
o.bind,
(t.each = t.forEach = function(n, i, r) {
if (null == n) return n;
if (u && n.forEach === u) n.forEach(i, r);
else if (n.length === +n.length) {
for (var o = 0, a = n.length; o < a; o++)
if (i.call(r, n[o], o, n) === e) return;
} else
for (var s = t.keys(n), o = 0, a = s.length; o < a; o++)
if (i.call(r, n[s[o]], s[o], n) === e) return;
return n;
})
);
(t.map = t.collect = function(t, e, n) {
var i = [];
return null == t
? i
: c && t.map === c
? t.map(e, n)
: (
p(t, function(t, r, o) {
i.push(e.call(n, t, r, o));
}),
i
);
}), (t.find = t.detect = function(t, e, n) {
var i;
return v(t, function(t, r, o) {
if (e.call(n, t, r, o)) return (i = t), !0;
}), i;
}), (t.filter = t.select = function(t, e, n) {
var i = [];
return null == t
? i
: l && t.filter === l
? t.filter(e, n)
: (
p(t, function(t, r, o) {
e.call(n, t, r, o) && i.push(t);
}),
i
);
});
var v = (t.some = t.any = function(n, i, r) {
i || (i = t.identity);
var o = !1;
return null == n
? o
: h && n.some === h
? n.some(i, r)
: (
p(n, function(t, n, a) {
if (o || (o = i.call(r, t, n, a))) return e;
}),
!!o
);
});
(t.contains = t.include = function(t, e) {
return (
null != t &&
(f && t.indexOf === f
? -1 != t.indexOf(e)
: v(t, function(t) {
return t === e;
}))
);
}), (t.delay = function(t, e) {
var n = a.call(arguments, 2);
return setTimeout(function() {
return t.apply(null, n);
}, e);
}), (t.defer = function(e) {
return t.delay.apply(t, [e, 1].concat(a.call(arguments, 1)));
}), (t.throttle = function(t) {
var e, n, r;
return function() {
e ||
(
(e = !0),
(n = arguments),
(r = this),
i.frame(function() {
(e = !1), t.apply(r, n);
})
);
};
}), (t.debounce = function(e, n, i) {
var r,
o,
a,
s,
u,
c = function() {
var l = t.now() - s;
l < n
? (r = setTimeout(c, n - l))
: ((r = null), i || ((u = e.apply(a, o)), (a = o = null)));
};
return function() {
(a = this), (o = arguments), (s = t.now());
var l = i && !r;
return r || (r = setTimeout(c, n)), l &&
((u = e.apply(a, o)), (a = o = null)), u;
};
}), (t.defaults = function(e) {
if (!t.isObject(e)) return e;
for (var n = 1, i = arguments.length; n < i; n++) {
var r = arguments[n];
for (var o in r) void 0 === e[o] && (e[o] = r[o]);
}
return e;
}), (t.keys = function(e) {
if (!t.isObject(e)) return [];
if (d) return d(e);
var n = [];
for (var i in e) t.has(e, i) && n.push(i);
return n;
}), (t.has = function(t, e) {
return s.call(t, e);
}), (t.isObject = function(t) {
return t === Object(t);
}), (t.now =
Date.now ||
function() {
return new Date().getTime();
}), (t.templateSettings = {
evaluate: /<%([\s\S]+?)%>/g,
interpolate: /<%=([\s\S]+?)%>/g,
escape: /<%-([\s\S]+?)%>/g
});
var w = /(.)^/,
m = {
"'": "'",
"\\": "\\",
"\r": "r",
"\n": "n",
"\u2028": "u2028",
"\u2029": "u2029"
},
g = /\\|'|\r|\n|\u2028|\u2029/g,
b = function(t) {
return "\\" + m[t];
};
return (t.template = function(e, n, i) {
!n && i && (n = i), (n = t.defaults({}, n, t.templateSettings));
var r = RegExp(
[
(n.escape || w).source,
(n.interpolate || w).source,
(n.evaluate || w).source
].join("|") + "|$",
"g"
),
o = 0,
a = "__p+='";
e.replace(r, function(t, n, i, r, s) {
return (a += e
.slice(o, s)
.replace(
g,
b
)), (o = s + t.length), n ? (a += "'+\n((__t=(" + n + "))==null?'':_.escape(__t))+\n'") : i ? (a += "'+\n((__t=(" + i + "))==null?'':__t)+\n'") : r && (a += "';\n" + r + "\n__p+='"), t;
}), (a += "';\n"), n.variable ||
(a = "with(obj||{}){\n" + a + "}\n"), (a =
"var __t,__p='',__j=Array.prototype.join,print=function(){__p+=__j.call(arguments,'');};\n" +
a +
"return __p;\n");
try {
var s = new Function(n.variable || "obj", "_", a);
} catch (t) {
throw ((t.source = a), t);
}
var u = function(e) {
return s.call(this, e, t);
},
c = n.variable || "obj";
return (u.source = "function(" + c + "){\n" + a + "}"), u;
}), t;
})();
}),
i = n && "object" == typeof n && "default" in n ? n.default : n,
r = t(function(t) {
function n(t) {
h.env() &&
(
g(t.design) && w.on("__wf_design", t.design),
g(t.preview) && w.on("__wf_preview", t.preview)
), g(t.destroy) && w.on("__wf_destroy", t.destroy), t.ready && g(t.ready) && r(t);
}
function r(t) {
x ? t.ready() : b.contains(d, t.ready) || d.push(t.ready);
}
function o(t) {
g(t.design) &&
w.off(
"__wf_design",
t.design
), g(t.preview) && w.off("__wf_preview", t.preview), g(t.destroy) && w.off("__wf_destroy", t.destroy), t.ready && g(t.ready) && a(t);
}
function a(t) {
d = b.filter(d, function(e) {
return e !== t.ready;
});
}
function s(t, e) {
var n = [],
i = {};
return (i.up = b.throttle(function(t) {
b.each(n, function(e) {
e(t);
});
})), t && e && t.on(e, i.up), (i.on = function(t) {
"function" == typeof t && (b.contains(n, t) || n.push(t));
}), (i.off = function(t) {
n = arguments.length
? b.filter(n, function(e) {
return e !== t;
})
: [];
}), i;
}
function u(t) {
g(t) && t();
}
function c() {
(_ = !1), b.each(f, n);
}
function l() {
j &&
(
j.reject(),
w.off("load", j.resolve)
), (j = new v.Deferred()), w.on("load", j.resolve);
}
var h = {},
f = {},
d = [],
p = window.Webflow || [],
v = window.jQuery,
w = v(window),
m = v(document),
g = v.isFunction,
b = (h._ = i),
y = e && v.tram,
x = !1,
_ = !1;
(y.config.hideBackface = !1), (y.config.keepInherited = !0), (h.define = function(
t,
e,
i
) {
f[t] && o(f[t]);
var r = (f[t] = e(v, b, i) || {});
return n(r), r;
}), (h.require = function(t) {
return f[t];
}), (h.push = function(t) {
x ? g(t) && t() : p.push(t);
}), (h.env = function(t) {
var e = window.__wf_design,
n = void 0 !== e;
return t
? "design" === t
? n && e
: "preview" === t
? n && !e
: "slug" === t
? n && window.__wf_slug
: "editor" === t
? window.WebflowEditor
: "test" === t
? window.__wf_test
: "frame" === t ? window !== window.top : void 0
: n;
});
var k = navigator.userAgent.toLowerCase(),
z = navigator.appVersion.toLowerCase(),
T = (h.env.touch =
"ontouchstart" in window ||
(window.DocumentTouch && document instanceof window.DocumentTouch)),
E = (h.env.chrome =
/chrome/.test(k) &&
/Google/.test(navigator.vendor) &&
parseInt(z.match(/chrome\/(\d+)\./)[1], 10)),
q = (h.env.ios = /(ipod|iphone|ipad)/.test(k));
h.env.safari = /safari/.test(k) && !E && !q;
var A;
T &&
m.on("touchstart mousedown", function(t) {
A = t.target;
}), (h.validClick = T
? function(t) {
return t === A || v.contains(t, A);
}
: function() {
return !0;
});
var O = "resize.webflow orientationchange.webflow load.webflow";
(h.resize = s(
w,
O
)), (h.scroll = s(w, "scroll.webflow resize.webflow orientationchange.webflow load.webflow")), (h.redraw = s()), (h.location = function(
t
) {
window.location = t;
}), h.env() &&
(h.location = function(t) {
window.dispatchEvent(new CustomEvent("__wf_location", { detail: t }));
}), (h.ready = function() {
(x = !0), _ ? c() : b.each(d, u), b.each(p, u), h.resize.up();
});
var j;
(h.load = function(t) {
j.then(t);
}), (h.destroy = function(t) {
(t = t || {}), (_ = !0), w.triggerHandler("__wf_destroy"), null !=
t.domready && (x = t.domready), b.each(
f,
o
), h.resize.off(), h.scroll.off(), h.redraw.off(), (d = []), (p = []), "pending" ===
j.state() && l();
}), v(h.ready), l(), (t.exports = window.Webflow = h);
}),
o = r && "object" == typeof r && "default" in r ? r.default : r,
a = (
t(function(t) {
var e = o;
e.define(
"brand",
(t.exports = function(t) {
function n() {
var e = t('<a class="w-webflow-badge"></a>').attr(
"href",
"https://webflow.com?utm_campaign=brandjs"
),
n = t("<img>")
.attr(
"src",
"https://d1otoma47x30pg.cloudfront.net/img/webflow-badge-icon.60efbf6ec9.svg"
)
.css({ marginRight: "8px", width: "16px" }),
i = t("<img>").attr(
"src",
"https://d1otoma47x30pg.cloudfront.net/img/webflow-badge-text.6faa6a38cd.svg"
);
return e.append(n, i), e[0];
}
function i() {
var t = s.children(u),
n = t.length && t.get(0) === r,
i = e.env("editor");
n ? i && t.remove() : (t.length && t.remove(), i || s.append(r));
}
var r,
o = {},
a = t("html"),
s = t("body"),
u = ".w-webflow-badge",
c = window.location,
l = /PhantomJS/i.test(navigator.userAgent);
return (o.ready = function() {
var t = a.attr("data-wf-status"),
e = a.attr("data-wf-domain") || "";
/\.webflow\.io$/i.test(e) && c.hostname !== e && (t = !0), t &&
!l &&
((r = r || n()), i(), setTimeout(i, 500));
}), o;
})
);
}),
t(function(t) {
var e = window.jQuery,
n = {},
i = [],
r = {
reset: function(t, e) {
e.__wf_intro = null;
},
intro: function(t, i) {
i.__wf_intro ||
((i.__wf_intro = !0), e(i).triggerHandler(n.types.INTRO));
},
outro: function(t, i) {
i.__wf_intro &&
((i.__wf_intro = null), e(i).triggerHandler(n.types.OUTRO));
}
};
(n.triggers = {}), (n.types = { INTRO: "w-ix-intro.w-ix", OUTRO: "w-ix-outro.w-ix" }), (n.init = function() {
for (var t = i.length, o = 0; o < t; o++) {
var a = i[o];
a[0](0, a[1]);
}
(i = []), e.extend(n.triggers, r);
}), (n.async = function() {
for (var t in r) {
var e = r[t];
r.hasOwnProperty(t) &&
(n.triggers[t] = function(t, n) {
i.push([e, n]);
});
}
}), n.async(), (t.exports = n);
})
),
s = a && "object" == typeof a && "default" in a ? a.default : a;
t(function(t) {
var e = o,
n = s;
e.define(
"ix",
(t.exports = function(t, i) {
function r(t) {
t &&
(
(E = {}),
i.each(t, function(t) {
E[t.slug] = t.value;
}),
o()
);
}
function o() {
var i = t("[data-ix]");
i.length &&
(
i.each(u),
i.each(a),
q.length && (e.scroll.on(c), setTimeout(c, 1)),
A.length && e.load(l),
O.length && setTimeout(h, j),
n.init(),
e.redraw.up()
);
}
function a(r, o) {
var a = t(o),
u = a.attr("data-ix"),
c = E[u];
if (c) {
var l = c.triggers;
l &&
(
m.style(a, c.style),
i.each(l, function(t) {
function i() {
f(t, a, { group: "A" });
}
function r() {
f(t, a, { group: "B" });
}
var o = {},
u = t.type,
c = t.stepsB && t.stepsB.length;
if ("load" !== u) {
if ("click" === u)
return a.on("click" + b, function(n) {
e.validClick(n.currentTarget) &&
(
"#" === a.attr("href") && n.preventDefault(),
f(t, a, { group: o.clicked ? "B" : "A" }),
c && (o.clicked = !o.clicked)
);
}), void (T = T.add(a));
if ("hover" === u)
return a.on("mouseenter" + b, i), a.on(
"mouseleave" + b,
r
), void (T = T.add(a));
if ("scroll" !== u) {
var l = $[u];
if (l) {
var h = a.closest(l);
return h
.on(n.types.INTRO, i)
.on(n.types.OUTRO, r), void (T = T.add(h));
}
} else
q.push({
el: a,
trigger: t,
state: { active: !1 },
offsetTop: s(t.offsetTop),
offsetBot: s(t.offsetBot)
});
} else t.preload && !_ ? A.push(i) : O.push(i);
})
);
}
}
function s(t) {
if (!t) return 0;
t = String(t);
var e = parseInt(t, 10);
return e !== e
? 0
: (t.indexOf("%") > 0 && (e /= 100) >= 1 && (e = 0.999), e);
}
function u(e, n) {
t(n).off(b);
}
function c() {
for (
var t = g.scrollTop(), e = g.height(), n = q.length, i = 0;
i < n;
i++
) {
var r = q[i],
o = r.el,
a = r.trigger,
s = a.stepsB && a.stepsB.length,
u = r.state,
c = o.offset().top,
l = o.outerHeight(),
h = r.offsetTop,
d = r.offsetBot;
h < 1 && h > 0 && (h *= e), d < 1 && d > 0 && (d *= e);
var p = c + l - h >= t && c + d <= t + e;
p !== u.active &&
((!1 !== p || s) &&
((u.active = p), f(a, o, { group: p ? "A" : "B" })));
}
}
function l() {
for (var t = A.length, e = 0; e < t; e++) A[e]();
}
function h() {
for (var t = O.length, e = 0; e < t; e++) O[e]();
}
function f(e, n, i, r) {
function o() {
if (c) return f(e, n, i, !0);
"auto" === w.width && p.set({ width: "auto" }), "auto" ===
w.height && p.set({ height: "auto" }), a && a();
}
var a = (i = i || {}).done,
s = e.preserve3d;
if (!v || i.force) {
var u = i.group || "A",
c = e["loop" + u],
l = e["steps" + u];
if (l && l.length) {
if ((l.length < 2 && (c = !1), !r)) {
var h = e.selector;
h &&
(
(n = e.descend
? n.find(h)
: e.siblings ? n.siblings(h) : t(h)),
_ && n.attr("data-ix-affect", 1)
), k && n.addClass("w-ix-emptyfix"), s &&
n.css("transform-style", "preserve-3d");
}
for (var p = y(n), w = { omit3d: !s }, m = 0; m < l.length; m++)
d(p, l[m], w);
w.start ? p.then(o) : o();
}
}
}
function d(t, n, i) {
var r = "add",
o = "start";
i.start && (r = o = "then");
var a = n.transition;
if (a) {
a = a.split(",");
for (var s = 0; s < a.length; s++) {
var u = a[s];
t[r](u);
}
}
var c = p(n, i) || {};
if (
(
null != c.width && (i.width = c.width),
null != c.height && (i.height = c.height),
null == a
)
) {
i.start
? t.then(function() {
var n = this.queue;
this.set(
c
), c.display && (t.redraw(), e.redraw.up()), (this.queue = n), this.next();
})
: (t.set(c), c.display && (t.redraw(), e.redraw.up()));
var l = c.wait;
null != l && (t.wait(l), (i.start = !0));
} else {
if (c.display) {
var h = c.display;
delete c.display, i.start
? t.then(function() {
var t = this.queue;
this.set({
display: h
}).redraw(), e.redraw.up(), (this.queue = t), this.next();
})
: (t.set({ display: h }).redraw(), e.redraw.up());
}
t[o](c), (i.start = !0);
}
}
function p(t, e) {
var n = e && e.omit3d,
i = {},
r = !1;
for (var o in t)
"transition" !== o &&
"keysort" !== o &&
(!n ||
("z" !== o &&
"rotateX" !== o &&
"rotateY" !== o &&
"scaleZ" !== o)) &&
((i[o] = t[o]), (r = !0));
return r ? i : null;
}
var v,
w,
m = {},
g = t(window),
b = ".w-ix",
y = t.tram,
x = e.env,
_ = x(),
k = x.chrome && x.chrome < 35,
z = "none 0s ease 0s",
T = t(),
E = {},
q = [],
A = [],
O = [],
j = 1,
$ = {
tabs: ".w-tab-link, .w-tab-pane",
dropdown: ".w-dropdown",
slider: ".w-slide",
navbar: ".w-nav"
};
return (m.init = function(t) {
setTimeout(function() {
r(t);
}, 1);
}), (m.preview = function() {
(v = !1), (j = 100), setTimeout(function() {
r(window.__wf_ix);
}, 1);
}), (m.design = function() {
(v = !0), m.destroy();
}), (m.destroy = function() {
(w = !0), T.each(u), e.scroll.off(
c
), n.async(), (q = []), (A = []), (O = []);
}), (m.ready = function() {
if (_) return x("design") ? m.design() : m.preview();
E && w && ((w = !1), o());
}), (m.run = f), (m.style = _
? function(e, n) {
var i = y(e);
if (!t.isEmptyObject(n)) {
e.css("transition", "");
var r = e.css("transition");
r === z && (r = i.upstream = null), (i.upstream = z), i.set(
p(n)
), (i.upstream = r);
}
}
: function(t, e) {
y(t).set(p(e));
}), m;
})
);
}), t(function(t) {
var e = o;
e.define(
"links",
(t.exports = function(t, n) {
function i(e) {
var n =
(a && e.getAttribute("href-disabled")) || e.getAttribute("href");
if (((d.href = n), !(n.indexOf(":") >= 0))) {
var i = t(e);
if (0 === n.indexOf("#") && v.test(n)) {
var r = t(n);
r.length && s.push({ link: i, sec: r, active: !1 });
} else if ("#" !== n) {
var c = d.href === f.href || n === u || (w.test(n) && m.test(u));
o(i, p, c);
}
}
}
function r() {
var t = l.scrollTop(),
e = l.height();
n.each(s, function(n) {
var i = n.link,
r = n.sec,
a = r.offset().top,
s = r.outerHeight(),
u = 0.5 * e,
c = r.is(":visible") && a + s - u >= t && a + u <= t + e;
n.active !== c && ((n.active = c), o(i, p, c));
});
}
function o(t, e, n) {
var i = t.hasClass(e);
(n && i) || ((n || i) && (n ? t.addClass(e) : t.removeClass(e)));
}
var a,
s,
u,
c = {},
l = t(window),
h = e.env(),
f = window.location,
d = document.createElement("a"),
p = "w--current",
v = /^#[\w:.-]+$/,
w = /index\.(html|php)$/,
m = /\/$/;
return (c.ready = c.design = c.preview = function() {
(a = h && e.env("design")), (u =
e.env("slug") || f.pathname || ""), e.scroll.off(r), (s = []);
for (var t = document.links, n = 0; n < t.length; ++n) i(t[n]);
s.length && (e.scroll.on(r), r());
}), c;
})
);
}), t(function(t) {
var e = o;
e.define(
"scroll",
(t.exports = function(t) {
function n(n, r) {
if (l.test(n)) {
var o = t("#" + n);
if (o.length) {
r && (r.preventDefault(), r.stopPropagation()), u.hash === n ||
!c ||
!c.pushState ||
(e.env.chrome && "file:" === u.protocol) ||
((c.state && c.state.hash) !== n &&
c.pushState({ hash: n }, "", "#" + n));
var a = e.env("editor") ? ".w-editor-body" : "body",
h = t(
"header, " +
a +
" > .header, " +
a +
" > .w-nav:not([data-no-scroll])"
),
f = "fixed" === h.css("position") ? h.outerHeight() : 0;
s.setTimeout(function() {
i(o, f);
}, r ? 0 : 300);
}
}
}
function i(e, n) {
var i = t(s).scrollTop(),
o = e.offset().top - n;
if ("mid" === e.data("scroll")) {
var a = t(s).height() - n,
u = e.outerHeight();
u < a && (o -= Math.round((a - u) / 2));
}
var c = 1;
t("body").add(e).each(function() {
var e = parseFloat(t(this).attr("data-scroll-time"), 10);
!isNaN(e) && (0 === e || e > 0) && (c = e);
}), Date.now ||
(Date.now = function() {
return new Date().getTime();
});
var l = Date.now(),
h =
s.requestAnimationFrame ||
s.mozRequestAnimationFrame ||
s.webkitRequestAnimationFrame ||
function(t) {
s.setTimeout(t, 15);
},
f = (472.143 * Math.log(Math.abs(i - o) + 125) - 2e3) * c,
d = function() {
var t = Date.now() - l;
s.scroll(0, r(i, o, t, f)), t <= f && h(d);
};
d();
}
function r(t, e, n, i) {
return n > i ? e : t + (e - t) * o(n / i);
}
function o(t) {
return t < 0.5
? 4 * t * t * t
: (t - 1) * (2 * t - 2) * (2 * t - 2) + 1;
}
var a = t(document),
s = window,
u = s.location,
c = (function() {
try {
return Boolean(s.frameElement);
} catch (t) {
return !0;
}
})()
? null
: s.history,
l = /^[a-zA-Z0-9][\w:.-]*$/;
return {
ready: function() {
u.hash && n(u.hash.substring(1));
var i = u.href.split("#")[0];
a.on("click", "a", function(r) {
if (
!(
e.env("design") ||
(window.$.mobile && t(r.currentTarget).hasClass("ui-link"))
)
)
if ("#" !== this.getAttribute("href")) {
var o = this.href.split("#"),
a = o[0] === i ? o[1] : null;
a && n(a, r);
} else r.preventDefault();
});
}
};
})
);
}), t(function(t) {
o.define(
"touch",
(t.exports = function(t) {
function e(t) {
function e(t) {
var e = t.touches;
(e && e.length > 1) ||
(
(l = !0),
(h = !1),
e
? ((f = !0), (s = e[0].clientX), (u = e[0].clientY))
: ((s = t.clientX), (u = t.clientY)),
(c = s)
);
}
function i(t) {
if (l) {
if (f && "mousemove" === t.type)
return t.preventDefault(), void t.stopPropagation();
var e = t.touches,
i = e ? e[0].clientX : t.clientX,
r = e ? e[0].clientY : t.clientY,
p = i - c;
(c = i), Math.abs(p) > d &&
o &&
"" === String(o()) &&
(
n("swipe", t, { direction: p > 0 ? "right" : "left" }),
a()
), (Math.abs(i - s) > 10 || Math.abs(r - u) > 10) && (h = !0);
}
}
function r(t) {
if (l) {
if (((l = !1), f && "mouseup" === t.type))
return t.preventDefault(), t.stopPropagation(), void (f = !1);
h || n("tap", t);
}
}
function a() {
l = !1;
}
var s,
u,
c,
l = !1,
h = !1,
f = !1,
d = Math.min(Math.round(0.04 * window.innerWidth), 40);
t.addEventListener("touchstart", e, !1), t.addEventListener(
"touchmove",
i,
!1
), t.addEventListener("touchend", r, !1), t.addEventListener(
"touchcancel",
a,
!1
), t.addEventListener("mousedown", e, !1), t.addEventListener(
"mousemove",
i,
!1
), t.addEventListener("mouseup", r, !1), t.addEventListener(
"mouseout",
a,
!1
), (this.destroy = function() {
t.removeEventListener("touchstart", e, !1), t.removeEventListener(
"touchmove",
i,
!1
), t.removeEventListener("touchend", r, !1), t.removeEventListener(
"touchcancel",
a,
!1
), t.removeEventListener("mousedown", e, !1), t.removeEventListener(
"mousemove",
i,
!1
), t.removeEventListener("mouseup", r, !1), t.removeEventListener(
"mouseout",
a,
!1
), (t = null);
});
}
function n(e, n, i) {
var r = t.Event(e, { originalEvent: n });
t(n.target).trigger(r, i);
}
var i = {},
r = !document.addEventListener,
o = window.getSelection;
return r &&
(t.event.special.tap = {
bindType: "click",
delegateType: "click"
}), (i.init = function(n) {
return r
? null
: (n = "string" == typeof n ? t(n).get(0) : n) ? new e(n) : null;
}), (i.instance = i.init(document)), i;
})
);
});
})(); /**
* ----------------------------------------------------------------------
* Webflow: Interactions: Init
*/
Webflow.require("ix").init([
{
slug: "button-interaction",
name: "Button Interaction",
value: {
style: {},
triggers: [
{
type: "click",
selector: ".button-filler",
descend: true,
stepsA: [
{ wait: "650ms" },
{ height: "100%", transition: "height 400ms ease-in 0" }
],
stepsB: []
},
{
type: "click",
selector: ".arrow-wrapper",
descend: true,
preserve3d: true,
stepsA: [
{
transition: "transform 300ms ease-in 0",
x: "0px",
y: "25px",
z: "0px"
}
],
stepsB: []
},
{
type: "click",
selector: ".arrow-left",
descend: true,
preserve3d: true,
stepsA: [
{ wait: "250ms" },
{
transition: "transform 300ms ease 0",
x: "0px",
y: "7px",
z: "0px",
rotateX: "0deg",
rotateY: "0deg",
rotateZ: "0deg"
}
],
stepsB: []
},
{
type: "click",
selector: ".arrow-right",
descend: true,
preserve3d: true,
stepsA: [
{ wait: "250ms" },
{
transition: "transform 300ms ease 0",
x: "0px",
y: "7px",
z: "0px",
rotateX: "0deg",
rotateY: "0deg",
rotateZ: "0deg"
}
],
stepsB: []
},
{
type: "click",
selector: ".arrow-stem",
descend: true,
stepsA: [
{ wait: "250ms" },
{
height: "0px",
transition: "transform 200 ease 0, height 300ms ease 0"
}
],
stepsB: []
},
{
type: "click",
selector: ".button-text",
descend: true,
stepsA: [
{ wait: "1200ms" },
{ display: "flex" },
{ opacity: 1, transition: "opacity 250ms ease 0" }
],
stepsB: []
},
{
type: "click",
selector: ".download-button-wrapper",
stepsA: [
{ wait: "1000ms" },
{ width: "140px", transition: "width 250ms ease 0" }
],
stepsB: []
}
]
}
}
]);
Also see: Tab Triggers