-
Notifications
You must be signed in to change notification settings - Fork 1
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
đźš‘ Fix: Changing router view cause error in
ResizeObserver.observe m…
…ethod. Set lenis options to default in `destroy`.
- Loading branch information
1 parent
34b204e
commit 3e75987
Showing
15 changed files
with
241 additions
and
109 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,22 @@ | ||
| name: Release | ||
|
|
||
| on: | ||
| push: | ||
| tags: | ||
| - v* | ||
|
|
||
| jobs: | ||
| build: | ||
| runs-on: ubuntu-latest | ||
| timeout-minutes: 10 | ||
| permissions: | ||
| contents: write | ||
| steps: | ||
| - uses: actions/checkout@v4 | ||
|
|
||
| # it would be nice to be able to generate change logs there | ||
|
|
||
| - name: Create & publish release | ||
| uses: softprops/action-gh-release@v1 | ||
| with: | ||
| generate_release_notes: true |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,13 +1,31 @@ | ||
| import { createApp } from 'vue' | ||
| import { createRouter, createWebHistory } from 'vue-router' | ||
|
|
||
| import 'vuecomotive-scroll/dist/lenis.css' | ||
|
|
||
| import createVuecomotiveScroll from 'vuecomotive-scroll' | ||
|
|
||
| import App from './App.vue' | ||
| import HomeRoute from '@/pages/HomeRoute.vue' | ||
|
|
||
| const app = createApp(App) | ||
|
|
||
| const router = createRouter({ | ||
| history: createWebHistory(), | ||
| routes: [ | ||
| { | ||
| path: '/lazy', | ||
| name: 'lazy', | ||
| component: () => import('@/pages/LazyRoute.vue') | ||
| }, | ||
| { | ||
| path: '/', | ||
| name: 'home', | ||
| component: HomeRoute | ||
| } | ||
| ] | ||
| }) | ||
|
|
||
| app.use(createVuecomotiveScroll()) | ||
| app.use(router) | ||
|
|
||
| app.mount('#app') |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,113 @@ | ||
| <script setup lang="ts"> | ||
| // TODO make some more feature presentable and clean this | ||
| import { onMounted, ref, watch } from 'vue' | ||
| import { useScroll, ScrollView, ScrollComponent } from 'vuecomotive-scroll' | ||
| const flag = ref(true) | ||
| const duration = ref(1.4) | ||
| const { scrollTo, scroll, direction, isScrolling, isReady } = useScroll() | ||
| const zero = ref<InstanceType<typeof ScrollComponent> | null>(null) | ||
| const zero1 = ref<InstanceType<typeof ScrollComponent> | null>(null) | ||
| const blank = ref<HTMLElement>() | ||
| onMounted(() => { | ||
| document.addEventListener('click', (e) => { | ||
| const t = e.target as HTMLElement | ||
| if (t.tagName === 'A' && t.getAttribute('href').startsWith('#')) { | ||
| scrollTo(t.getAttribute('href')) | ||
| } | ||
| }) | ||
| }) | ||
| function handleMounted() {} | ||
| function handleInsersect(d) {} | ||
| </script> | ||
|
|
||
| <template> | ||
| <ScrollView class="home-route" :duration="duration" css-direction> | ||
| <header> | ||
| <a href="#top">top</a> | ||
| <a href="#zero1">zero1</a> | ||
| <a href="#second">second</a> | ||
| <a href="#blank">blank</a> | ||
| </header> | ||
| <ScrollComponent @vue:mounted="handleMounted" id="top" is="section" class="zero" ref="zero"> | ||
| Scroll comp text!!! | ||
| </ScrollComponent> | ||
| <ScrollComponent id="zero1" :class="{ flag }" :speed="0.2" is="section" class="zero1" ref="zero1"> | ||
| Scroll !!1 | ||
| </ScrollComponent> | ||
| <div class="first" @click="scrollTo(blank)">Main div</div> | ||
| <div id="second" class="second" data-scroll data-scroll-speed="0.2" :data-flag="flag">Child el!!!</div> | ||
| <div class="third" @click="$scrollTo(zero.el)">Main third div</div> | ||
| <div id="blank" class="blank" ref="blank" @click="scrollTo(zero.el)"></div> | ||
| <ScrollComponent | ||
| in-view-class="test-in-view-class" | ||
| repeat | ||
| :style="{ height: '25vh', background: 'blue' }" | ||
| @intersect="handleInsersect" | ||
| /> | ||
| </ScrollView> | ||
| </template> | ||
|
|
||
| <style> | ||
| header { | ||
| position: fixed; | ||
| top: 0; | ||
| z-index: 99; | ||
| width: 100%; | ||
| display: flex; | ||
| justify-content: center; | ||
| gap: 1em; | ||
| } | ||
| .home-route { | ||
| height: 100vh; | ||
| overflow: hidden; | ||
| } | ||
| .zero { | ||
| height: 30vh; | ||
| background-color: coral; | ||
| } | ||
| .zero1 { | ||
| height: 25vh; | ||
| background-color: lightpink; | ||
| } | ||
| .zero1.flag { | ||
| display: none; | ||
| } | ||
| .first { | ||
| height: 35vh; | ||
| background-color: antiquewhite; | ||
| } | ||
| .second { | ||
| height: 15vh; | ||
| background-color: cadetblue; | ||
| } | ||
| .second[data-flag='true'] { | ||
| background-color: red; | ||
| } | ||
| .third { | ||
| height: 25vh; | ||
| background-color: black; | ||
| } | ||
| .blank { | ||
| height: 100vh; | ||
| background-color: aquamarine; | ||
| } | ||
| </style> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,42 @@ | ||
| <script setup lang="ts"> | ||
| import { useScroll, ScrollView, ScrollComponent } from 'vuecomotive-scroll' | ||
| </script> | ||
|
|
||
| <template> | ||
| <ScrollView class="lazy-route" horizontal> | ||
| <ScrollComponent class="scroll-el-1">Scroll element #1</ScrollComponent> | ||
| <ScrollComponent class="scroll-el-2" :speed="-0.5">Scroll element #2</ScrollComponent> | ||
| <ScrollComponent class="scroll-el-3">Scroll element #3</ScrollComponent> | ||
| </ScrollView> | ||
| </template> | ||
|
|
||
| <style> | ||
| .lazy-route { | ||
| height: 100vh; | ||
| overflow: hidden; | ||
| } | ||
| .lazy-route > div { | ||
| width: fit-content; | ||
| height: 100%; | ||
| display: flex; | ||
| } | ||
| .scroll-el-1 { | ||
| width: 20vw; | ||
| height: 100%; | ||
| background: rebeccapurple; | ||
| } | ||
| .scroll-el-2 { | ||
| width: 70vw; | ||
| height: 100%; | ||
| background: aquamarine; | ||
| } | ||
| .scroll-el-3 { | ||
| width: 40vw; | ||
| height: 100%; | ||
| background: darkorange; | ||
| } | ||
| </style> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.