-
Notifications
You must be signed in to change notification settings - Fork 146
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
feat(motion): add initial presets code (#2360)
* feat: init motion presets rfc * docs: add poc video * docs: add comparison table and pocs * feat: add gsap poc * add layout animations poc with blade components * feat: add basic API decision * feat: add api decisions and memes * feat: add api decisions and memes * feat: remove unrelated changes * docs: add morph note * feat: add video example * docs: add note for previews * docs: add more videos * fix: images * fix: code alignments * docs: fix widths of cols * feat: add chat interface demo * typo * fix: width of previews * feat: update all token values * feat: motion, migrate internal motion tokens * fix: ts check * fix: ts * fix: switch delay * feat: add base entry exit presets * fix: example card alignment * feat: add stagger component * feat: add animateInteractions * refactor: use common BaseMotionBox * refactor: move stagger and animateinteraction check * fix: durations map * feat: add morph and scale preset * feat: add Slide * refactor: remove unused code add todo * docs: update animationInteractions docs * feat: add css bezier function * feat: add view transitions API note * feat: add view transitions API note * feat: add controled scale, enhancer animateinteraction * feat: replace framer-motion imports with motion/react * feat: rename framer motion to motion/react * feat: add framer motion name change note in library table * docs: add new open questions and conclusions * fix: change misleading scale heading * feat: add fade token values * fix(AnimateInteractions): a11y focus issues * feat: add token valyes for move * feat: add slide tokens * fix: stories * fix: typecheck * feat: add refs to components till checkbox * feat: add refs till radio * feat: migration to ref till typography * feat: add withRef story * fix: scale box * feat: add shouldUnmountWhenHidden * feat: handle no unmount transitions in stagger * feat: add slideFromOffset prop * refactor: simplify basemotion * feat: add memo for variants object * fix: focus on animate interactions * fix: resolve anurag's comments * feat: add comments for getOuterMotionRef * feat: add delay prop * fix: stagger type * feat: support framer-motion v4 * feat: add borderRadius and backgroundColor morph support * feat: remove reduced motion handling
- Loading branch information
1 parent
d432350
commit 12e1c2f
Showing
96 changed files
with
2,338 additions
and
490 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
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
14 changes: 14 additions & 0 deletions
14
packages/blade/src/components/AnimateInteractions/AnimateInteractions.native.tsx
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,14 @@ | ||
| import { Text } from '~components/Typography'; | ||
| import { throwBladeError } from '~utils/logger'; | ||
| import type { AnimateInteractionsProps } from './types'; | ||
|
|
||
| const AnimateInteractions = (_props: AnimateInteractionsProps): React.ReactElement => { | ||
| throwBladeError({ | ||
| message: 'AnimateInteractions is not yet implemented for native', | ||
| moduleName: 'AnimateInteractions', | ||
| }); | ||
|
|
||
| return <Text>AnimateInteractions Component is not available for Native mobile apps.</Text>; | ||
| }; | ||
|
|
||
| export { AnimateInteractions }; |
98 changes: 98 additions & 0 deletions
98
packages/blade/src/components/AnimateInteractions/AnimateInteractions.stories.tsx
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,98 @@ | ||
| import React from 'react'; | ||
| import type { Meta, StoryFn } from '@storybook/react'; | ||
| import { Title } from '@storybook/addon-docs'; | ||
| import { AnimateInteractions } from './'; | ||
| import type { AnimateInteractionsProps } from './'; | ||
| import { Sandbox } from '~utils/storybook/Sandbox'; | ||
| import StoryPageWrapper from '~utils/storybook/StoryPageWrapper'; | ||
| import { Button } from '~components/Button'; | ||
| import { Box } from '~components/Box'; | ||
| import { Fade } from '~components/Fade'; | ||
| import { Move } from '~components/Move'; | ||
| import { Text } from '~components/Typography'; | ||
| import { Card, CardBody } from '~components/Card'; | ||
|
|
||
| const Page = (): React.ReactElement => { | ||
| return ( | ||
| <StoryPageWrapper | ||
| componentName="AnimateInteractions" | ||
| componentDescription="AnimateInteractions Motion Component (TODO)" | ||
| figmaURL="https://www.figma.com/proto/jubmQL9Z8V7881ayUD95ps/Blade-DSL?type=design&node-id=74864-85897&t=CvaYT53LNc4OYVKa-1&scaling=min-zoom&page-id=21689%3A381614&mode=design" | ||
| > | ||
| <Title>Usage</Title> | ||
| <Sandbox> | ||
| {` | ||
| const todo = 'todo'; | ||
| `} | ||
| </Sandbox> | ||
| </StoryPageWrapper> | ||
| ); | ||
| }; | ||
|
|
||
| export default { | ||
| title: 'Motion/AnimateInteractions', | ||
| component: AnimateInteractions, | ||
| tags: ['autodocs'], | ||
| parameters: { | ||
| docs: { | ||
| page: Page, | ||
| }, | ||
| }, | ||
| } as Meta<AnimateInteractionsProps>; | ||
|
|
||
| const AnimateInteractionsTemplate: StoryFn<typeof AnimateInteractions> = (args) => { | ||
| return ( | ||
| <Box minHeight="350px"> | ||
| <AnimateInteractions motionTriggers={args.motionTriggers}> | ||
| {args.children} | ||
| </AnimateInteractions> | ||
| </Box> | ||
| ); | ||
| }; | ||
|
|
||
| export const Default = AnimateInteractionsTemplate.bind({}); | ||
| Default.args = { | ||
| children: ( | ||
| <Box display="flex" flexDirection="row" gap="spacing.4"> | ||
| <Text>Hover me for magic</Text> | ||
| <Fade motionTriggers={['on-animate-interactions']}> | ||
| <b>I appear depending on interaction on parent container</b> | ||
| </Fade> | ||
| </Box> | ||
| ), | ||
| }; | ||
|
|
||
| export const ScaleChildOnCardHover = AnimateInteractionsTemplate.bind({}); | ||
| ScaleChildOnCardHover.args = { | ||
| children: ( | ||
| <Card | ||
| padding="spacing.0" | ||
| width="max-content" | ||
| backgroundColor="surface.background.gray.moderate" | ||
| > | ||
| <CardBody> | ||
| <Box position="relative" overflow="hidden" paddingBottom="50px"> | ||
| <Move motionTriggers={['mount']}> | ||
| <Box padding="spacing.4"> | ||
| <Text>Hi I am text inside card. Hover over this card to see magic</Text> | ||
| </Box> | ||
| </Move> | ||
| <Box position="absolute" left="spacing.0" bottom="spacing.0" width="100%"> | ||
| <Move motionTriggers={['on-animate-interactions']}> | ||
| <Box | ||
| display="flex" | ||
| gap="spacing.4" | ||
| justifyContent="flex-end" | ||
| padding={['spacing.4', 'spacing.6']} | ||
| elevation="highRaised" | ||
| > | ||
| <Button variant="secondary">Cancel</Button> | ||
| <Button>Submit</Button> | ||
| </Box> | ||
| </Move> | ||
| </Box> | ||
| </Box> | ||
| </CardBody> | ||
| </Card> | ||
| ), | ||
| }; |
31 changes: 31 additions & 0 deletions
31
packages/blade/src/components/AnimateInteractions/AnimateInteractions.web.tsx
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,31 @@ | ||
| import { BaseMotionEnhancerBox } from '~components/BaseMotion'; | ||
| import { AnimateInteractionsContext } from './AnimateInteractionsProvider'; | ||
| import { useFocusWithin } from './useFocusWithin'; | ||
| import React from 'react'; | ||
| import { useAnimation } from 'framer-motion'; | ||
| import type { AnimateInteractionsProps } from './types'; | ||
|
|
||
| export const AnimateInteractions = ({ | ||
| children, | ||
| motionTriggers = ['hover'], | ||
| }: AnimateInteractionsProps) => { | ||
| const baseMotionRef = React.useRef<HTMLDivElement | null>(null); | ||
| const controls = useAnimation(); | ||
|
|
||
| useFocusWithin(baseMotionRef, { | ||
| onFocusWithin: () => { | ||
| controls.start('animate'); | ||
| }, | ||
| onBlurWithin: () => { | ||
| controls.start('exit'); | ||
| }, | ||
| }); | ||
|
|
||
| return ( | ||
| <AnimateInteractionsContext.Provider value={{ isInsideAnimateInteractionsContainer: true }}> | ||
| <BaseMotionEnhancerBox ref={baseMotionRef} motionTriggers={motionTriggers} animate={controls}> | ||
| {children} | ||
| </BaseMotionEnhancerBox> | ||
| </AnimateInteractionsContext.Provider> | ||
| ); | ||
| }; |
Oops, something went wrong.