Skip to content

Commit

Permalink
Add new front page animation
Browse files Browse the repository at this point in the history
  • Loading branch information
ajuvonen committed Sep 19, 2024
1 parent 0bac627 commit 1055055
Show file tree
Hide file tree
Showing 4 changed files with 116 additions and 100 deletions.
164 changes: 102 additions & 62 deletions src/components/FrontPageAnimation.vue
Original file line number Diff line number Diff line change
@@ -1,88 +1,128 @@
<script lang="ts" setup></script>
<script lang="ts" setup>
import {getRandomEmojis} from '@/utils/helpers';
const emojis = getRandomEmojis(4);
</script>
<template>
<div class="chart-background justify-center">
<div class="front-page-animation__container" aria-hidden="true">
<div class="front-page-animation">
<div class="front-page-animation__content">
<div class="flex">
<IconComponent class="front-page-animation__icon" icon="watermelon" size="9rem" />
<IconComponent
class="front-page-animation__icon"
style="animation-delay: -750ms"
icon="carrot"
size="9rem"
/>
<IconComponent
class="front-page-animation__icon"
style="animation-delay: -500ms"
icon="pear"
size="9rem"
/>
<IconComponent
class="front-page-animation__icon"
style="animation-delay: -250ms"
icon="apple"
size="9rem"
/>
</div>
<div class="flex">
<IconComponent class="front-page-animation__icon" icon="watermelon" size="9rem" />
<IconComponent
class="front-page-animation__icon"
style="animation-delay: -750ms"
icon="carrot"
size="9rem"
/>
<IconComponent
class="front-page-animation__icon"
style="animation-delay: -500ms"
icon="pear"
size="9rem"
/>
<IconComponent
class="front-page-animation__icon"
style="animation-delay: -250ms"
icon="apple"
size="9rem"
/>
</div>
<div class="front-page-animation__icon-container">
<span class="front-page-animation__icon">{{ emojis[0] }}</span>
<span class="front-page-animation__shadow"></span>
</div>
<div class="front-page-animation__icon-container">
<span class="front-page-animation__icon">{{ emojis[1] }}</span>
<span class="front-page-animation__shadow"></span>
</div>
<div class="front-page-animation__icon-container">
<span class="front-page-animation__icon">{{ emojis[2] }}</span>
<span class="front-page-animation__shadow"></span>
</div>
<div class="front-page-animation__icon-container">
<span class="front-page-animation__icon">{{ emojis[3] }}</span>
<span class="front-page-animation__shadow"></span>
</div>
<div class="front-page-animation__icon-container">
<span class="front-page-animation__icon">{{ emojis[0] }}</span>
<span class="front-page-animation__shadow"></span>
</div>
<div class="front-page-animation__icon-container">
<span class="front-page-animation__icon">{{ emojis[1] }}</span>
<span class="front-page-animation__shadow"></span>
</div>
<div class="front-page-animation__icon-container">
<span class="front-page-animation__icon">{{ emojis[2] }}</span>
<span class="front-page-animation__shadow"></span>
</div>
<div class="front-page-animation__icon-container">
<span class="front-page-animation__icon">{{ emojis[3] }}</span>
<span class="front-page-animation__shadow"></span>
</div>
</div>
</div>
</template>
<style scoped lang="scss">
.front-page-animation {
@apply w-full overflow-hidden;
.front-page-animation__container {
@apply h-full;
mask-image: linear-gradient(to right, transparent 5%, black 30%, black 70%, transparent 95%);
}
.front-page-animation__content {
@apply flex;
width: calc(8 * 9rem);
animation: marquee 10s linear infinite;
.front-page-animation {
@apply flex w-fit mt-28;
animation:
enter 3.5s linear,
marquee 4s linear 3.5s infinite;
}
.front-page-animation__icon-container {
@apply relative;
@apply flex flex-col items-center;
}
@for $i from 1 through 8 {
.front-page-animation__icon-container:nth-child(#{$i}) span {
animation-delay: $i * (1s / 4);
}
}
.front-page-animation__icon {
animation: jitter 1000ms ease-out infinite;
@apply text-9xl w-[175px] static z-10;
@apply flex items-center justify-center;
animation: bounce 0.5s cubic-bezier(0.5, 0.05, 1, 0.5) infinite alternate;
}
@keyframes marquee {
from {
transform: translateX(0);
.front-page-animation__shadow {
@apply absolute h-5 w-28 opacity-0 -bottom-24;
border-radius: 50%;
background: rgba(0, 0, 0, 1);
animation: shadow 0.5s cubic-bezier(0.5, 0.05, 1, 0.5) infinite alternate;
}
@keyframes shadow {
0% {
opacity: 0;
transform: scale(0);
filter: blur(6px);
}
to {
transform: translateX(-50%);
80% {
opacity: 0.2;
transform: scale(100%);
filter: blur(2px);
}
100% {
opacity: 0.2;
transform: scale(110%);
filter: blur(1px);
}
}
@keyframes jitter {
@keyframes bounce {
0% {
transform: translateY(0);
transform: translate3d(0, 0px, 0) scaleX(1) scaleY(1);
}
40% {
transform: translateY(0.75rem);
90% {
transform: translate3d(0, 100px, 0) scaleX(1) scaleY(1);
}
100% {
transform: translateY(0);
transform: translate3d(0, 100px, 0) scaleX(1.2) scaleY(0.7);
}
}
@keyframes enter {
from {
margin-left: 100%;
}
to {
margin-left: 0;
}
}
@keyframes marquee {
from {
transform: translate3d(0, 0, 0);
}
to {
transform: translate3d(-50%, 0, 0);
}
}
</style>
14 changes: 1 addition & 13 deletions src/components/IconComponent.vue
Original file line number Diff line number Diff line change
@@ -1,15 +1,11 @@
<script setup lang="ts">
import {
mdiApple,
mdiCarrot,
mdiChartBar,
mdiCheckCircleOutline,
mdiChevronDown,
mdiClose,
mdiCogOutline,
mdiEarth,
mdiFruitPear,
mdiFruitWatermelon,
mdiMinus,
mdiPlus,
mdiRadioboxBlank,
Expand All @@ -18,21 +14,17 @@ import {
} from '@mdi/js';
export type IconString =
| 'apple'
| 'carrot'
| 'chart'
| 'check'
| 'chevron'
| 'close'
| 'cog'
| 'earth'
| 'minus'
| 'pear'
| 'plus'
| 'radioboxBlank'
| 'radioboxMarked'
| 'trashCan'
| 'watermelon';
| 'trashCan';
withDefaults(
defineProps<{
Expand All @@ -45,21 +37,17 @@ withDefaults(
);
const icons = {
apple: mdiApple,
carrot: mdiCarrot,
chart: mdiChartBar,
check: mdiCheckCircleOutline,
chevron: mdiChevronDown,
close: mdiClose,
cog: mdiCogOutline,
earth: mdiEarth,
minus: mdiMinus,
pear: mdiFruitPear,
plus: mdiPlus,
radioboxBlank: mdiRadioboxBlank,
radioboxMarked: mdiRadioboxMarked,
trashCan: mdiTrashCan,
watermelon: mdiFruitWatermelon,
};
</script>
<template>
Expand Down
13 changes: 12 additions & 1 deletion src/components/__tests__/LogView.spec.ts
Original file line number Diff line number Diff line change
Expand Up @@ -14,10 +14,21 @@ describe('LogView', () => {
});

it('renders', () => {
const wrapper = mount(LogView);
const wrapper = mount(LogView, {
global: {
stubs: {
FrontPageAnimation: true,
},
},
});
expect(wrapper.html()).toMatchSnapshot();
});

it('renders with animation', () => {
const wrapper = mount(LogView);
expect(wrapper).toBeTruthy();
});

it('renders with data', () => {
activityStore.startDate = lastWeek;
activityStore.weeks.push(
Expand Down
25 changes: 1 addition & 24 deletions src/components/__tests__/__snapshots__/LogView.spec.ts.snap
Original file line number Diff line number Diff line change
Expand Up @@ -6,30 +6,7 @@ exports[`LogView > renders 1`] = `
</svg></button>
<!---->
</div>
<div data-v-706d8f88="" class="chart-background justify-center log-view__chart">
<div data-v-706d8f88="" class="front-page-animation">
<div data-v-706d8f88="" class="front-page-animation__content">
<div data-v-706d8f88="" class="flex"><svg data-v-706d8f88="" viewBox="0 0 24 24" aria-hidden="true" style="width: 9rem; height: 9rem;" class="front-page-animation__icon">
<path d="M16.4 16.4C19.8 13 19.8 7.5 16.4 4.2L4.2 16.4C7.5 19.8 13 19.8 16.4 16.4M16 7C16.6 7 17 7.4 17 8C17 8.6 16.6 9 16 9S15 8.6 15 8C15 7.4 15.4 7 16 7M16 11C16.6 11 17 11.4 17 12C17 12.6 16.6 13 16 13S15 12.6 15 12C15 11.4 15.4 11 16 11M12 11C12.6 11 13 11.4 13 12C13 12.6 12.6 13 12 13S11 12.6 11 12C11 11.4 11.4 11 12 11M12 15C12.6 15 13 15.4 13 16C13 16.6 12.6 17 12 17S11 16.6 11 16C11 15.4 11.4 15 12 15M8 17C7.4 17 7 16.6 7 16C7 15.4 7.4 15 8 15S9 15.4 9 16C9 16.6 8.6 17 8 17M18.6 18.6C14 23.2 6.6 23.2 2 18.6L3.4 17.2C7.2 21 13.3 21 17.1 17.2C20.9 13.4 20.9 7.3 17.1 3.5L18.6 2C23.1 6.6 23.1 14 18.6 18.6Z" class="transition-all"></path>
</svg><svg data-v-706d8f88="" viewBox="0 0 24 24" aria-hidden="true" style="width: 9rem; height: 9rem; animation-delay: -750ms;" class="front-page-animation__icon">
<path d="M16,10L15.8,11H13.5A0.5,0.5 0 0,0 13,11.5A0.5,0.5 0 0,0 13.5,12H15.6L14.6,17H12.5A0.5,0.5 0 0,0 12,17.5A0.5,0.5 0 0,0 12.5,18H14.4L14,20A2,2 0 0,1 12,22A2,2 0 0,1 10,20L9,15H10.5A0.5,0.5 0 0,0 11,14.5A0.5,0.5 0 0,0 10.5,14H8.8L8,10C8,8.8 8.93,7.77 10.29,7.29L8.9,5.28C8.59,4.82 8.7,4.2 9.16,3.89C9.61,3.57 10.23,3.69 10.55,4.14L11,4.8V3A1,1 0 0,1 12,2A1,1 0 0,1 13,3V5.28L14.5,3.54C14.83,3.12 15.47,3.07 15.89,3.43C16.31,3.78 16.36,4.41 16,4.84L13.87,7.35C15.14,7.85 16,8.85 16,10Z" class="transition-all"></path>
</svg><svg data-v-706d8f88="" viewBox="0 0 24 24" aria-hidden="true" style="width: 9rem; height: 9rem; animation-delay: -500ms;" class="front-page-animation__icon">
<path d="M18 16C18 19.31 15.31 22 12 22C8.69 22 6 19.31 6 16C6 13 8 13 8 10C8 8.56 8.75 7.22 10 6.5C10.4 6.27 10.82 6.12 11.25 6.04V5C11.25 4.63 11.17 4.42 11.03 4.28C10.9 4.14 10.63 4 10 4V2.5C10.88 2.5 11.6 2.73 12.09 3.22C12.58 3.71 12.75 4.38 12.75 5V6.04C13.18 6.12 13.61 6.27 14 6.5C15.25 7.22 16 8.56 16 10C16 13 18 13 18 16Z" class="transition-all"></path>
</svg><svg data-v-706d8f88="" viewBox="0 0 24 24" aria-hidden="true" style="width: 9rem; height: 9rem; animation-delay: -250ms;" class="front-page-animation__icon">
<path d="M18.71,19.5C17.88,20.74 17,21.95 15.66,21.97C14.32,22 13.89,21.18 12.37,21.18C10.84,21.18 10.37,21.95 9.1,22C7.79,22.05 6.8,20.68 5.96,19.47C4.25,17 2.94,12.45 4.7,9.39C5.57,7.87 7.13,6.91 8.82,6.88C10.1,6.86 11.32,7.75 12.11,7.75C12.89,7.75 14.37,6.68 15.92,6.84C16.57,6.87 18.39,7.1 19.56,8.82C19.47,8.88 17.39,10.1 17.41,12.63C17.44,15.65 20.06,16.66 20.09,16.67C20.06,16.74 19.67,18.11 18.71,19.5M13,3.5C13.73,2.67 14.94,2.04 15.94,2C16.07,3.17 15.6,4.35 14.9,5.19C14.21,6.04 13.07,6.7 11.95,6.61C11.8,5.46 12.36,4.26 13,3.5Z" class="transition-all"></path>
</svg></div>
<div data-v-706d8f88="" class="flex"><svg data-v-706d8f88="" viewBox="0 0 24 24" aria-hidden="true" style="width: 9rem; height: 9rem;" class="front-page-animation__icon">
<path d="M16.4 16.4C19.8 13 19.8 7.5 16.4 4.2L4.2 16.4C7.5 19.8 13 19.8 16.4 16.4M16 7C16.6 7 17 7.4 17 8C17 8.6 16.6 9 16 9S15 8.6 15 8C15 7.4 15.4 7 16 7M16 11C16.6 11 17 11.4 17 12C17 12.6 16.6 13 16 13S15 12.6 15 12C15 11.4 15.4 11 16 11M12 11C12.6 11 13 11.4 13 12C13 12.6 12.6 13 12 13S11 12.6 11 12C11 11.4 11.4 11 12 11M12 15C12.6 15 13 15.4 13 16C13 16.6 12.6 17 12 17S11 16.6 11 16C11 15.4 11.4 15 12 15M8 17C7.4 17 7 16.6 7 16C7 15.4 7.4 15 8 15S9 15.4 9 16C9 16.6 8.6 17 8 17M18.6 18.6C14 23.2 6.6 23.2 2 18.6L3.4 17.2C7.2 21 13.3 21 17.1 17.2C20.9 13.4 20.9 7.3 17.1 3.5L18.6 2C23.1 6.6 23.1 14 18.6 18.6Z" class="transition-all"></path>
</svg><svg data-v-706d8f88="" viewBox="0 0 24 24" aria-hidden="true" style="width: 9rem; height: 9rem; animation-delay: -750ms;" class="front-page-animation__icon">
<path d="M16,10L15.8,11H13.5A0.5,0.5 0 0,0 13,11.5A0.5,0.5 0 0,0 13.5,12H15.6L14.6,17H12.5A0.5,0.5 0 0,0 12,17.5A0.5,0.5 0 0,0 12.5,18H14.4L14,20A2,2 0 0,1 12,22A2,2 0 0,1 10,20L9,15H10.5A0.5,0.5 0 0,0 11,14.5A0.5,0.5 0 0,0 10.5,14H8.8L8,10C8,8.8 8.93,7.77 10.29,7.29L8.9,5.28C8.59,4.82 8.7,4.2 9.16,3.89C9.61,3.57 10.23,3.69 10.55,4.14L11,4.8V3A1,1 0 0,1 12,2A1,1 0 0,1 13,3V5.28L14.5,3.54C14.83,3.12 15.47,3.07 15.89,3.43C16.31,3.78 16.36,4.41 16,4.84L13.87,7.35C15.14,7.85 16,8.85 16,10Z" class="transition-all"></path>
</svg><svg data-v-706d8f88="" viewBox="0 0 24 24" aria-hidden="true" style="width: 9rem; height: 9rem; animation-delay: -500ms;" class="front-page-animation__icon">
<path d="M18 16C18 19.31 15.31 22 12 22C8.69 22 6 19.31 6 16C6 13 8 13 8 10C8 8.56 8.75 7.22 10 6.5C10.4 6.27 10.82 6.12 11.25 6.04V5C11.25 4.63 11.17 4.42 11.03 4.28C10.9 4.14 10.63 4 10 4V2.5C10.88 2.5 11.6 2.73 12.09 3.22C12.58 3.71 12.75 4.38 12.75 5V6.04C13.18 6.12 13.61 6.27 14 6.5C15.25 7.22 16 8.56 16 10C16 13 18 13 18 16Z" class="transition-all"></path>
</svg><svg data-v-706d8f88="" viewBox="0 0 24 24" aria-hidden="true" style="width: 9rem; height: 9rem; animation-delay: -250ms;" class="front-page-animation__icon">
<path d="M18.71,19.5C17.88,20.74 17,21.95 15.66,21.97C14.32,22 13.89,21.18 12.37,21.18C10.84,21.18 10.37,21.95 9.1,22C7.79,22.05 6.8,20.68 5.96,19.47C4.25,17 2.94,12.45 4.7,9.39C5.57,7.87 7.13,6.91 8.82,6.88C10.1,6.86 11.32,7.75 12.11,7.75C12.89,7.75 14.37,6.68 15.92,6.84C16.57,6.87 18.39,7.1 19.56,8.82C19.47,8.88 17.39,10.1 17.41,12.63C17.44,15.65 20.06,16.66 20.09,16.67C20.06,16.74 19.67,18.11 18.71,19.5M13,3.5C13.73,2.67 14.94,2.04 15.94,2C16.07,3.17 15.6,4.35 14.9,5.19C14.21,6.04 13.07,6.7 11.95,6.61C11.8,5.46 12.36,4.26 13,3.5Z" class="transition-all"></path>
</svg></div>
</div>
</div>
</div>
<front-page-animation-stub class="log-view__chart"></front-page-animation-stub>
<transition-group-stub data-v-cd627eac="" name="tags" tag="ul" appear="false" persisted="false" css="true" class="tags__container"></transition-group-stub>"
`;
Expand Down

0 comments on commit 1055055

Please sign in to comment.