-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
1 parent
3106dfc
commit cd5bae8
Showing
227 changed files
with
826 additions
and
684 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
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 |
|---|---|---|
| @@ -0,0 +1,58 @@ | ||
| <!-- https://codesandbox.io/p/sandbox/t7qxhv?file=/src/styles.css --> | ||
| <svelte:options runes /> | ||
|
|
||
| <script lang="ts"> | ||
| import Box from "../Box.svelte"; | ||
| import { motion, AnimatePresence } from "$lib/motion-start"; | ||
| let count = $state(0); | ||
| let items = $state([0]); | ||
| let popLayout = $state(false); | ||
| let mode = $derived<"popLayout" | "sync">(popLayout ? "popLayout" : "sync"); | ||
| </script> | ||
|
|
||
| <Box> | ||
| <div class="flex flex-col items-center"> | ||
| <div class="flex flex-col p-0 pb-[50px] items-center"> | ||
| <label class="flex flex-col items-center my-[20px] mx-0"> | ||
| <code>popLayout</code> | ||
| <input | ||
| class="text-accent-500" | ||
| type="checkbox" | ||
| checked={popLayout} | ||
| onchange={(e) => (popLayout = e.currentTarget.checked)} | ||
| /> | ||
| </label> | ||
| <motion.button | ||
| class="bg-accent-500 text-background border-none py-[15px] px-[25px] rounded-[50px] text-[18px] font-bold cursor-pointer w-[150px]" | ||
| whileTap={{ scale: 0.95 }} | ||
| onclick={() => { | ||
| count++; | ||
| items = [...items, count]; | ||
| }} | ||
| > | ||
| Add item | ||
| </motion.button> | ||
| </div> | ||
| <ul | ||
| class="flex w-[300px] h-[300px] flex-col gap-[20px] m-0 p-0 list-none" | ||
| > | ||
| <AnimatePresence {mode}> | ||
| {#each items as id, indx (id)} | ||
| <motion.li | ||
| class="block bg-accent-500 h-[80px] w-full shrink-0 grow-0 basis-[80px] rounded-[20px] m-0 p-0" | ||
| layout | ||
| animate={{ scale: 1, opacity: 1 }} | ||
| exit={{ scale: 0.8, opacity: 0 }} | ||
| transition={{ type: "spring" }} | ||
| onclick={() => { | ||
| const newItems = [...items]; | ||
| if (indx > -1) newItems.splice(indx, 1); | ||
| items = newItems; | ||
| }} | ||
| /> | ||
| {/each} | ||
| </AnimatePresence> | ||
| </ul> | ||
| </div> | ||
| </Box> |
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 |
|---|---|---|
| @@ -0,0 +1,87 @@ | ||
| <!-- https://codesandbox.io/p/sandbox/uonye --> | ||
| <svelte:options runes /> | ||
|
|
||
| <script lang="ts" module> | ||
| const inactiveShadow = "0px 0px 0px rgba(0,0,0,0.8)"; | ||
| function useRaisedShadow(value: MotionValue<number>) { | ||
| const boxShadow = useMotionValue(inactiveShadow); | ||
| $effect.pre(() => { | ||
| let isActive = false; | ||
| value.onChange((latest) => { | ||
| const wasActive = isActive; | ||
| if (latest !== 0) { | ||
| isActive = true; | ||
| if (isActive !== wasActive) { | ||
| animate(boxShadow, "5px 5px 10px rgba(0,0,0,0.3)"); | ||
| } | ||
| } else { | ||
| isActive = false; | ||
| if (isActive !== wasActive) { | ||
| animate(boxShadow, inactiveShadow); | ||
| } | ||
| } | ||
| }); | ||
| }); | ||
| return boxShadow; | ||
| } | ||
| </script> | ||
|
|
||
| <script lang="ts"> | ||
| import { | ||
| Reorder, | ||
| useMotionValue, | ||
| animate, | ||
| MotionValue, | ||
| } from "$lib/motion-start"; | ||
| import Box from "../Box.svelte"; | ||
| let initialItems = $state([ | ||
| "🍅 Tomato", | ||
| "🥒 Cucumber", | ||
| "🧀 Cheese", | ||
| "🥬 Lettuce", | ||
| ]); | ||
| const y = useMotionValue(0); | ||
| const boxShadow = useRaisedShadow(y); | ||
| </script> | ||
|
|
||
| <Box> | ||
| <Reorder.Group | ||
| class="list-none p-0 m-0 font-medium text-2xl relative w-[300px]" | ||
| axis="y" | ||
| onReorder={(newItems) => (initialItems = newItems)} | ||
| values={initialItems} | ||
| > | ||
| {#each initialItems as item (item)} | ||
| <Reorder.Item | ||
| class="p-0 m-0 font-medium text-2xl rounded-[5px] mb-[10px] w-full py-[15px] px-[18px] bg-white flex justify-between items-center shrink-0 cursor-grab" | ||
| value={item} | ||
| id={item} | ||
| style={{ boxShadow, y }} | ||
| > | ||
| <span>{item}</span> | ||
| </Reorder.Item> | ||
| {/each} | ||
| </Reorder.Group> | ||
| </Box> | ||
|
|
||
| <style> | ||
| :global(li svg) { | ||
| width: 18px; | ||
| height: 18px; | ||
| cursor: grab; | ||
| } | ||
| :global(.background) { | ||
| position: absolute; | ||
| top: 0; | ||
| left: 0; | ||
| bottom: 0; | ||
| width: 300px; | ||
| background: #fff; | ||
| } | ||
| </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
| Original file line number | Diff line number | Diff line change |
|---|---|---|
|
|
@@ -3,7 +3,7 @@ based on [email protected], | |
| Copyright (c) 2018 Framer B.V. | ||
| */ | ||
|
|
||
| import type { ProgressTimeline } from '../render/dom/scroll/observe.svelte'; | ||
| import type { ProgressTimeline } from '../render/dom/scroll/observe'; | ||
| import { supportsScrollTimeline } from '../render/dom/scroll/supports'; | ||
| import type { AnimationPlaybackControls } from './types'; | ||
|
|
||
|
|
||
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 |
|---|---|---|
|
|
@@ -3,11 +3,11 @@ based on [email protected], | |
| Copyright (c) 2018 Framer B.V. | ||
| */ | ||
|
|
||
| import { spring } from '../generators/spring/index.svelte'; | ||
| import { createAnimationsFromSequence } from '../sequence/create.svelte'; | ||
| import type { AnimationSequence, SequenceOptions } from '../sequence/types.svelte'; | ||
| import { spring } from '../generators/spring'; | ||
| import { createAnimationsFromSequence } from '../sequence/create'; | ||
| import type { AnimationSequence, SequenceOptions } from '../sequence/types'; | ||
| import type { AnimationPlaybackControls, AnimationScope } from '../types'; | ||
| import { animateSubject } from './subject.svelte'; | ||
| import { animateSubject } from './subject'; | ||
|
|
||
| export function animateSequence(sequence: AnimationSequence, options?: SequenceOptions, scope?: AnimationScope) { | ||
| const animations: AnimationPlaybackControls[] = []; | ||
|
|
||
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 |
|---|---|---|
|
|
@@ -3,8 +3,8 @@ based on [email protected], | |
| Copyright (c) 2018 Framer B.V. | ||
| */ | ||
|
|
||
| import { animateMotionValue } from '../interfaces/motion-value.svelte'; | ||
| import { motionValue as createMotionValue, type MotionValue } from '../../value/index.svelte'; | ||
| import { animateMotionValue } from '../interfaces/motion-value'; | ||
| import { motionValue as createMotionValue, type MotionValue } from '../../value'; | ||
| import { isMotionValue } from '../../value/utils/is-motion-value'; | ||
| import type { GenericKeyframesTarget } from '../../types'; | ||
| import type { AnimationPlaybackControls, ValueAnimationTransition } from '../types'; | ||
|
|
||
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 |
|---|---|---|
|
|
@@ -3,21 +3,21 @@ based on [email protected], | |
| Copyright (c) 2018 Framer B.V. | ||
| */ | ||
|
|
||
| import { time } from '../../frameloop/sync-time.svelte'; | ||
| import { time } from '../../frameloop/sync-time'; | ||
| import { | ||
| type KeyframeResolver, | ||
| type ResolvedKeyframes, | ||
| flushKeyframeResolvers, | ||
| } from '../../render/utils/KeyframesResolver.svelte'; | ||
| } from '../../render/utils/KeyframesResolver'; | ||
| import { instantAnimationState } from '../../utils/use-instant-transition-state'; | ||
| import type { | ||
| AnimationPlaybackControls, | ||
| RepeatType, | ||
| ValueAnimationOptions, | ||
| ValueAnimationOptionsWithRenderContext, | ||
| } from '../types'; | ||
| import { canAnimate } from './utils/can-animate.svelte'; | ||
| import { getFinalKeyframe } from './waapi/utils/get-final-keyframe.svelte'; | ||
| import { canAnimate } from './utils/can-animate'; | ||
| import { getFinalKeyframe } from './waapi/utils/get-final-keyframe'; | ||
|
|
||
| /** | ||
| * Maximum time allowed between an animation being created and it being | ||
|
|
||
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.