50 lines
1.2 KiB
Svelte
50 lines
1.2 KiB
Svelte
<script lang="ts">
|
|
import { onMount } from 'svelte';
|
|
import { smoothScrollTo } from '$lib/index';
|
|
import { gsap } from 'gsap';
|
|
import { ScrollTrigger } from 'gsap/dist/ScrollTrigger';
|
|
import { ScrollToPlugin } from 'gsap/dist/ScrollToPlugin';
|
|
|
|
import Home from '$lib/components/Home.svelte';
|
|
import About from '$lib/components/About.svelte';
|
|
import Projects from '$lib/components/Projects.svelte';
|
|
import Socials from '$lib/components/Socials.svelte';
|
|
import { goto } from '$app/navigation';
|
|
|
|
onMount(() => {
|
|
gsap.registerPlugin(ScrollTrigger, ScrollToPlugin);
|
|
|
|
// Assuming each section component has an id set to 'home', 'about', 'projects', 'socials'
|
|
const sectionIds = ['home', 'about', 'projects', 'socials'];
|
|
|
|
sectionIds.forEach((id, i) => {
|
|
ScrollTrigger.create({
|
|
trigger: `#${id}`,
|
|
onEnter: () => smoothScrollTo(id),
|
|
start: 'top bottom',
|
|
end: 'bottom top',
|
|
markers: true
|
|
});
|
|
|
|
ScrollTrigger.create({
|
|
trigger: `#${id}`,
|
|
start: 'bottom top',
|
|
onEnterBack: () => smoothScrollTo(id),
|
|
markers: true
|
|
});
|
|
});
|
|
});
|
|
|
|
</script>
|
|
|
|
<div class="container">
|
|
<Home />
|
|
<About />
|
|
<Projects />
|
|
<Socials />
|
|
</div>
|
|
|
|
<style lang="scss">
|
|
@import '$styles/index.scss';
|
|
</style>
|