Skip to content

Commit b48a280

Browse files
JonathonRPJonathonRP
authored
Merge pull request #45 from JonathonRP:feature/layout-animation-helper
feat: 🎸 layout animation helper
2 parents 2e9faa5 + e92afa6 commit b48a280

File tree

5 files changed

+283
-227
lines changed

5 files changed

+283
-227
lines changed

‎.changeset/wide-melons-take.md‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
---
2+
"motion-start": patch
3+
---
4+
5+
add layout animation helper

‎src/lib/components/motion/AnimateLayout.svelte‎

Lines changed: 51 additions & 50 deletions
Original file line numberDiff line numberDiff line change
@@ -1,66 +1,67 @@
11
<script>
2-
import { motion } from "$lib/motion-start";
3-
// import Motion from "$lib/motion-start/motion/MotionSSR.svelte";
2+
import { motion, layoutAnimation } from "$lib/motion-start";
3+
// import Motion from "$lib/motion-start/motion/MotionSSR.svelte";
44
5-
const spring = {
6-
type: "spring",
7-
stiffness: 700,
8-
damping: 30,
9-
};
5+
const spring = {
6+
type: "spring",
7+
stiffness: 700,
8+
damping: 30,
9+
};
1010
11-
let active = false;
11+
let active = false;
1212
13-
function toggleSwitch() {
14-
active = !active;
15-
}
13+
function toggleSwitch() {
14+
active = !active;
15+
}
16+
17+
$: layout = layoutAnimation.track(() => active);
1618
</script>
1719

1820
<div
19-
class="w-64 h-64 relative bg-gray-700/40 rounded-lg flex justify-center items-center"
21+
class="w-64 h-64 relative bg-gray-700/40 rounded-lg flex justify-center items-center"
2022
>
21-
<svelte:boundary onerror={console.log}>
22-
<button class="switch" data-active={active} onclick={toggleSwitch}>
23-
<motion.div
24-
silly={2 * !active}
25-
layout
26-
transition={spring}
27-
onLayoutUpdate={(...args) => console.log("change", args)}
28-
class="handle"
29-
/>
30-
</button>
23+
<svelte:boundary onerror={console.log}>
24+
<button class="switch" data-active={active} onclick={toggleSwitch}>
25+
<motion.div
26+
{layout}
27+
transition={spring}
28+
onLayoutUpdate={(...args) => console.log("change", args)}
29+
class="handle"
30+
/>
31+
</button>
3132

