Skip to content

Commit adb2521

Browse files
OdisseussOdisseuss
committed
Finish 2d transitions
1 parent 73ef2c9 commit adb2521

30 files changed

+782
-7
lines changed

‎src/animations/BackPulse.ts

Whitespace-only changes.

‎src/animations/Buzz.ts

Whitespace-only changes.

‎src/animations/BuzzOut.ts

Whitespace-only changes.

‎src/animations/Hang.ts

Whitespace-only changes.

‎src/animations/WobbleBottom.ts

Whitespace-only changes.

‎src/animations/WobbleHorizontal.ts

Whitespace-only changes.

‎src/animations/WobbleSkew.ts

Whitespace-only changes.

‎src/animations/WobbleToBottomRight.ts

Whitespace-only changes.

‎src/animations/WobbleToTopRight.ts

Whitespace-only changes.

‎src/animations/WobbleTop.ts

Whitespace-only changes.

‎src/animations/WobbleVertical.ts

Whitespace-only changes.

‎src/animations/background/BackPulse.ts

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
import { keyframes, css } from "styled-components";
2+
3+
const hvrBackPulseKeyframes = keyframes`
4+
50% {
5+
background-color: rgba(32, 152, 209, 0.75);
6+
}
7+
`;
8+
9+
const hvrBackPulseAnimation = css`
10+
-webkit-animation: ${hvrBackPulseKeyframes} 1s 0.5s liniar infinite;
11+
animation: ${hvrBackPulseKeyframes} 0.3s 0s ease-out 1 forwards;
12+
`;
13+
export default hvrBackPulseAnimation;

‎src/animations/Bob.ts renamed to ‎src/animations/transitions_2d/Bob.ts

File renamed without changes.

‎src/animations/transitions_2d/Buzz.ts

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
import { keyframes, css } from "styled-components";
2+
3+
const hvrBuzzKeyframes = keyframes`
4+
50% {
5+
-webkit-transform: translateX(3px) rotate(2deg);
6+
transform: translateX(3px) rotate(2deg);
7+
}
8+
100% {
9+
-webkit-transform: translateX(-3px) rotate(-2deg);
10+
transform: translateX(-3px) rotate(-2deg);
11+
}
12+
`;
13+
const hvrBuzzAnimation = css`
14+
-webkit-animation: ${hvrBuzzKeyframes} 0.15s linear infinite;
15+
animation: ${hvrBuzzKeyframes} 0.15s linear infinite;
16+
`;
17+
export default hvrBuzzAnimation;

‎src/animations/transitions_2d/BuzzOut.ts

Lines changed: 49 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,49 @@
1+
import { keyframes, css } from "styled-components";
2+
3+
const hvrBuzzOutKeyframes = keyframes`
4+
10% {
5+
-webkit-transform: translateX(3px) rotate(2deg);
6+
transform: translateX(3px) rotate(2deg);
7+
}
8+
20% {
9+
-webkit-transform: translateX(-3px) rotate(-2deg);
10+
transform: translateX(-3px) rotate(-2deg);
11+
}
12+
30% {
13+
-webkit-transform: translateX(3px) rotate(2deg);
14+
transform: translateX(3px) rotate(2deg);
15+
}
16+
40% {
17+
-webkit-transform: translateX(-3px) rotate(-2deg);
18+
transform: translateX(-3px) rotate(-2deg);
19+
}
20+
50% {
21+
-webkit-transform: translateX(2px) rotate(1deg);
22+
transform: translateX(2px) rotate(1deg);
23+
}
24+
60% {
25+
-webkit-transform: translateX(-2px) rotate(-1deg);
26+
transform: translateX(-2px) rotate(-1deg);
27+
}
28+
70% {
29+
-webkit-transform: translateX(2px) rotate(1deg);
30+
transform: translateX(2px) rotate(1deg);
31+
}
32+
80% {
33+
-webkit-transform: translateX(-2px) rotate(-1deg);
34+
transform: translateX(-2px) rotate(-1deg);
35+
}
36+
90% {
37+
-webkit-transform: translateX(1px) rotate(0);
38+
transform: translateX(1px) rotate(0);
39+
}
40+
100% {
41+
-webkit-transform: translateX(-1px) rotate(0);
42+
transform: translateX(-1px) rotate(0);
43+
}
44+
`;
45+
const hvrBuzzOutAnimation = css`
46+
-webkit-animation: ${hvrBuzzOutKeyframes} 0.75s linear 1;
47+
animation: ${hvrBuzzOutKeyframes} 0.75s linear 1;
48+
`;
49+
export default hvrBuzzOutAnimation;

