Skip to content

Commit

Permalink
feat: integrate Rive animation (#2097)
Browse files Browse the repository at this point in the history 
* feat: integrate Rive animation and update styles

* cleanup styles

* update riv anim

* fix sizing

* font-weight 400 on title

* fix: Enable touch scrolling

* fade bottom update

* even on smaller bp

* refactor: update font sizes in Header and TextScroller components for better responsiveness

* feat: display image on mobile

* refactor: remove unused imports and clean up styles in Header and TextScroller components

* refactor:  update hom Header styles for better responsiveness

* fix: mobile adjusted
  • Loading branch information
@elevatebart
elevatebart authored Jan 22, 2025
1 parent d86ccff commit e4ba15f
Show file tree
Hide file tree
Showing 8 changed files with 213 additions and 129 deletions.
4 changes: 2 additions & 2 deletions assets/styles/app.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,7 @@ body {
min-width: 320px;
min-height: 100%;
position: relative;
background-color: $black-4;
background-color: #0a0a0c;
}
.nuxt-loading-indicator {
background: linear-gradient(90deg, #E151F7 65.38%, #5C47F5 82.43%)!important;
Expand All @@ -34,7 +34,7 @@ h1, h2, h3, h4, h5, h6 {

@include media-breakpoint-down(lg) {
h1 {
font-size: 1.625rem !important;
font-size: 1.625rem;
}
h2 {
font-size: $h4-font-size !important;
Expand Down
152 changes: 93 additions & 59 deletions components/home/Header.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,8 +7,7 @@
<br>
Smarter Not Harder
</h1>
<p>Unified Orchestration Platform to Simplify Business-Critical Workflows
<br>and Govern them as Code and from the UI.</p>
<p>Unified Orchestration Platform to Simplify Business-Critical Workflows and Govern them as Code and from the UI.</p>
<div class="buttons">
<NuxtLink
href="/docs/getting-started/quickstart#start-kestra"
Expand Down Expand Up @@ -46,16 +45,15 @@
</div>
<div class="img-block">
<NuxtImg
class="img-fluid headerimg"
src="/landing/home/header.png"
width="2991px"
height="1257px"
loading="lazy"
format="webp"
quality="100"
width="1034"
height="785"
densities="x1 x2"
sizes="320px xs:640px lg:1034px"
alt="Unified Orchestration Platform in an All-Inclusive Dashboard"
src="/landing/home/homepage.jpg"
alt="homepage"
class="homepage-image"
/>
<canvas ref="canvas" height="785" width="1034"/>
</div>
<div class="companies-background">
<LayoutCompanies class="d-xl-none" />
Expand Down Expand Up @@ -96,29 +94,57 @@
</div>
</template>

<script>
import Console from "vue-material-design-icons/Console.vue";
import PlayOutline from "vue-material-design-icons/PlayOutline.vue";
<script setup lang="ts">
import { ref, onMounted } from "vue";
import { useMediaQuery } from "@vueuse/core";
import TextScroller from "~/components/layout/TextScroller.vue";
export default {
components: {
Console,
PlayOutline,
TextScroller,
},
data() {
return {
videoVisible: false,
scrollingTexts: [
{ text: "Orchestrate", color: "#E500EA" },
{ text: "Automate", color: "#4281FF" },
{ text: "Schedule", color: "#9D40FB" },
],
};
},
};
const isMobile = useMediaQuery('(max-width: 768px)')
import { Rive } from "@rive-app/canvas";
const videoVisible = ref(false)
const canvas = ref<HTMLCanvasElement>()
const scrollingTexts = [
{ text: "Orchestrate", color: "#E500EA" },
{ text: "Automate", color: "#4281FF" },
{ text: "Schedule", color: "#9D40FB" },
]
const riveAnimation = ref()
function setupRiveAnimation(){
if(!canvas.value) return
const anim = new Rive({
src: "/landing/home/homepage.riv",
canvas: canvas.value,
autoplay: true,
stateMachines: "kestra",
isTouchScrollEnabled: true,
onLoad: () => {
anim.resizeDrawingSurfaceToCanvas();
},
});
riveAnimation.value = anim
}
onMounted(() => {
if(!isMobile.value){
setupRiveAnimation()
}
})
watch(isMobile, (newVal) => {
if(newVal){
riveAnimation.value?.cleanup();
}else{
setupRiveAnimation();
}
})
onUnmounted(() => {
riveAnimation.value?.cleanup();
})
</script>

<style lang="scss" scoped>
Expand All @@ -132,11 +158,12 @@
z-index: 0;
width: 100vw;
height: 91.6%;
background: linear-gradient(197.51deg, #390380 13.37%, #14151B 45.45%);
right: 0;
top: 0;
}
.text-block {
position: relative;
z-index: 10;
margin: 4rem 0 1rem;
display: flex;
flex-direction: column;
Expand All @@ -158,13 +185,15 @@
color: var(--bs-white);
text-align: center;
max-width: 100%;
font-size: 32px!important;
font-weight: 600;
margin: 0;
font-size: 24pt;
font-weight: 400;
padding: 0;
margin-top: 2rem;
margin-bottom: 0;
@include media-breakpoint-up(lg) {
font-size: 53px!important;
margin: 0;
font-size: 39pt;
line-height: 1em;
}
Expand All @@ -182,6 +211,15 @@
font-weight: 500;
font-size: $h6-font-size;
color: $white;
text-wrap: balance;
margin:0;
@include media-breakpoint-down(md) {
font-size: 11pt;
}
@include media-breakpoint-up(lg) {
text-wrap: wrap;
width: 600px;
}
}
.buttons {
Expand All @@ -200,7 +238,7 @@
content: "";
position: absolute;
left: 50%;
bottom: calc(-1 * var(--spacer));
bottom: -1rem;
transform: translateX(-50%);
display: inline-block;
height: 2px;
Expand Down Expand Up @@ -316,32 +354,28 @@
.img-block
{
display: flex;
width: 100%;
justify-content: center;
position: relative;
&:after {
content: "";
background-image: url(/landing/header-menu/bg-dots.png);
background-repeat: no-repeat;
background-size: 100% 100%;
position: absolute;
top: 0;
width: 148%;
@include media-breakpoint-down(md) {
width: 138%;
}
height: 85%;
.homepage-image{
display: none;
}
img {
width: 80%;
@include media-breakpoint-down(md) {
position: relative;
z-index: 5;
@include media-breakpoint-down(md) {
width: 100%;
justify-content: flex-start;
left: -50px;
canvas {
display: none;
}
.homepage-image{
display: block;
height: 500px;
margin-bottom: 100px;
}
}
canvas {
width: 2000px;
margin-top: -650px;
}
}
:deep(.companies-container) {
Expand Down
8 changes: 4 additions & 4 deletions components/layout/TextScroller.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -68,18 +68,18 @@ export default {
animation-duration: 500ms;
animation-fill-mode: both;
animation-name: fadeInBottom;
font-weight: 600;
font-size: 42px!important;
@include media-breakpoint-down(sm) {
font-weight: 600;
min-width: 100%;
text-align: center;
}
@include media-breakpoint-up(lg) {
min-width: 280px;
font-size: 55px!important;
}
@include media-breakpoint-down(lg) {
font-size: 32pt;
}
@keyframes fadeInBottom {
Expand Down
Loading

0 comments on commit e4ba15f

Please sign in to comment.