Skip to content

Latest commit

 

History

History
346 lines (275 loc) · 7.78 KB

deck.mdx

File metadata and controls

346 lines (275 loc) · 7.78 KB
Raw

import { Head, Appear } from "mdx-deck" import { Invert } from "mdx-deck/layouts"

import syntaxTheme from "prism-react-renderer/themes/oceanicNext" export { default as theme } from "./theme" import { CodeSurfer } from "./forked-code-surfer/mdx-deck-code-surfer/src/index.js" // import { CodeSurfer } from "mdx-deck-code-surfer"

import Inspiration from "./components/Inspiration" import TitleSlide from "./components/TitleSlide"

import Translator from "./components/enterUpdateDeleteMsg.js" import StripeMenu from "./components/StripeMenu" import FLIPBasicExample from "./components/FLIPBasicExample" import ReactFlipToolkitBasicExample from "./components/ReactFlipToolkitBasicExample" import AnimatedListNoAnimation from "./components/AnimatedList/NoAnimation.js" import AnimatedList from "./components/AnimatedList/FinalAnimation.js" import FirstAidKitExample from "./components/FirstAidKitExample"

import "./injectGlobalCSS"

<title>Layout Animations</title>

Exit-Update-Enter in Web Layouts

Before: Generic Fade

export default Invert

Inspired by this Dribbble shot

Enter

export default Invert

Inspired by this Dribbble shot

Exit & Enter

export default Invert

Inspired by this Dribbble shot

Update & Exit & Enter

export default Invert

Inspired by this Dribbble shot

We Can Implement the "Update" Stage with the FLIP Technique

<CodeSurfer theme={syntaxTheme} code={require("!raw-loader!./components/FLIPBasicExample")} steps={[ { range: [44, 91], notes: () => ( Here's what the complete animated component looks like at a high level ) }, { range: [75, 89], notes: () => ( Here's the render method of the component, we just need to add transitions ) }, { range: [47, 53], notes: () => ( {" "} First: Cache the dimensions of the element right before changes are applied ) }, { range: [54, 74], notes: () => ( {" "} Immediately after changes are applied and before they are rendered, manually undo them ) }, { range: [57, 58], notes: () => ( {" "} Last: Get the new dimensions of the element ) }, { range: [59, 62], notes: () => ( {" "} Invert: Figure out how much we're going to have to move and scale the element to undo the changes ) }, { range: [64, 65], notes: () => ( {" "} Invert: Apply the inverted styles ) }, { range: [67, 72], notes: () => ( {" "} Play: Remove the inverted styles to transform the element to its new position and size{" "} ) } ]} />

https://github.com/aholachek/react-flip-toolkit

<CodeSurfer notes="React-Flip-Toolkit Example" theme={syntaxTheme} code={require("!raw-loader!./components/ReactFlipToolkitBasicExample")} steps={[ { range: [44, 67], notes: ()=> with React-Flip-Toolkit}, { lines: [45, 65], notes: ()=> Flipper}, { lines: [46, 64], notes: ()=> Flipped}, { lines: [49, 53, 57, 61], notes: ()=> Flipped with inverseFlipId} ]} />

---

<CodeSurfer theme={syntaxTheme} code={require("!raw-loader!./components/ReactFlipToolkitVanillaExample")} steps={[ { range: [1, 2], notes: () => ( React-Flip-Toolkit is also usable without React ) } ]} />

Create the illusion of transformation

Inspired by Stripe's homepage
Inspired by Stripe's homepage

Create complex, sequenced effects declaratively

Inspired by an animation from this article

<CodeSurfer notes="React-Flip-Toolkit Example" theme={syntaxTheme} code={require("!raw-loader!./components/AnimatedList/FinalAnimation")} steps={[ { range: [58, 99], notes: () => ( The cascading staggered animations are accomplished with nested{" "} Flipped components. ) }, { tokens: { 61: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11], 77: [13, 14, 15, 16, 17, 18], 84: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11] } } ]} />

Helpful articles on UI Motion Design