32-
{#snippet failed(error, reset)}
33-
<p>broken, check console</p>
34-
{/snippet}
35-
</svelte:boundary>
33+
{#snippet failed(error, reset)}
34+
<p>broken, check console</p>
35+
{/snippet}
36+
</svelte:boundary>
3637
</div>
3738

3839
<style>
39-
.switch {
40-
all: unset;
41-
width: 8rem;
42-
height: 3rem;
43-
background-color: gainsboro;
44-
display: flex;
45-
justify-content: flex-start;
46-
border-radius: 50px;
47-
padding: 0.5rem;
48-
cursor: pointer;
49-
}
40+
.switch {
41+
all: unset;
42+
width: 8rem;
43+
height: 3rem;
44+
background-color: gainsboro;
45+
display: flex;
46+
justify-content: flex-start;
47+
border-radius: 50px;
48+
padding: 0.5rem;
49+
cursor: pointer;
50+
}
5051
51-
.switch {
52-
display: flex;
53-
justify-content: flex-start;
54-
}
52+
.switch {
53+
display: flex;
54+
justify-content: flex-start;
55+
}
5556
56-
.switch[data-active="true"] {
57-
justify-content: flex-end;
58-
}
57+
.switch[data-active="true"] {
58+
justify-content: flex-end;
59+
}
5960
60-
:global(.handle) {
61-
width: 3rem;
62-
height: 3rem;
63-
background-color: white;
64-
border-radius: 40px;
65-
}
61+
:global(.handle) {
62+
width: 3rem;
63+
height: 3rem;
64+
background-color: white;
65+
border-radius: 40px;
66+
}
6667
</style>

‎src/lib/motion-start/index.ts‎

Lines changed: 136 additions & 98 deletions
Original file line numberDiff line numberDiff line change
@@ -2,17 +2,20 @@
22
based on framer-motion@4.0.3,
33
Copyright (c) 2018 Framer B.V.
44
*/
5-
export { FramerTreeLayoutContext } from './context/SharedLayoutContext.js';
5+
export { FramerTreeLayoutContext } from "./context/SharedLayoutContext.js";
66

7-
export { UseGestures } from './gestures/use-gestures.js';
8-
export { UsePanGesture } from './gestures/use-pan-gesture.js';
9-
export { UseTapGesture } from './gestures/use-tap-gesture.js';
7+
export { UseGestures } from "./gestures/use-gestures.js";
8+
export { UsePanGesture } from "./gestures/use-pan-gesture.js";
9+
export { UseTapGesture } from "./gestures/use-tap-gesture.js";
1010

11-
export { default as MotionSSR } from './motion/MotionSSR.svelte';
11+
export { default as MotionSSR } from "./motion/MotionSSR.svelte";
1212

13-
export { UseAnimation } from './animation/use-animation.js';
13+
export { UseAnimation } from "./animation/use-animation.js";
1414

15-
export { default as Mdiv, default as MotionDiv } from './components/MotionDiv.svelte';
15+
export {
16+
default as Mdiv,
17+
default as MotionDiv,
18+
} from "./components/MotionDiv.svelte";
1619

1720
// ----------------------------------------------------------------------------------------------
1821

@@ -23,117 +26,152 @@ Copyright (c) 2018 Framer B.V.
2326
/**
2427
* Components
2528
*/
26-
export { AnimatePresence } from './components/AnimatePresence/index.js';
27-
export { AnimateSharedLayout } from './components/AnimateSharedLayout/index.js';
28-
export { LazyMotion } from './components/LazyMotion/index.js';
29-
export { MotionConfig } from './components/MotionConfig/index.js';
30-
export { motion, createDomMotionComponent, motion as Motion } from './render/dom/motion.js';
31-
export { m, m as M } from './render/dom/motion-minimal.js';
29+
export { AnimatePresence } from "./components/AnimatePresence/index.js";
30+
export { AnimateSharedLayout } from "./components/AnimateSharedLayout/index.js";
31+
export { LazyMotion } from "./components/LazyMotion/index.js";
32+
export { MotionConfig } from "./components/MotionConfig/index.js";
33+
export {
34+
motion,
35+
createDomMotionComponent,
36+
motion as Motion,
37+
} from "./render/dom/motion.js";
38+
export { m, m as M } from "./render/dom/motion-minimal.js";
3239
/**
3340
* Features
3441
*/
35-
export { featureBundle, animations, drag, gestureAnimations } from './render/dom/featureBundle.js';
42+
export {
43+
featureBundle,
44+
animations,
45+
drag,
46+
gestureAnimations,
47+
} from "./render/dom/featureBundle.js";
3648
/**
3749
* Motion values
3850
*/
39-
export { MotionValue, motionValue, type PassiveEffect, type Subscriber } from './value/index.js';
40-
export { useElementScroll } from './value/scroll/use-element-scroll.js';
41-
export { useViewportScroll } from './value/scroll/use-viewport-scroll.js';
42-
export { useMotionTemplate } from './value/use-motion-template.js';
43-
export { useMotionValue } from './value/use-motion-value.js';
44-
export { useSpring } from './value/use-spring.js';
45-
export { useTransform } from './value/use-transform.js';
46-
export { useVelocity } from './value/use-velocity.js';
47-
export { resolveMotionValue } from './value/utils/resolve-motion-value.js';
51+
export {
52+
MotionValue,
53+
motionValue,
54+
type PassiveEffect,
55+
type Subscriber,
56+
} from "./value/index.js";
57+
export { useElementScroll } from "./value/scroll/use-element-scroll.js";
58+
export { useViewportScroll } from "./value/scroll/use-viewport-scroll.js";
59+
export { useMotionTemplate } from "./value/use-motion-template.js";
60+
export { useMotionValue } from "./value/use-motion-value.js";
61+
export { useSpring } from "./value/use-spring.js";
62+
export { useTransform } from "./value/use-transform.js";
63+
export { useVelocity } from "./value/use-velocity.js";
64+
export { resolveMotionValue } from "./value/utils/resolve-motion-value.js";
4865
/**
4966
* Accessibility
5067
*/
51-
export { useReducedMotion } from './utils/use-reduced-motion.js';
68+
export { useReducedMotion } from "./utils/use-reduced-motion.js";
5269
/**
5370
* Utils
5471
*/
55-
export { animate } from './animation/animate.js';
56-
export { animationControls } from './animation/animation-controls.js';
57-
export type { AnimationControls } from './animation/types.js';
58-
export { useAnimation } from './animation/use-animation.js';
59-
export { useIsPresent, usePresence } from './components/AnimatePresence/use-presence.js';
60-
export { createCrossfader } from './components/AnimateSharedLayout/utils/crossfader.js';
61-
export { UseDomEvent } from './events/use-dom-event.js';
62-
export type { PanInfo } from './gestures/PanSession.js';
63-
export { DragControls, useDragControls } from './gestures/drag/use-drag-controls.js';
64-
export type { FocusHandlers, HoverHandlers, PanHandlers, TapHandlers, TapInfo } from './gestures/types.js';
65-
export { createMotionComponent } from './motion/index.js';
66-
export { isValidMotionProp } from './motion/utils/valid-prop.js';
67-
export { addScaleCorrection } from './render/dom/projection/scale-correction.js';
68-
export { snapshotViewportBox } from './render/dom/projection/utils.js';
69-
export { batchLayout, flushLayout } from './render/dom/utils/batch-layout.js';
70-
export { visualElement } from './render/index.js';
71-
export type { VisualElement } from './render/types.js';
72-
export { animateVisualElement } from './render/utils/animation.js';
73-
export { transform } from './utils/transform.js';
74-
export { useCycle } from './utils/use-cycle.js';
72+
export { animate } from "./animation/animate.js";
73+
export { animationControls } from "./animation/animation-controls.js";
74+
export type { AnimationControls } from "./animation/types.js";
75+
export { useAnimation } from "./animation/use-animation.js";
76+
export {
77+
useIsPresent,
78+
usePresence,
79+
} from "./components/AnimatePresence/use-presence.js";
80+
export { createCrossfader } from "./components/AnimateSharedLayout/utils/crossfader.js";
81+
export { UseDomEvent } from "./events/use-dom-event.js";
82+
export type { PanInfo } from "./gestures/PanSession.js";
83+
export {
84+
DragControls,
85+
useDragControls,
86+
} from "./gestures/drag/use-drag-controls.js";
87+
export type {
88+
FocusHandlers,
89+
HoverHandlers,
90+
PanHandlers,
91+
TapHandlers,
92+
TapInfo,
93+
} from "./gestures/types.js";
94+
export { createMotionComponent } from "./motion/index.js";
95+
export { isValidMotionProp } from "./motion/utils/valid-prop.js";
96+
export { addScaleCorrection } from "./render/dom/projection/scale-correction.js";
97+
export { snapshotViewportBox } from "./render/dom/projection/utils.js";
98+
export { batchLayout, flushLayout } from "./render/dom/utils/batch-layout.js";
99+
export { visualElement } from "./render/index.js";
100+
export type { VisualElement } from "./render/types.js";
101+
export { animateVisualElement } from "./render/utils/animation.js";
102+
export { transform } from "./utils/transform.js";
103+
export { useCycle } from "./utils/use-cycle.js";
75104
/**
76105
* Contexts
77106
*/
78-
export { LayoutGroupContext } from './context/LayoutGroupContext.js';
79-
export { MotionConfigContext } from './context/MotionConfigContext.js';
80-
export { PresenceContext } from './context/PresenceContext.js';
107+
export { LayoutGroupContext } from "./context/LayoutGroupContext.js";
108+
export { MotionConfigContext } from "./context/MotionConfigContext.js";
109+
export { PresenceContext } from "./context/PresenceContext.js";
81110
/**
82111
* Types
83112
*/
84-
export type { AnimationOptions, AnimationPlaybackControls } from './animation/animate.js';
85-
export type { AnimatePresenceProps } from './components/AnimatePresence/types.js';
86113
export type {
87-
SharedLayoutAnimationConfig,
88-
SharedLayoutProps,
89-
SharedLayoutSyncMethods,
90-
SyncLayoutLifecycles,
91-
VisibilityAction,
92-
} from './components/AnimateSharedLayout/types.js';
93-
export { createBatcher } from './components/AnimateSharedLayout/utils/batcher.js';
94-
export type { LazyProps } from './components/LazyMotion/types.js';
95-
export type { MotionConfigProps } from './components/MotionConfig/index.js';
96-
export type { SharedLayoutContext } from './context/SharedLayoutContext.js';
97-
export type { EventInfo } from './events/types.js';
98-
export type { DragElastic, DragHandlers, DraggableProps } from './gestures/drag/types.js';
99-
export type { LayoutProps } from './motion/features/layout/types.js';
100-
export * from './motion/features/types.js';
114+
AnimationOptions,
115+
AnimationPlaybackControls,
116+
} from "./animation/animate.js";
117+
export type { AnimatePresenceProps } from "./components/AnimatePresence/types.js";
118+
export type {
119+
SharedLayoutAnimationConfig,
120+
SharedLayoutProps,
121+
SharedLayoutSyncMethods,
122+
SyncLayoutLifecycles,
123+
VisibilityAction,
124+
} from "./components/AnimateSharedLayout/types.js";
125+
export { createBatcher } from "./components/AnimateSharedLayout/utils/batcher.js";
126+
export type { LazyProps } from "./components/LazyMotion/types.js";
127+
export type { MotionConfigProps } from "./components/MotionConfig/index.js";
128+
export type { SharedLayoutContext } from "./context/SharedLayoutContext.js";
129+
export type { EventInfo } from "./events/types.js";
101130
export type {
102-
AnimationProps,
103-
MotionAdvancedProps,
104-
MotionProps,
105-
MotionStyle,
106-
MotionTransform,
107-
RelayoutInfo,
108-
ResolveLayoutTransition,
109-
VariantLabels,
110-
} from './motion/types.js';
111-
export type { CustomDomComponent } from './render/dom/motion-proxy.js';
131+
DragElastic,
132+
DragHandlers,
133+
DraggableProps,
134+
} from "./gestures/drag/types.js";
135+
export type { LayoutProps } from "./motion/features/layout/types.js";
136+
export * from "./motion/features/types.js";
137+
export type {
138+
AnimationProps,
139+
MotionAdvancedProps,
140+
MotionProps,
141+
MotionStyle,
142+
MotionTransform,
143+
RelayoutInfo,
144+
ResolveLayoutTransition,
145+
VariantLabels,
146+
} from "./motion/types.js";
147+
export type { CustomDomComponent } from "./render/dom/motion-proxy.js";
112148
// export type { ForwardRefComponent, HTMLMotionProps } from "./render/html/types.js";
113149
// export type { SVGAttributesAsMotionValues, SVGMotionProps } from "./render/svg/types.js";
114-
export { FlatTree } from './render/utils/flat-tree.js';
115-
export type { VisualElementLifecycles } from './render/utils/lifecycles.js';
150+
export { FlatTree } from "./render/utils/flat-tree.js";
151+
export type { VisualElementLifecycles } from "./render/utils/lifecycles.js";
116152
export type {
117-
CustomValueType,
118-
EasingFunction,
119-
Inertia,
120-
Keyframes,
121-
KeyframesTarget,
122-
None,
123-
Orchestration,
124-
Repeat,
125-
ResolvedKeyframesTarget,
126-
ResolvedSingleTarget,
127-
ResolvedValueTarget,
128-
SingleTarget,
129-
Spring,
130-
Target,
131-
TargetAndTransition,
132-
Transition,
133-
Tween,
134-
ValueTarget,
135-
Variant,
136-
Variants,
137-
} from './types.js';
138-
export * from './types/geometry.js';
139-
export type { ScrollMotionValues } from './value/scroll/utils.js';
153+
CustomValueType,
154+
EasingFunction,
155+
Inertia,
156+
Keyframes,
157+
KeyframesTarget,
158+
None,
159+
Orchestration,
160+
Repeat,
161+
ResolvedKeyframesTarget,
162+
ResolvedSingleTarget,
163+
ResolvedValueTarget,
164+
SingleTarget,
165+
Spring,
166+
Target,
167+
TargetAndTransition,
168+
Transition,
169+
Tween,
170+
ValueTarget,
171+
Variant,
172+
Variants,
173+
} from "./types.js";
174+
export * from "./types/geometry.js";
175+
export type { ScrollMotionValues } from "./value/scroll/utils.js";
176+
177+
export { animateLayout as layoutAnimation } from "./motion/features/layout/utils.js";

0 commit comments

Comments
 (0)