Skip to content

Commit

Permalink
added animation option
Browse files Browse the repository at this point in the history
  • Loading branch information
Fred Heusschen committed Apr 7, 2022
1 parent b5d881c commit f633a58
Show file tree
Hide file tree
Showing 10 changed files with 155 additions and 85 deletions.
10 changes: 10 additions & 0 deletions demo.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,6 +13,7 @@ body {
line-height: 30px;
color: #fff;
}

h1 {
margin: 0 0 100px;
text-shadow: 8px 10px 1px rgba(0, 0, 0, 0.1);
Expand All @@ -39,6 +40,15 @@ pre {
}
}

select {
display: block;
width: 100%;
padding: 15px;
border: unset;
border-radius: 5px;
background: #ffffff99;
}

a,
a:hover {
color: #fff;
Expand Down
61 changes: 32 additions & 29 deletions dist/mburger/index.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,39 +13,42 @@ const webcomponentName = 'mm-burger';
const template = document.createElement('template');
template.innerHTML = `
<style>*,:host{box-sizing:border-box}
:host{--mb-bar-width:30px;--mb-bar-height:3px;--mb-bar-spacing:7px;--mb-animate-delay:0s;display:inline-flex;align-items:center;gap:.75em;padding:0;margin:0;font-size:inherit;color:inherit;border:unset;background:0 0;cursor:pointer}
:host{--mb-bar-width:30px;--mb-bar-height:3px;--mb-bar-spacing:7px;--mb-animation-function:ease;--mb-animation-duration:0.25s;--mb-animation-delay:0s;display:inline-flex;align-items:center;gap:.75em;padding:0;margin:0;font-size:inherit;color:inherit;border:unset;background:0 0;cursor:pointer}
:host([animation=elastic]){--mb-animation-function:cubic-bezier(.5,-0.35,.35,1.5);--mb-animation-duration:0.35s}
:host([animation=funky]){--mb-animation-function:cubic-bezier(0,1.45,.5,1.45);--mb-animation-duration:0.4s}
:host([animation=shaky]){--mb-animation-function:cubic-bezier(.15,.33,1,-0.81);--mb-animation-function:cubic-bezier(0,.5,1,-1);--mb-animation-duration:0.45s}
[part=bars]{position:relative;display:block;width:var(--mb-bar-width);height:calc(var(--mb-bar-height) * 3 + var(--mb-bar-spacing) * 2)}
.bar{display:block;position:absolute;left:0;right:0;height:var(--mb-bar-height);border-radius:calc(var(--mb-bar-height)/ 2);background:currentColor;color:inherit;opacity:1}
.bar--top{bottom:calc(50% + var(--mb-bar-spacing) + var(--mb-bar-height)/ 2);transition:bottom .2s ease,transform .2s ease,width .2s ease}
.bar--middle{top:calc(50% - var(--mb-bar-height)/ 2);transition:opacity .2s ease}
.bar--bottom{top:calc(50% + var(--mb-bar-spacing) + var(--mb-bar-height)/ 2);transition:top .2s ease,transform .2s ease,width .2s ease}
.bar{display:block;position:absolute;left:0;right:0;height:var(--mb-bar-height);border-radius:calc(var(--mb-bar-height)/ 2);background:currentColor;color:inherit;opacity:1;transition:none var(--mb-animation-duration) var(--mb-animation-function) var(--mb-animation-delay)}
.bar--top{bottom:calc(50% + var(--mb-bar-spacing) + var(--mb-bar-height)/ 2);transition-property:bottom,transform}
.bar--middle{top:calc(50% - var(--mb-bar-height)/ 2);transition-property:opacity}
.bar--bottom{top:calc(50% + var(--mb-bar-spacing) + var(--mb-bar-height)/ 2);transition-property:top,transform}
.is-cross .bar--top{bottom:calc(50% - var(--mb-bar-height)/ 2);transform:rotate(45deg)}
.is-cross .bar--middle{opacity:0}
.is-cross .bar--bottom{top:calc(50% - var(--mb-bar-height)/ 2);transform:rotate(-45deg)}
:host([fx=collapse]) .bar--top{transition:bottom .2s ease,margin .2s ease,transform .2s ease;transition-delay:calc(var(--mb-animate-delay) + .2s),var(--mb-animate-delay),var(--mb-animate-delay)}
:host([fx=collapse]) .bar--middle{transition:top .2s ease,opacity 0s ease;transition-delay:calc(var(--mb-animate-delay) + .3s),calc(var(--mb-animate-delay) + .3s)}
:host([fx=collapse]) .bar--bottom{transition:top .2s ease,transform .2s ease;transition-delay:var(--mb-animate-delay)}
:host([fx=collapse]) .is-cross .bar--top{bottom:calc(50% - var(--mb-bar-spacing) - var(--mb-bar-height));margin-bottom:calc(var(--mb-bar-spacing) + var(--mb-bar-height)/ 2);transform:rotate(45deg);transition-delay:calc(var(--mb-animate-delay) + .1s),calc(var(--mb-animate-delay) + .3s),calc(var(--mb-animate-delay) + .3s)}
:host([fx=collapse]) .is-cross .bar--middle{top:calc(50% + var(--mb-bar-spacing));opacity:0;transition-delay:var(--mb-animate-delay),calc(var(--mb-animate-delay) + .2s)}
:host([fx=collapse]) .is-cross .bar--bottom{top:calc(50% - var(--mb-bar-height)/ 2);transform:rotate(-45deg);transition-delay:calc(var(--mb-animate-delay) + .3s),calc(var(--mb-animate-delay) + .3s)}
:host([fx=spin]) .bar--top{transition-delay:calc(var(--mb-animate-delay) + .2s),var(--mb-animate-delay)}
:host([fx=spin]) .bar--middle{transition-duration:0s;transition-delay:calc(var(--mb-animate-delay) + .2s)}
:host([fx=spin]) .bar--bottom{transition-delay:calc(var(--mb-animate-delay) + .2s),var(--mb-animate-delay)}
:host([fx=spin]) .is-cross .bar--top{transform:rotate(135deg);transition-delay:var(--mb-animate-delay),calc(var(--mb-animate-delay) + .2s)}
:host([fx=spin]) .is-cross .bar--middle{transition-delay:var(--mb-animate-delay)}
:host([fx=spin]) .is-cross .bar--bottom{transform:rotate(225deg);transition-delay:var(--mb-animate-delay),calc(var(--mb-animate-delay) + .2s)}
:host([fx=squeeze]) .bar--top{transition-delay:calc(var(--mb-animate-delay) + .1s),var(--mb-animate-delay)}
:host([fx=squeeze]) .bar--middle{transition-delay:calc(var(--mb-animate-delay) + .1s)}
:host([fx=squeeze]) .bar--bottom{transition-delay:calc(var(--mb-animate-delay) + .1s),var(--mb-animate-delay)}
:host([fx=squeeze]) .is-cross .bar--top{transition-delay:var(--mb-animate-delay),calc(var(--mb-animate-delay) + .1s)}
:host([fx=squeeze]) .is-cross .bar--middle{transition-delay:var(--mb-animate-delay)}
:host([fx=squeeze]) .is-cross .bar--bottom{transition-delay:var(--mb-animate-delay),calc(var(--mb-animate-delay) + .1s)}
:host([fx=tornado]) .bar--top{transition:bottom .2s ease,transform .2s ease;transition-delay:calc(var(--mb-animate-delay) + .2s)}
:host([fx=tornado]) .bar--middle{transition:opacity 0s ease,transform .2s ease;transition-delay:calc(var(--mb-animate-delay) + .1s),calc(var(--mb-animate-delay) + .1s)}
:host([fx=tornado]) .bar--bottom{transition:top .2s ease,transform .2s ease;transition-delay:var(--mb-animate-delay)}
:host([fx=tornado]) .is-cross .bar--top{transform:rotate(-135deg);transition-delay:var(--mb-animate-delay)}
:host([fx=tornado]) .is-cross .bar--middle{opacity:0;transform:rotate(-135deg);transition-delay:calc(var(--mb-animate-delay) + .4s),calc(var(--mb-animate-delay) + .1s)}
:host([fx=tornado]) .is-cross .bar--bottom{transform:rotate(-225deg);transition-delay:calc(var(--mb-animate-delay) + .2s)}</style>
:host([fx=collapse]) .bar--top{transition-property:bottom,margin,transform;transition-delay:calc(var(--mb-animation-delay) + var(--mb-animation-duration)),var(--mb-animation-delay),var(--mb-animation-delay)}
:host([fx=collapse]) .bar--middle{transition-property:top,opacity;transition-duration:var(--mb-animation-duration),0s;transition-delay:calc(var(--mb-animation-delay) + var(--mb-animation-duration) * 1.3),calc(var(--mb-animation-delay) + var(--mb-animation-duration) * 1.3)}
:host([fx=collapse]) .bar--bottom{transition-delay:var(--mb-animation-delay)}
:host([fx=collapse]) .is-cross .bar--top{bottom:calc(50% - var(--mb-bar-spacing) - var(--mb-bar-height));margin-bottom:calc(var(--mb-bar-spacing) + var(--mb-bar-height)/ 2);transform:rotate(45deg);transition-delay:calc(var(--mb-animation-delay) + var(--mb-animation-duration) * .3),calc(var(--mb-animation-delay) + var(--mb-animation-duration) * 1.3),calc(var(--mb-animation-delay) + var(--mb-animation-duration) * 1.3)}
:host([fx=collapse]) .is-cross .bar--middle{top:calc(50% + var(--mb-bar-spacing));opacity:0;transition-duration:var(--mb-animation-duration),0s;transition-delay:var(--mb-animation-delay),calc(var(--mb-animation-delay) + var(--mb-animation-duration))}
:host([fx=collapse]) .is-cross .bar--bottom{top:calc(50% - var(--mb-bar-height)/ 2);transform:rotate(-45deg);transition-delay:calc(var(--mb-animation-delay) + var(--mb-animation-duration) * 1.3),calc(var(--mb-animation-delay) + var(--mb-animation-duration) * 1.3)}
:host([fx=spin]) .bar--top{transition-delay:calc(var(--mb-animation-delay) + var(--mb-animation-duration)),var(--mb-animation-delay)}
:host([fx=spin]) .bar--middle{transition-delay:calc(var(--mb-animation-delay) + var(--mb-animation-duration))}
:host([fx=spin]) .bar--bottom{transition-delay:calc(var(--mb-animation-delay) + var(--mb-animation-duration)),var(--mb-animation-delay)}
:host([fx=spin]) .is-cross .bar--top{transform:rotate(135deg);transition-delay:var(--mb-animation-delay),calc(var(--mb-animation-delay) + var(--mb-animation-duration))}
:host([fx=spin]) .is-cross .bar--middle{transition-duration:0s;transition-delay:calc(var(--mb-animation-delay) + var(--mb-animation-duration))}
:host([fx=spin]) .is-cross .bar--bottom{transform:rotate(225deg);transition-delay:var(--mb-animation-delay),calc(var(--mb-animation-delay) + var(--mb-animation-duration))}
:host([fx=squeeze]) .bar--top{transition-delay:calc(var(--mb-animation-delay) + var(--mb-animation-duration) * .4),var(--mb-animation-delay)}
:host([fx=squeeze]) .bar--middle{transition-delay:calc(var(--mb-animation-delay) + .1s)}
:host([fx=squeeze]) .bar--bottom{transition-delay:calc(var(--mb-animation-delay) + var(--mb-animation-duration) * .4),var(--mb-animation-delay)}
:host([fx=squeeze]) .is-cross .bar--top{transition-delay:var(--mb-animation-delay),calc(var(--mb-animation-delay) + var(--mb-animation-duration) * .4)}
:host([fx=squeeze]) .is-cross .bar--middle{transition-delay:var(--mb-animation-delay)}
:host([fx=squeeze]) .is-cross .bar--bottom{transition-delay:var(--mb-animation-delay),calc(var(--mb-animation-delay) + var(--mb-animation-duration) * .4)}
:host([fx=tornado]) .bar--top{transition-delay:calc(var(--mb-animation-delay) + var(--mb-animation-duration) * .6)}
:host([fx=tornado]) .bar--middle{transition-property:opacity,transform;transition-delay:calc(var(--mb-animation-delay) + var(--mb-animation-duration) * .3)}
:host([fx=tornado]) .bar--bottom{transition-delay:var(--mb-animation-delay)}
:host([fx=tornado]) .is-cross .bar--top{transform:rotate(-135deg);transition-delay:var(--mb-animation-delay)}
:host([fx=tornado]) .is-cross .bar--middle{opacity:0;transform:rotate(-135deg);transition-delay:calc(var(--mb-animation-delay) + var(--mb-animation-duration) * .3)}
:host([fx=tornado]) .is-cross .bar--bottom{transform:rotate(-225deg);transition-delay:calc(var(--mb-animation-delay) + var(--mb-animation-duration) * .6)}</style>
<span part="bars">
<span class="bar bar--top"></span>
<span class="bar bar--middle"></span>
Expand Down
19 changes: 19 additions & 0 deletions index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -36,6 +36,15 @@ <h1>mburger</h1>
blocked by CORS policy.
</p>

<br />
<p>Choose an animation for the examples:</p>
<select id="animation">
<option value="ease">Ease (default)</option>
<option value="elastic">Elastic</option>
<option value="funky">Funky</option>
<option value="shaky">Shaky</option>
</select>

<div class="xmpls">
<div class="xmpl">
<mm-burger
Expand Down Expand Up @@ -112,5 +121,15 @@ <h1>mburger</h1>
}
});
</script>

<script>
const burgers = document.querySelectorAll("mm-burger");
const select = document.querySelector("#animation");
select.addEventListener("change", () => {
burgers.forEach((burger) => {
burger.setAttribute("animation", select.value);
});
});
</script>
</body>
</html>
2 changes: 1 addition & 1 deletion package-lock.json
View file

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

2 changes: 1 addition & 1 deletion package.json
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
{
"name": "mburger-webcomponent",
"version": "3.0.0",
"version": "3.1.0",
"main": "dist/mburger/index.js",
"module": "dist/mburger/index.js",
"author": "Fred Heusschen <info@mmenujs.com>",
Expand Down
45 changes: 27 additions & 18 deletions src/mburger/css/_fx.collapse.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,48 +2,57 @@
// Hamburger
.bar {
&--top {
transition: bottom 0.2s ease, margin 0.2s ease, transform 0.2s ease;
transition-delay: calc(var(--mb-animate-delay) + 0.2s),
var(--mb-animate-delay), var(--mb-animate-delay);
transition-property: bottom, margin, transform;
transition-delay:
calc(var(--mb-animation-delay) + var(--mb-animation-duration)),
var(--mb-animation-delay),
var(--mb-animation-delay);
}

&--middle {
transition: top 0.2s ease, opacity 0s ease;
transition-delay: calc(var(--mb-animate-delay) + 0.3s),
calc(var(--mb-animate-delay) + 0.3s);
transition-property: top, opacity;
transition-duration:
var(--mb-animation-duration),
0s;
transition-delay:
calc(var(--mb-animation-delay) + (var(--mb-animation-duration) * 1.3)),
calc(var(--mb-animation-delay) + (var(--mb-animation-duration) * 1.3));
}

&--bottom {
transition: top 0.2s ease, transform 0.2s ease;
transition-delay: var(--mb-animate-delay);
transition-delay: var(--mb-animation-delay);
}
}

// Cross
.is-cross .bar {
&--top {
bottom: calc(50% - var(--mb-bar-spacing) - var(--mb-bar-height));
margin-bottom: calc(
var(--mb-bar-spacing) + (var(--mb-bar-height) / 2)
);
margin-bottom: calc(var(--mb-bar-spacing) + (var(--mb-bar-height) / 2));
transform: rotate(45deg);
transition-delay: calc(var(--mb-animate-delay) + 0.1s),
calc(var(--mb-animate-delay) + 0.3s),
calc(var(--mb-animate-delay) + 0.3s);
transition-delay:
calc(var(--mb-animation-delay) + (var(--mb-animation-duration) * 0.3)),
calc(var(--mb-animation-delay) + (var(--mb-animation-duration) * 1.3)),
calc(var(--mb-animation-delay) + (var(--mb-animation-duration) * 1.3));
}

&--middle {
top: calc(50% + var(--mb-bar-spacing));
opacity: 0;
transition-delay: var(--mb-animate-delay),
calc(var(--mb-animate-delay) + 0.2s);
transition-duration:
var(--mb-animation-duration),
0s;
transition-delay:
var(--mb-animation-delay),
calc(var(--mb-animation-delay) + var(--mb-animation-duration));
}

&--bottom {
top: calc(50% - (var(--mb-bar-height) / 2));
transform: rotate(-45deg);
transition-delay: calc(var(--mb-animate-delay) + 0.3s),
calc(var(--mb-animate-delay) + 0.3s);
transition-delay:
calc(var(--mb-animation-delay) + (var(--mb-animation-duration) * 1.3)),
calc(var(--mb-animation-delay) + (var(--mb-animation-duration) * 1.3));
}
}
}
27 changes: 16 additions & 11 deletions src/mburger/css/_fx.spin.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,37 +2,42 @@
// Hamburger
.bar {
&--top {
transition-delay: calc(var(--mb-animate-delay) + 0.2s),
var(--mb-animate-delay);
transition-delay:
calc(var(--mb-animation-delay) + var(--mb-animation-duration)),
var(--mb-animation-delay);
}

&--middle {
transition-duration: 0s;
transition-delay: calc(var(--mb-animate-delay) + 0.2s);
// transition-duration: 0s;
transition-delay: calc(var(--mb-animation-delay) + var(--mb-animation-duration));
}

&--bottom {
transition-delay: calc(var(--mb-animate-delay) + 0.2s),
var(--mb-animate-delay);
transition-delay:
calc(var(--mb-animation-delay) + var(--mb-animation-duration)),
var(--mb-animation-delay);
}
}

// Cross
.is-cross .bar {
&--top {
transform: rotate(135deg);
transition-delay: var(--mb-animate-delay),
calc(var(--mb-animate-delay) + 0.2s);
transition-delay:
var(--mb-animation-delay),
calc(var(--mb-animation-delay) + var(--mb-animation-duration));
}

&--middle {
transition-delay: var(--mb-animate-delay);
transition-duration: 0s;
transition-delay: calc(var(--mb-animation-delay) + var(--mb-animation-duration));
}

&--bottom {
transform: rotate(225deg);
transition-delay: var(--mb-animate-delay),
calc(var(--mb-animate-delay) + 0.2s);
transition-delay:
var(--mb-animation-delay),
calc(var(--mb-animation-delay) + var(--mb-animation-duration));
}
}
}
24 changes: 14 additions & 10 deletions src/mburger/css/_fx.squeeze.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,34 +2,38 @@
// Hamburger
.bar {
&--top {
transition-delay: calc(var(--mb-animate-delay) + 0.1s),
var(--mb-animate-delay);
transition-delay:
calc(var(--mb-animation-delay) + (var(--mb-animation-duration) * 0.4)),
var(--mb-animation-delay);
}

&--middle {
transition-delay: calc(var(--mb-animate-delay) + 0.1s);
transition-delay: calc(var(--mb-animation-delay) + 0.1s);
}

&--bottom {
transition-delay: calc(var(--mb-animate-delay) + 0.1s),
var(--mb-animate-delay);
transition-delay:
calc(var(--mb-animation-delay) + (var(--mb-animation-duration) * 0.4)),
var(--mb-animation-delay);
}
}

// Cross
.is-cross .bar {
&--top {
transition-delay: var(--mb-animate-delay),
calc(var(--mb-animate-delay) + 0.1s);
transition-delay:
var(--mb-animation-delay),
calc(var(--mb-animation-delay) + (var(--mb-animation-duration) * 0.4));
}

&--middle {
transition-delay: var(--mb-animate-delay);
transition-delay: var(--mb-animation-delay);
}

&--bottom {
transition-delay: var(--mb-animate-delay),
calc(var(--mb-animate-delay) + 0.1s);
transition-delay:
var(--mb-animation-delay),
calc(var(--mb-animation-delay) + (var(--mb-animation-duration) * 0.4));
}
}
}
18 changes: 7 additions & 11 deletions src/mburger/css/_fx.tornado.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,39 +2,35 @@
// Hamburger
.bar {
&--top {
transition: bottom 0.2s ease, transform 0.2s ease;
transition-delay: calc(var(--mb-animate-delay) + 0.2s);
transition-delay: calc(var(--mb-animation-delay) + (var(--mb-animation-duration) * 0.6));
}

&--middle {
transition: opacity 0s ease, transform 0.2s ease;
transition-delay: calc(var(--mb-animate-delay) + 0.1s),
calc(var(--mb-animate-delay) + 0.1s);
transition-property: opacity, transform;
transition-delay: calc(var(--mb-animation-delay) + (var(--mb-animation-duration) * 0.3));
}

&--bottom {
transition: top 0.2s ease, transform 0.2s ease;
transition-delay: var(--mb-animate-delay);
transition-delay: var(--mb-animation-delay);
}
}

// Cross
.is-cross .bar {
&--top {
transform: rotate(-135deg);
transition-delay: var(--mb-animate-delay);
transition-delay: var(--mb-animation-delay);
}

&--middle {
opacity: 0;
transform: rotate(-135deg);
transition-delay: calc(var(--mb-animate-delay) + 0.4s),
calc(var(--mb-animate-delay) + 0.1s);
transition-delay: calc(var(--mb-animation-delay) + (var(--mb-animation-duration) * 0.3));
}

&--bottom {
transform: rotate(-225deg);
transition-delay: calc(var(--mb-animate-delay) + 0.2s);
transition-delay: calc(var(--mb-animation-delay) + (var(--mb-animation-duration) * 0.6));
}
}
}
Loading

0 comments on commit f633a58

Please sign in to comment.