‎src/animations/transitions_2d/Hang.ts

Lines changed: 29 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,29 @@
1+
import { keyframes, css } from "styled-components";
2+
3+
const hvrHangKeyframes = keyframes`
4+
0% {
5+
-webkit-transform: translateY(8px);
6+
transform: translateY(8px);
7+
}
8+
50% {
9+
-webkit-transform: translateY(4px);
10+
transform: translateY(4px);
11+
}
12+
100% {
13+
-webkit-transform: translateY(8px);
14+
transform: translateY(8px);
15+
}
16+
`;
17+
const hvrHangSinkKeyframes = keyframes`
18+
100% {
19+
-webkit-transform: translateY(8px);
20+
transform: translateY(8px);
21+
}
22+
`;
23+
const hvrHangAnimation = css`
24+
-webkit-animation: ${hvrHangSinkKeyframes} 0.3s 0s ease-out 1 forwards normal,
25+
${hvrHangKeyframes} 1.5s 0.3s ease-in-out infinite forwards alternate;
26+
animation: ${hvrHangSinkKeyframes} 0.3s 0s ease-out 1 forwards normal,
27+
${hvrHangKeyframes} 1.5s 0.3s ease-in-out infinite forwards alternate;
28+
`;
29+
export default hvrHangAnimation;

‎src/animations/Pop.ts renamed to ‎src/animations/transitions_2d/Pop.ts

File renamed without changes.

‎src/animations/Pulse.ts renamed to ‎src/animations/transitions_2d/Pulse.ts

File renamed without changes.

‎src/animations/PulseGrow.ts renamed to ‎src/animations/transitions_2d/PulseGrow.ts

File renamed without changes.

‎src/animations/PulseShrink.ts renamed to ‎src/animations/transitions_2d/PulseShrink.ts

File renamed without changes.

‎src/animations/Push.ts renamed to ‎src/animations/transitions_2d/Push.ts

File renamed without changes.

‎src/animations/transitions_2d/WobbleBottom.ts

Lines changed: 33 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,33 @@
1+
import { keyframes, css } from "styled-components";
2+
3+
const hvrWobbleBottomKeyframes = keyframes`
4+
16.65% {
5+
-webkit-transform: skew(-12deg);
6+
transform: skew(-12deg);
7+
}
8+
33.3% {
9+
-webkit-transform: skew(10deg);
10+
transform: skew(10deg);
11+
}
12+
49.95% {
13+
-webkit-transform: skew(-6deg);
14+
transform: skew(-6deg);
15+
}
16+
66.6% {
17+
-webkit-transform: skew(4deg);
18+
transform: skew(4deg);
19+
}
20+
83.25% {
21+
-webkit-transform: skew(-2deg);
22+
transform: skew(-2deg);
23+
}
24+
100% {
25+
-webkit-transform: skew(0);
26+
transform: skew(0);
27+
}
28+
`;
29+
const hvrWobbleBottomAnimation = css`
30+
-webkit-animation: ${hvrWobbleBottomKeyframes} 1s ease-in-out 1;
31+
animation: ${hvrWobbleBottomKeyframes} 1s ease-in-out 1;
32+
`;
33+
export default hvrWobbleBottomAnimation;

‎src/animations/transitions_2d/WobbleHorizontal.ts

