Skip to content

Commit f633a58

Browse files
author
Fred Heusschen
committed
added animation option
1 parent b5d881c commit f633a58

File tree

10 files changed

+155
-85
lines changed

10 files changed

+155
-85
lines changed

‎demo.css

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -13,6 +13,7 @@ body {
1313
line-height: 30px;
1414
color: #fff;
1515
}
16+
1617
h1 {
1718
margin: 0 0 100px;
1819
text-shadow: 8px 10px 1px rgba(0, 0, 0, 0.1);
@@ -39,6 +40,15 @@ pre {
3940
}
4041
}
4142

43+
select {
44+
display: block;
45+
width: 100%;
46+
padding: 15px;
47+
border: unset;
48+
border-radius: 5px;
49+
background: #ffffff99;
50+
}
51+
4252
a,
4353
a:hover {
4454
color: #fff;

‎dist/mburger/index.js

Lines changed: 32 additions & 29 deletions
Original file line numberDiff line numberDiff line change
@@ -13,39 +13,42 @@ const webcomponentName = 'mm-burger';
1313
const template = document.createElement('template');
1414
template.innerHTML = `
1515
<style>*,:host{box-sizing:border-box}
16-
: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}
16+
: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}
17+
:host([animation=elastic]){--mb-animation-function:cubic-bezier(.5,-0.35,.35,1.5);--mb-animation-duration:0.35s}
18+
:host([animation=funky]){--mb-animation-function:cubic-bezier(0,1.45,.5,1.45);--mb-animation-duration:0.4s}
19+
: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}
1720
[part=bars]{position:relative;display:block;width:var(--mb-bar-width);height:calc(var(--mb-bar-height) * 3 + var(--mb-bar-spacing) * 2)}
18-
.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}
19-
.bar--top{bottom:calc(50% + var(--mb-bar-spacing) + var(--mb-bar-height)/ 2);transition:bottom .2s ease,transform .2s ease,width .2s ease}
20-
.bar--middle{top:calc(50% - var(--mb-bar-height)/ 2);transition:opacity .2s ease}
21-
.bar--bottom{top:calc(50% + var(--mb-bar-spacing) + var(--mb-bar-height)/ 2);transition:top .2s ease,transform .2s ease,width .2s ease}
21+
.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)}
22+
.bar--top{bottom:calc(50% + var(--mb-bar-spacing) + var(--mb-bar-height)/ 2);transition-property:bottom,transform}
23+
.bar--middle{top:calc(50% - var(--mb-bar-height)/ 2);transition-property:opacity}
24+
.bar--bottom{top:calc(50% + var(--mb-bar-spacing) + var(--mb-bar-height)/ 2);transition-property:top,transform}
2225
.is-cross .bar--top{bottom:calc(50% - var(--mb-bar-height)/ 2);transform:rotate(45deg)}
2326
.is-cross .bar--middle{opacity:0}
2427
.is-cross .bar--bottom{top:calc(50% - var(--mb-bar-height)/ 2);transform:rotate(-45deg)}
25-
: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)}
26-
: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)}
27-
:host([fx=collapse]) .bar--bottom{transition:top .2s ease,transform .2s ease;transition-delay:var(--mb-animate-delay)}
28-
: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)}
29-
: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)}
30-
: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)}
31-
:host([fx=spin]) .bar--top{transition-delay:calc(var(--mb-animate-delay) + .2s),var(--mb-animate-delay)}
32-
:host([fx=spin]) .bar--middle{transition-duration:0s;transition-delay:calc(var(--mb-animate-delay) + .2s)}
33-
:host([fx=spin]) .bar--bottom{transition-delay:calc(var(--mb-animate-delay) + .2s),var(--mb-animate-delay)}
34-
:host([fx=spin]) .is-cross .bar--top{transform:rotate(135deg);transition-delay:var(--mb-animate-delay),calc(var(--mb-animate-delay) + .2s)}
35-
:host([fx=spin]) .is-cross .bar--middle{transition-delay:var(--mb-animate-delay)}
36-
:host([fx=spin]) .is-cross .bar--bottom{transform:rotate(225deg);transition-delay:var(--mb-animate-delay),calc(var(--mb-animate-delay) + .2s)}
37-
:host([fx=squeeze]) .bar--top{transition-delay:calc(var(--mb-animate-delay) + .1s),var(--mb-animate-delay)}
38-
:host([fx=squeeze]) .bar--middle{transition-delay:calc(var(--mb-animate-delay) + .1s)}
39-
:host([fx=squeeze]) .bar--bottom{transition-delay:calc(var(--mb-animate-delay) + .1s),var(--mb-animate-delay)}
40-
:host([fx=squeeze]) .is-cross .bar--top{transition-delay:var(--mb-animate-delay),calc(var(--mb-animate-delay) + .1s)}
41-
:host([fx=squeeze]) .is-cross .bar--middle{transition-delay:var(--mb-animate-delay)}
42-
:host([fx=squeeze]) .is-cross .bar--bottom{transition-delay:var(--mb-animate-delay),calc(var(--mb-animate-delay) + .1s)}
43-
:host([fx=tornado]) .bar--top{transition:bottom .2s ease,transform .2s ease;transition-delay:calc(var(--mb-animate-delay) + .2s)}
44-
: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)}
45-
:host([fx=tornado]) .bar--bottom{transition:top .2s ease,transform .2s ease;transition-delay:var(--mb-animate-delay)}
46-
:host([fx=tornado]) .is-cross .bar--top{transform:rotate(-135deg);transition-delay:var(--mb-animate-delay)}
47-
: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)}
48-
:host([fx=tornado]) .is-cross .bar--bottom{transform:rotate(-225deg);transition-delay:calc(var(--mb-animate-delay) + .2s)}</style>
28+
: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)}
29+
: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)}
30+
:host([fx=collapse]) .bar--bottom{transition-delay:var(--mb-animation-delay)}
31+
: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)}
32+
: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))}
33+
: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)}
34+
:host([fx=spin]) .bar--top{transition-delay:calc(var(--mb-animation-delay) + var(--mb-animation-duration)),var(--mb-animation-delay)}
35+
:host([fx=spin]) .bar--middle{transition-delay:calc(var(--mb-animation-delay) + var(--mb-animation-duration))}
36+
:host([fx=spin]) .bar--bottom{transition-delay:calc(var(--mb-animation-delay) + var(--mb-animation-duration)),var(--mb-animation-delay)}
37+
: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))}
38+
:host([fx=spin]) .is-cross .bar--middle{transition-duration:0s;transition-delay:calc(var(--mb-animation-delay) + var(--mb-animation-duration))}
39+
: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))}
40+
:host([fx=squeeze]) .bar--top{transition-delay:calc(var(--mb-animation-delay) + var(--mb-animation-duration) * .4),var(--mb-animation-delay)}
41+
:host([fx=squeeze]) .bar--middle{transition-delay:calc(var(--mb-animation-delay) + .1s)}
42+
:host([fx=squeeze]) .bar--bottom{transition-delay:calc(var(--mb-animation-delay) + var(--mb-animation-duration) * .4),var(--mb-animation-delay)}
43+
:host([fx=squeeze]) .is-cross .bar--top{transition-delay:var(--mb-animation-delay),calc(var(--mb-animation-delay) + var(--mb-animation-duration) * .4)}
44+
:host([fx=squeeze]) .is-cross .bar--middle{transition-delay:var(--mb-animation-delay)}
45+
:host([fx=squeeze]) .is-cross .bar--bottom{transition-delay:var(--mb-animation-delay),calc(var(--mb-animation-delay) + var(--mb-animation-duration) * .4)}
46+
:host([fx=tornado]) .bar--top{transition-delay:calc(var(--mb-animation-delay) + var(--mb-animation-duration) * .6)}
47+
:host([fx=tornado]) .bar--middle{transition-property:opacity,transform;transition-delay:calc(var(--mb-animation-delay) + var(--mb-animation-duration) * .3)}
48+
:host([fx=tornado]) .bar--bottom{transition-delay:var(--mb-animation-delay)}
49+
:host([fx=tornado]) .is-cross .bar--top{transform:rotate(-135deg);transition-delay:var(--mb-animation-delay)}
50+
:host([fx=tornado]) .is-cross .bar--middle{opacity:0;transform:rotate(-135deg);transition-delay:calc(var(--mb-animation-delay) + var(--mb-animation-duration) * .3)}
51+
:host([fx=tornado]) .is-cross .bar--bottom{transform:rotate(-225deg);transition-delay:calc(var(--mb-animation-delay) + var(--mb-animation-duration) * .6)}</style>
4952
<span part="bars">
5053
<span class="bar bar--top"></span>
5154
<span class="bar bar--middle"></span>

‎index.html

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -36,6 +36,15 @@ <h1>mburger</h1>
3636
blocked by CORS policy.
3737
</p>
3838

39+
<br />
40+
<p>Choose an animation for the examples:</p>
41+
<select id="animation">
42+
<option value="ease">Ease (default)</option>
43+
<option value="elastic">Elastic</option>
44+
<option value="funky">Funky</option>
45+
<option value="shaky">Shaky</option>
46+
</select>
47+
3948
<div class="xmpls">
4049
<div class="xmpl">
4150
<mm-burger
@@ -112,5 +121,15 @@ <h1>mburger</h1>
112121
}
113122
});
114123
</script>
124+
125+
<script>
126+
const burgers = document.querySelectorAll("mm-burger");
127+
const select = document.querySelector("#animation");
128+
select.addEventListener("change", () => {
129+
burgers.forEach((burger) => {
130+
burger.setAttribute("animation", select.value);
131+
});
132+
});
133+
</script>
115134
</body>
116135
</html>

‎package-lock.json

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "mburger-webcomponent",
3-
"version": "3.0.0",
3+
"version": "3.1.0",
44
"main": "dist/mburger/index.js",
55
"module": "dist/mburger/index.js",
66
"author": "Fred Heusschen <info@mmenujs.com>",

‎src/mburger/css/_fx.collapse.scss

Lines changed: 27 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -2,48 +2,57 @@
22
// Hamburger
33
.bar {
44
&--top {
5-
transition: bottom 0.2s ease, margin 0.2s ease, transform 0.2s ease;
6-
transition-delay: calc(var(--mb-animate-delay) + 0.2s),
7-
var(--mb-animate-delay), var(--mb-animate-delay);
5+
transition-property: bottom, margin, transform;
6+
transition-delay:
7+
calc(var(--mb-animation-delay) + var(--mb-animation-duration)),
8+
var(--mb-animation-delay),
9+
var(--mb-animation-delay);
810
}
911

1012
&--middle {
11-
transition: top 0.2s ease, opacity 0s ease;
12-
transition-delay: calc(var(--mb-animate-delay) + 0.3s),
13-
calc(var(--mb-animate-delay) + 0.3s);
13+
transition-property: top, opacity;
14+
transition-duration:
15+
var(--mb-animation-duration),
16+
0s;
17+
transition-delay:
18+
calc(var(--mb-animation-delay) + (var(--mb-animation-duration) * 1.3)),
19+
calc(var(--mb-animation-delay) + (var(--mb-animation-duration) * 1.3));
1420
}
1521

1622
&--bottom {
17-
transition: top 0.2s ease, transform 0.2s ease;
18-
transition-delay: var(--mb-animate-delay);
23+
transition-delay: var(--mb-animation-delay);
1924
}
2025
}
2126

2227
// Cross
2328
.is-cross .bar {
2429
&--top {
2530
bottom: calc(50% - var(--mb-bar-spacing) - var(--mb-bar-height));
26-
margin-bottom: calc(
27-
var(--mb-bar-spacing) + (var(--mb-bar-height) / 2)
28-
);
31+
margin-bottom: calc(var(--mb-bar-spacing) + (var(--mb-bar-height) / 2));
2932
transform: rotate(45deg);
30-
transition-delay: calc(var(--mb-animate-delay) + 0.1s),
31-
calc(var(--mb-animate-delay) + 0.3s),
32-
calc(var(--mb-animate-delay) + 0.3s);
33+
transition-delay:
34+
calc(var(--mb-animation-delay) + (var(--mb-animation-duration) * 0.3)),
35+
calc(var(--mb-animation-delay) + (var(--mb-animation-duration) * 1.3)),
36+
calc(var(--mb-animation-delay) + (var(--mb-animation-duration) * 1.3));
3337
}
3438

3539
&--middle {
3640
top: calc(50% + var(--mb-bar-spacing));
3741
opacity: 0;
38-
transition-delay: var(--mb-animate-delay),
39-
calc(var(--mb-animate-delay) + 0.2s);
42+
transition-duration:
43+
var(--mb-animation-duration),
44+
0s;
45+
transition-delay:
46+
var(--mb-animation-delay),
47+
calc(var(--mb-animation-delay) + var(--mb-animation-duration));
4048
}
4149

4250
&--bottom {
4351
top: calc(50% - (var(--mb-bar-height) / 2));
4452
transform: rotate(-45deg);
45-
transition-delay: calc(var(--mb-animate-delay) + 0.3s),
46-
calc(var(--mb-animate-delay) + 0.3s);
53+
transition-delay:
54+
calc(var(--mb-animation-delay) + (var(--mb-animation-duration) * 1.3)),
55+
calc(var(--mb-animation-delay) + (var(--mb-animation-duration) * 1.3));
4756
}
4857
}
4958
}

‎src/mburger/css/_fx.spin.scss

Lines changed: 16 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -2,37 +2,42 @@
22
// Hamburger
33
.bar {
44
&--top {
5-
transition-delay: calc(var(--mb-animate-delay) + 0.2s),
6-
var(--mb-animate-delay);
5+
transition-delay:
6+
calc(var(--mb-animation-delay) + var(--mb-animation-duration)),
7+
var(--mb-animation-delay);
78
}
89

910
&--middle {
10-
transition-duration: 0s;
11-
transition-delay: calc(var(--mb-animate-delay) + 0.2s);
11+
// transition-duration: 0s;
12+
transition-delay: calc(var(--mb-animation-delay) + var(--mb-animation-duration));
1213
}
1314

1415
&--bottom {
15-
transition-delay: calc(var(--mb-animate-delay) + 0.2s),
16-
var(--mb-animate-delay);
16+
transition-delay:
17+
calc(var(--mb-animation-delay) + var(--mb-animation-duration)),
18+
var(--mb-animation-delay);
1719
}
1820
}
1921

2022
// Cross
2123
.is-cross .bar {
2224
&--top {
2325
transform: rotate(135deg);
24-
transition-delay: var(--mb-animate-delay),
25-
calc(var(--mb-animate-delay) + 0.2s);
26+
transition-delay:
27+
var(--mb-animation-delay),
28+
calc(var(--mb-animation-delay) + var(--mb-animation-duration));
2629
}
2730

2831
&--middle {
29-
transition-delay: var(--mb-animate-delay);
32+
transition-duration: 0s;
33+
transition-delay: calc(var(--mb-animation-delay) + var(--mb-animation-duration));
3034
}
3135

3236
&--bottom {
3337
transform: rotate(225deg);
34-
transition-delay: var(--mb-animate-delay),
35-
calc(var(--mb-animate-delay) + 0.2s);
38+
transition-delay:
39+
var(--mb-animation-delay),
40+
calc(var(--mb-animation-delay) + var(--mb-animation-duration));
3641
}
3742
}
3843
}

‎src/mburger/css/_fx.squeeze.scss

Lines changed: 14 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -2,34 +2,38 @@
22
// Hamburger
33
.bar {
44
&--top {
5-
transition-delay: calc(var(--mb-animate-delay) + 0.1s),
6-
var(--mb-animate-delay);
5+
transition-delay:
6+
calc(var(--mb-animation-delay) + (var(--mb-animation-duration) * 0.4)),
7+
var(--mb-animation-delay);
78
}
89

910
&--middle {
10-
transition-delay: calc(var(--mb-animate-delay) + 0.1s);
11+
transition-delay: calc(var(--mb-animation-delay) + 0.1s);
1112
}
1213

1314
&--bottom {
14-
transition-delay: calc(var(--mb-animate-delay) + 0.1s),
15-
var(--mb-animate-delay);
15+
transition-delay:
16+
calc(var(--mb-animation-delay) + (var(--mb-animation-duration) * 0.4)),
17+
var(--mb-animation-delay);
1618
}
1719
}
1820

1921
// Cross
2022
.is-cross .bar {
2123
&--top {
22-
transition-delay: var(--mb-animate-delay),
23-
calc(var(--mb-animate-delay) + 0.1s);
24+
transition-delay:
25+
var(--mb-animation-delay),
26+
calc(var(--mb-animation-delay) + (var(--mb-animation-duration) * 0.4));
2427
}
2528

2629
&--middle {
27-
transition-delay: var(--mb-animate-delay);
30+
transition-delay: var(--mb-animation-delay);
2831
}
2932

3033
&--bottom {
31-
transition-delay: var(--mb-animate-delay),
32-
calc(var(--mb-animate-delay) + 0.1s);
34+
transition-delay:
35+
var(--mb-animation-delay),
36+
calc(var(--mb-animation-delay) + (var(--mb-animation-duration) * 0.4));
3337
}
3438
}
3539
}

‎src/mburger/css/_fx.tornado.scss

Lines changed: 7 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -2,39 +2,35 @@
22
// Hamburger
33
.bar {
44
&--top {
5-
transition: bottom 0.2s ease, transform 0.2s ease;
6-
transition-delay: calc(var(--mb-animate-delay) + 0.2s);
5+
transition-delay: calc(var(--mb-animation-delay) + (var(--mb-animation-duration) * 0.6));
76
}
87

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

1513
&--bottom {
16-
transition: top 0.2s ease, transform 0.2s ease;
17-
transition-delay: var(--mb-animate-delay);
14+
transition-delay: var(--mb-animation-delay);
1815
}
1916
}
2017

2118
// Cross
2219
.is-cross .bar {
2320
&--top {
2421
transform: rotate(-135deg);
25-
transition-delay: var(--mb-animate-delay);
22+
transition-delay: var(--mb-animation-delay);
2623
}
2724

2825
&--middle {
2926
opacity: 0;
3027
transform: rotate(-135deg);
31-
transition-delay: calc(var(--mb-animate-delay) + 0.4s),
32-
calc(var(--mb-animate-delay) + 0.1s);
28+
transition-delay: calc(var(--mb-animation-delay) + (var(--mb-animation-duration) * 0.3));
3329
}
3430

3531
&--bottom {
3632
transform: rotate(-225deg);
37-
transition-delay: calc(var(--mb-animate-delay) + 0.2s);
33+
transition-delay: calc(var(--mb-animation-delay) + (var(--mb-animation-duration) * 0.6));
3834
}
3935
}
4036
}

0 commit comments

Comments
 (0)