Skip to content

Commit 437a1b3

Browse files
SaltyAomSaltyAom
committed
🎉 feat: animation
1 parent bce67c4 commit 437a1b3

File tree

11 files changed

+49
-32
lines changed

11 files changed

+49
-32
lines changed

‎docs/components/fern/animate.ts

Lines changed: 8 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,11 @@
1-
import { computed, type ComputedRef } from 'vue'
1+
import { computed, type Ref } from 'vue'
22
import { cubicBezier } from 'motion-v'
33

44
const easeOutExpo = cubicBezier(0.16, 1, 0.3, 1)
55

6-
export function useFlyIn(isInView: ComputedRef<boolean>) {
7-
return computed(() => (delay: number) => ({
8-
initial: { translateY: '1.5rem', opacity: 0 },
6+
export function useFlyIn(isInView: Ref<boolean>) {
7+
return computed(() => (delay = 0) => ({
8+
initial: { translateY: '1.75rem', opacity: 0 },
99
animate: isInView.value ? 'inView' : 'initial',
1010
variants: {
1111
inView: {
@@ -21,8 +21,8 @@ export function useFlyIn(isInView: ComputedRef<boolean>) {
2121
}))
2222
}
2323

24-
export function useFadeIn(isInView: ComputedRef<boolean>) {
25-
return computed(() => (delay: number) => ({
24+
export function useFadeIn(isInView: Ref<boolean>) {
25+
return computed(() => (delay = 0) => ({
2626
initial: { opacity: 0 },
2727
animate: isInView.value ? 'inView' : 'initial',
2828
variants: {
@@ -38,8 +38,8 @@ export function useFadeIn(isInView: ComputedRef<boolean>) {
3838
}))
3939
}
4040

41-
export function useExpandWidth(isInView: ComputedRef<boolean>) {
42-
return computed(() => (width:number, delay: number) => ({
41+
export function useExpandWidth(isInView: Ref<boolean>) {
42+
return computed(() => (width: number, delay = 0) => ({
4343
initial: { width: 0, opacity: 0 },
4444
animate: isInView.value ? 'inView' : 'initial',
4545
variants: {

‎docs/components/fern/benchmark.vue

Lines changed: 5 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@ import { useFlyIn, useFadeIn, useExpandWidth } from './animate'
66
const scope = ref(null)
77
const isInView = useInView(scope, {
88
once: true,
9-
margin: '0px 0px -40% 0px'
9+
margin: '0px 0px -35% 0px'
1010
})
1111
const flyIn = useFlyIn(isInView)
1212
const fadeIn = useFadeIn(isInView)
@@ -47,15 +47,16 @@ const expand = useExpandWidth(isInView)
4747
<motion.h6 v-bind="flyIn(0.3)">
4848
<span
4949
class="!text-xl !font-semibold !text-transparent !ml-0 text-gradient from-violet-500 to-sky-500"
50-
>Elysia</span
5150
>
52-
<span>Bun</span>
51+
Elysia
52+
</span>
53+
<span> Bun</span>
5354
</motion.h6>
5455
<motion.div
5556
v-bind="expand(72, 0.4)"
5657
class="bg-gradient-to-r from-violet-500 to-fuchsia-400 !text-white"
5758
>
58-
<span> 2,454,631 reqs/s </span>
59+
<span>2,454,631 reqs/s</span>
5960
</motion.div>
6061
</li>
6162
<li>

‎docs/components/fern/beyond.vue

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -155,7 +155,7 @@ import { useFlyIn } from './animate'
155155
const scope = ref(null)
156156
const isInView = useInView(scope, {
157157
once: true,
158-
margin: '0px 0px -40% 0px'
158+
margin: '0px 0px -35% 0px'
159159
})
160160
const flyIn = useFlyIn(isInView)
161161

‎docs/components/fern/doc.vue

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@ import { useFlyIn } from './animate'
66
const scope = ref(null)
77
const isInView = useInView(scope, {
88
once: true,
9-
margin: '0px 0px -50% 0px'
9+
margin: '0px 0px -35% 0px'
1010
})
1111
const flyIn = useFlyIn(isInView)
1212
</script>

‎docs/components/fern/easy.vue

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@ import { useFlyIn } from './animate'
66
const scope = ref(null)
77
const isInView = useInView(scope, {
88
once: true,
9-
margin: '0px 0px -40% 0px'
9+
margin: '0px 0px -35% 0px'
1010
})
1111
const flyIn = useFlyIn(isInView)
1212
</script>
@@ -41,11 +41,12 @@ const flyIn = useFlyIn(isInView)
4141
A framework that feels
4242
<span
4343
class="text-gradient from-violet-500 to-sky-500 font-semibold"
44-
>just like JavaScript</span
4544
>
45+
just like JavaScript
46+
</span>
4647
</motion.p>
4748
</header>
48-
<motion.section class="showcase" v-bind="flyIn(0.5)">
49+
<motion.section class="showcase" v-bind="flyIn(0.3)">
4950
<slot />
5051
</motion.section>
5152
</div>

‎docs/components/fern/features.vue

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@ import { useFlyIn } from './animate'
66
const scope = ref(null)
77
const isInView = useInView(scope, {
88
once: true,
9-
margin: '0px 0px -40% 0px'
9+
margin: '0px 0px -35% 0px'
1010
})
1111
const flyIn = useFlyIn(isInView)
1212
</script>

‎docs/components/fern/future.vue

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -6,8 +6,7 @@ import { useFlyIn, useFadeIn } from './animate'
66
const scope = ref(null)
77
const isInView = useInView(scope, {
88
once: true,
9-
margin: '100px',
10-
amount: 'all'
9+
margin: '0px 0px -35% 0px'
1110
})
1211
const flyIn = useFlyIn(isInView)
1312
const fadeIn = useFadeIn(isInView)

‎docs/components/fern/sponsor.vue

Lines changed: 5 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,8 @@
11
<template>
2-
<section class="flex flex-col w-full max-w-5xl mx-auto mt-4 fern-gap" ref="scope">
2+
<section
3+
class="flex flex-col w-full max-w-5xl mx-auto mt-4 fern-gap"
4+
ref="scope"
5+
>
36
<motion.h2
47
class="text-5xl lg:text-6xl !leading-[4rem] sm:text-center font-bold mb-4 bg-clip-text text-transparent bg-gradient-to-tl from-rose-400 to-fuchsia-400"
58
v-bind="flyIn()"
@@ -237,7 +240,7 @@ import { data, type Sponsor } from './sponsor.data'
237240
const scope = ref(null)
238241
const isInView = useInView(scope, {
239242
once: true,
240-
margin: '0px 0px -40% 0px'
243+
margin: '0px 0px -35% 0px'
241244
})
242245
const flyIn = useFlyIn(isInView)
243246

‎docs/components/fern/test.vue

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@ import { useFlyIn } from './animate'
66
const scope = ref(null)
77
const isInView = useInView(scope, {
88
once: true,
9-
margin: '0px 0px -40% 0px'
9+
margin: '0px 0px -35% 0px'
1010
})
1111
const flyIn = useFlyIn(isInView)
1212
</script>

‎docs/components/fern/tweets.vue

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -126,7 +126,7 @@ import { useFlyIn } from './animate'
126126
const scope = ref(null)
127127
const isInView = useInView(scope, {
128128
once: true,
129-
margin: '0px 0px -40% 0px'
129+
margin: '0px 0px -35% 0px'
130130
})
131131
const flyIn = useFlyIn(isInView)
132132
</script>

‎docs/components/fern/type-integrity.vue

Lines changed: 21 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -16,16 +16,29 @@
1616
</h1>
1717
</div>
1818
<motion.section class="showcase" v-bind="flyIn(0.2)">
19-
<motion.div class="window" v-bind="flyIn(0.3)">
19+
<motion.div
20+
layout
21+
class="window"
22+
v-bind="flyIn(0.3)"
23+
:transition="{ duration: 0.5, ease: cubicBezier(0.16, 1, 0.3, 1) }"
24+
>
2025
<div class="control">
2126
<div />
2227
<div />
2328
<div />
2429
</div>
25-
<slot v-if="form == 1" name="type-1" />
26-
<slot v-else-if="form == 2" name="type-2" />
27-
<slot v-else-if="form == 3" name="type-3" />
28-
<slot v-else-if="form == 4" name="type-4" />
30+
<motion.div class="body" v-if="form === 1" layoutId="code">
31+
<slot name="type-1" />
32+
</motion.div>
33+
<motion.div class="body" v-else-if="form === 2" layoutId="code">
34+
<slot name="type-2" />
35+
</motion.div>
36+
<motion.div class="body" v-else-if="form === 3" layoutId="code">
37+
<slot name="type-3" />
38+
</motion.div>
39+
<motion.div class="body" v-else-if="form === 4" layoutId="code">
40+
<slot name="type-4" />
41+
</motion.div>
2942
</motion.div>
3043
</motion.section>
3144
<section class="selector">
@@ -57,13 +70,13 @@
5770
<script setup lang="ts">
5871
import { ref, useTemplateRef, watch } from 'vue'
5972
60-
import { useInView, motion } from 'motion-v'
73+
import { useInView, motion, cubicBezier } from 'motion-v'
6174
import { useFlyIn } from './animate'
6275
6376
const scope = ref(null)
6477
const isInView = useInView(scope, {
6578
once: true,
66-
margin: '0px 0px -50% 0px'
79+
margin: '0px 0px -35% 0px'
6780
})
6881
const flyIn = useFlyIn(isInView)
6982
@@ -145,7 +158,7 @@ watch(form, (index) => {
145158
}
146159
}
147160
148-
& > div {
161+
& > .body > div {
149162
@apply !bg-transparent;
150163
151164
& > pre {

0 commit comments

Comments
 (0)