Lines changed: 33 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,33 @@
1+
import { keyframes, css } from "styled-components";
2+
3+
const hvrWobbleHorizontalKeyframes = keyframes`
4+
16.65% {
5+
-webkit-transform: translateX(8px);
6+
transform: translateX(8px);
7+
}
8+
33.3% {
9+
-webkit-transform: translateX(-6px);
10+
transform: translateX(-6px);
11+
}
12+
49.95% {
13+
-webkit-transform: translateX(4px);
14+
transform: translateX(4px);
15+
}
16+
66.6% {
17+
-webkit-transform: translateX(-2px);
18+
transform: translateX(-2px);
19+
}
20+
83.25% {
21+
-webkit-transform: translateX(1px);
22+
transform: translateX(1px);
23+
}
24+
100% {
25+
-webkit-transform: translateX(0);
26+
transform: translateX(0);
27+
}
28+
`;
29+
const hvrWobbleHorizontalAnimation = css`
30+
-webkit-animation: ${hvrWobbleHorizontalKeyframes} 1s ease-in-out 1;
31+
animation: ${hvrWobbleHorizontalKeyframes} 1s ease-in-out 1;
32+
`;
33+
export default hvrWobbleHorizontalAnimation;

‎src/animations/transitions_2d/WobbleSkew.ts

Lines changed: 33 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,33 @@
1+
import { keyframes, css } from "styled-components";
2+
3+
const hvrWobbleSkewKeyframes = keyframes`
4+
16.65% {
5+
-webkit-transform: skew(-12deg);
6+
transform: skew(-12deg);
7+
}
8+
33.3% {
9+
-webkit-transform: skew(10deg);
10+
transform: skew(10deg);
11+
}
12+
49.95% {
13+
-webkit-transform: skew(-6deg);
14+
transform: skew(-6deg);
15+
}
16+
66.6% {
17+
-webkit-transform: skew(4deg);
18+
transform: skew(4deg);
19+
}
20+
83.25% {
21+
-webkit-transform: skew(-2deg);
22+
transform: skew(-2deg);
23+
}
24+
100% {
25+
-webkit-transform: skew(0);
26+
transform: skew(0);
27+
}
28+
`;
29+
const hvrWobbleSkewAnimation = css`
30+
-webkit-animation: ${hvrWobbleSkewKeyframes} 1s ease-in-out 1;
31+
animation: ${hvrWobbleSkewKeyframes} 1s ease-in-out 1;
32+
`;
33+
export default hvrWobbleSkewAnimation;

‎src/animations/transitions_2d/WobbleToBottomRight.ts

Lines changed: 33 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,33 @@
1+
import { keyframes, css } from "styled-components";
2+
3+
const hvrWobbleToBottomRightKeyframes = keyframes`
4+
16.65% {
5+
-webkit-transform: translate(8px, 8px);
6+
transform: translate(8px, 8px);
7+
}
8+
33.3% {
9+
-webkit-transform: translate(-6px, -6px);
10+
transform: translate(-6px, -6px);
11+
}
12+
49.95% {
13+
-webkit-transform: translate(4px, 4px);
14+
transform: translate(4px, 4px);
15+
}
16+
66.6% {
17+
-webkit-transform: translate(-2px, -2px);
18+
transform: translate(-2px, -2px);
19+
}
20+
83.25% {
21+
-webkit-transform: translate(1px, 1px);
22+
transform: translate(1px, 1px);
23+
}
24+
100% {
25+
-webkit-transform: translate(0, 0);
26+
transform: translate(0, 0);
27+
}
28+
`;
29+
const hvrWobbleToBottomRightAnimation = css`
30+
-webkit-animation: ${hvrWobbleToBottomRightKeyframes} 1s ease-in-out 1;
31+
animation: ${hvrWobbleToBottomRightKeyframes} 1s ease-in-out 1;
32+
`;
33+
export default hvrWobbleToBottomRightAnimation;

