82 lines
1.5 KiB
Vue
82 lines
1.5 KiB
Vue
<template>
|
|
<KeepAlive>
|
|
<component :is="component.componentInstance" v-for="component in componentsList" :key="component.name"
|
|
:component="component.component" />
|
|
</KeepAlive>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { gsap } from 'gsap'
|
|
import ScrollTrigger from 'gsap/ScrollTrigger'
|
|
|
|
gsap.registerPlugin(ScrollTrigger)
|
|
|
|
watch(useColorMode(), (color) => {
|
|
console.log(color);
|
|
|
|
})
|
|
|
|
onMounted(() => {
|
|
|
|
|
|
|
|
|
|
const anim = gsap.fromTo(
|
|
'h1',
|
|
{
|
|
opacity: 0,
|
|
zoom: 0.95
|
|
},
|
|
{
|
|
opacity: 1,
|
|
duration: 1,
|
|
zoom: 1,
|
|
ease: 'power2.out',
|
|
}
|
|
)
|
|
|
|
ScrollTrigger.create({
|
|
trigger: 'h1',
|
|
start: 'top 80%',
|
|
onEnter: () => anim.restart(), // play when scrolling down
|
|
onEnterBack: () => anim.restart(), // play again when scrolling up
|
|
})
|
|
|
|
const animh2 = gsap.fromTo(
|
|
'h2',
|
|
{
|
|
opacity: 0,
|
|
color: 'var(--color-accent-green-light)',
|
|
},
|
|
{
|
|
opacity: 1,
|
|
duration: 1,
|
|
ease: 'power2.out',
|
|
}
|
|
)
|
|
|
|
ScrollTrigger.create({
|
|
trigger: 'h2',
|
|
start: 'top 80%',
|
|
onEnter: () => animh2.restart(), // play when scrolling down
|
|
onEnterBack: () => animh2.restart(), // play again when scrolling up
|
|
})
|
|
|
|
|
|
})
|
|
|
|
|
|
const route = useRoute();
|
|
const store = useStore();
|
|
const menuStore = useMenuStore();
|
|
await store.getSections(route.params.id);
|
|
|
|
onMounted(() => {
|
|
menuStore.openMenu = false;
|
|
});
|
|
|
|
useHead(menuStore.headMeta);
|
|
|
|
const componentsList = await store.getComponents(route.params.id)
|
|
|
|
</script> |