‎src/animations/transitions_2d/WobbleToTopRight.ts

Lines changed: 33 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,33 @@
1+
import { keyframes, css } from "styled-components";
2+
3+
const hvrWobbleToTopRightKeyframes = keyframes`
4+
16.65% {
5+
-webkit-transform: translate(8px, -8px);
6+
transform: translate(8px, -8px);
7+
}
8+
33.3% {
9+
-webkit-transform: translate(-6px, 6px);
10+
transform: translate(-6px, 6px);
11+
}
12+
49.95% {
13+
-webkit-transform: translate(4px, -4px);
14+
transform: translate(4px, -4px);
15+
}
16+
66.6% {
17+
-webkit-transform: translate(-2px, 2px);
18+
transform: translate(-2px, 2px);
19+
}
20+
83.25% {
21+
-webkit-transform: translate(1px, -1px);
22+
transform: translate(1px, -1px);
23+
}
24+
100% {
25+
-webkit-transform: translate(0, 0);
26+
transform: translate(0, 0);
27+
}
28+
`;
29+
const hvrWobbleToTopRightAnimation = css`
30+
-webkit-animation: ${hvrWobbleToTopRightKeyframes} 1s ease-in-out 1;
31+
animation: ${hvrWobbleToTopRightKeyframes} 1s ease-in-out 1;
32+
`;
33+
export default hvrWobbleToTopRightAnimation;

‎src/animations/transitions_2d/WobbleTop.ts

Lines changed: 33 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,33 @@
1+
import { keyframes, css } from "styled-components";
2+
3+
const hvrWobbleTopKeyframes = keyframes`
4+
16.65% {
5+
-webkit-transform: skew(-12deg);
6+
transform: skew(-12deg);
7+
}
8+
33.3% {
9+
-webkit-transform: skew(10deg);
10+
transform: skew(10deg);
11+
}
12+
49.95% {
13+
-webkit-transform: skew(-6deg);
14+
transform: skew(-6deg);
15+
}
16+
66.6% {
17+
-webkit-transform: skew(4deg);
18+
transform: skew(4deg);
19+
}
20+
83.25% {
21+
-webkit-transform: skew(-2deg);
22+
transform: skew(-2deg);
23+
}
24+
100% {
25+
-webkit-transform: skew(0);
26+
transform: skew(0);
27+
}
28+
`;
29+
const hvrWobbleTopAnimation = css`
30+
-webkit-animation: ${hvrWobbleTopKeyframes} 1s ease-in-out 1;
31+
animation: ${hvrWobbleTopKeyframes} 1s ease-in-out 1;
32+
`;
33+
export default hvrWobbleTopAnimation;

‎src/animations/transitions_2d/WobbleVertical.ts

Lines changed: 33 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,33 @@
1+
import { keyframes, css } from "styled-components";
2+
3+
const hvrWobbleVerticalKeyframes = keyframes`
4+
16.65% {
5+
-webkit-transform: translateY(8px);
6+
transform: translateY(8px);
7+
}
8+
33.3% {
9+
-webkit-transform: translateY(-6px);
10+
transform: translateY(-6px);
11+
}
12+
49.95% {
13+
-webkit-transform: translateY(4px);
14+
transform: translateY(4px);
15+
}
16+
66.6% {
17+
-webkit-transform: translateY(-2px);
18+
transform: translateY(-2px);
19+
}
20+
83.25% {
21+
-webkit-transform: translateY(1px);
22+
transform: translateY(1px);
23+
}
24+
100% {
25+
-webkit-transform: translateY(0);
26+
transform: translateY(0);
27+
}
28+
`;
29+
const hvrWobbleVerticalAnimation = css`
30+
-webkit-animation: ${hvrWobbleVerticalKeyframes} 1s ease-in-out 1;
31+
animation: ${hvrWobbleVerticalKeyframes} 1s ease-in-out 1;
32+
`;
33+
export default hvrWobbleVerticalAnimation;

0 commit comments

Comments
 (0)