Cover


import { TextHeading } from '@/components/shared/slides/text-heading'

<TextHeading>Sharing Session: Framer <span className='from-pink-500 to-pink-700 bg-gradient-to-r bg-clip-text text-transparent'>Motion.</span></TextHeading>

<h2 className='!text-2xl font-light'>by Muhammad Ilham Mubarak (Aang)</h2>


Smart Creatives


import { TextHeading } from '@/components/shared/slides/text-heading'

<TextHeading className="text-center max-w-xl mx-auto">Remember <span className='from-pink-500 to-pink-700 bg-gradient-to-r bg-clip-text text-transparent'>Smart Creatives?</span></TextHeading>



import { SmartCreatives } from '../components/smart-creatives'

<SmartCreatives />


Intro


## Topics for today

1. Web Animations
2. What / Why Framer Motion
3. Basic Usage


What makes an animation feels right?


import { TextHeading } from '@/components/shared/slides/text-heading'


<TextHeading className="text-center !leading-tight !text-balance max-w-full">What makes an <span className='text-pink-500'>Animation</span> <br/> feels right?</TextHeading>


Comparison


import { TextHeading } from '@/components/shared/slides/text-heading'
import { Footnotes } from '../components/footnotes'
import { AnimationComparison } from '../components/animation-comparison'

# Let's compare

<AnimationComparison />


Different easing function


import { EasingsChart } from '../components/easings-chart'
import { Footnotes } from '../components/footnotes'

# Different easing functions

<EasingsChart />

<Footnotes >Chart by: <a href="https://animations.dev/learn/making-it-feel-right/the-easing-blueprint" target='_blank'>Animations on the Web: The easing blueprint</a> | Read more: <a href="https://easings.net/">easings.net</a></Footnotes>


Natural Motion


import { TextHeading } from '@/components/shared/slides/text-heading'
import { Footnotes } from '../components/footnotes'


<TextHeading className="text-center !leading-tight !text-balance max-w-full">Animation feels right <br/> when it feels <span className='text-pink-500'>natural</span></TextHeading>

<Footnotes className='text-center'>Read More: <a href="https://emilkowal.ski/ui/great-animations">Emil Kowalski: Great Animations</a></Footnotes>


Interaction Design


import { Metaphors } from '../components/metaphors'
import { Footnotes } from '../components/footnotes'


> Why does swiping horizontally navigate between pages?

<Metaphors />

# Interaction Design

- An artform to make experiences that fluidly respond to human intent.
- Great interaction is modeled after properties from the real world (e.g. Interruptability)

<Footnotes className='text-left'>Read more: <a href="https://developer.apple.com/videos/play/wwdc2018/803" target='_blank'>WWDC18: Designing Fluid Interface</a></Footnotes>


Should we animate everything on the screen?


import { TextHeading } from '@/components/shared/slides/text-heading'
import { Footnotes } from '../components/footnotes'

<TextHeading className="text-center !leading-tight !text-balance max-w-full">Should we animate <span className='text-pink-500'>everything</span> on the screen?</TextHeading>

<p className='text-center !text-xl'>It's a fact that great interaction and motion helps make the experience feel better.</p>


Meaning


import { TextHeading } from '@/components/shared/slides/text-heading'
import { Meaning } from '../components/meaing'
import { Footnotes } from '../components/footnotes'

# Animation must have a <span className='text-pink-500'> meaning </span> to feel right

<div className='grid grid-cols-2 gap-12'>
  <div>
    It's not an artform in the same way as painting or composing music.

    - People are trying to get stuff done using a product
    - Form and composition is not enough

    > Find a holistic balance between form and function.

    ### Example: iOS form morphing

    It looks good, and it shows the clear connection between two states.

  </div>
  <Meaning />
</div>

<Footnotes className='text-left'>Read more: <a href="https://rauno.me/craft/interaction-design" target='_blank'> Rauno Freiberg: Invisible Details of Interaction Design</a> | <a href="https://animations.dev/learn/making-it-feel-right/what-makes-an-animation-feel-right#meaning" target='_blank'> Animations on the Web: Meaning</a></Footnotes>





Challenges


import { TextHeading } from '@/components/shared/slides/text-heading'
import { Footnotes } from '../components/footnotes'

# <span className='text-pink-500'> Challenges </span> on Web Animations

- Additional abstraction
- Low-powered devices
- The web platform itself - CSS and JS

#### CSS
  - Not all CSS Properties are [animatable](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_animated_properties)
  - Limited controls over complex animations using CSS
  - Reflows causing [Layout Thrashing](https://web.dev/articles/avoid-large-complex-layouts-and-layout-thrashing)
  - [Poor DX](https://linear-easing-generator.netlify.app/) when creating custom physics-based animation in CSS
  - Interruptible animations
#### JavaScript
  - [Main thread blocking](https://web.dev/articles/rendering-performance)
  - Limited controls over hardware-accelerated animations
  - Bundle size
  - Imperative API


<Footnotes>Read more: <a href="https://motion.dev/docs/performance" target='_blank'>Motion One: Performance</a></Footnotes>





Introducing


import { TextHeading } from '@/components/shared/slides/text-heading'

<TextHeading>Framer <span className='from-pink-500 to-pink-700 bg-gradient-to-r bg-clip-text text-transparent'>Motion.</span></TextHeading>



Framer Motion


import { WhatIsFramerMotion } from '../components/what-is-framer-motion'
import { Footnotes } from '../components/footnotes'

<WhatIsFramerMotion />

<Footnotes>Inspired by <a href="https://ped.ro/" target='_blank'>ped.ro</a></Footnotes>


Getting Started


# Getting Started

```sh
$ pnpm add framer-motion
```


Motion Component


import { Visualizer } from '../components/visualizer'
import { MotionComp } from '../components/motion-comp'

# Motion Component

To animate declaratively with Framer Motion we need to use the `motion` element.

<Visualizer Comp={MotionComp}>
```tsx showLineNumbers
import { motion } from 'framer-motion';

export default function Example() {
  return (
    <motion.div
      initial={{ opacity: 0, x: 100 }}
      animate={{ opacity: 1, x: 0 }}
    />
  )
}

```
</Visualizer>

- Animation is interpolated using JavaScript
- Animation runs outside of React's render cycle


Variants


import { Visualizer } from '../components/visualizer'
import { VariantsComp } from '../components/variants'
import { Footnotes } from '../components/footnotes'

# Variants

A way to create reusable, orchestrated complex animations throughout a component tree.

<Visualizer Comp={VariantsComp}>
```tsx showLineNumbers {24-26,32}
import { motion, Variants } from 'framer-motion'

const containerVariants: Variants = {
  hidden: { opacity: 1, scale: 0 },
  visible: {
    opacity: 1,
    scale: 1,
    transition: {
      delayChildren: 0.3,
      staggerChildren: 0.2,
    },
  },
}

const itemVariants: Variants = {
  hidden: { y: 20, opacity: 0 },
  visible: {
    y: 0,
    opacity: 1,
  },
}

<motion.div
  initial='hidden'
  animate='visible'
  variants={containerVariants}
>
  {items.map((item, i) => {
    return (
      <motion.div
        key={i}
        variants={itemVariants}
      />
    )
  })}
</motion.div>
```
</Visualizer>

## Propagation

If a `motion` component has children, changes in variant will flow down through the component hierarchy until a child component defines its own `animate` property.

<Footnotes className='text-left'>Read more: <a href="https://www.framer.com/motion/animation/#variants" target='_blank'>Framer Motion: Variants</a></Footnotes>


Transition Props


import { Visualizer } from '../components/visualizer'
import { TransitionComp } from '../components/transition-comp'
import { Footnotes } from '../components/footnotes'

# Transition Props

We can define different types of animation by passing a default transition to the `transition` prop.

<Visualizer Comp={TransitionComp} reload={false}>
```tsx showLineNumbers {7,14}
import { motion } from 'framer-motion';

// Tween transition
<motion.div
  initial={{ x: 0 }}
  animate={{ x: 200 }}
  transition={{ type: 'tween', ease: 'easeInOut', duration: 0.5 }}
/>

// Spring transition
<motion.div
  initial={{ x: 0 }}
  animate={{ x: 200 }}
  transition={{ type: 'spring', duration: 0.5, bounce: 0.2 }}
/>
```
</Visualizer>

## Defaults

- Physical properties like `x` or `scale` will be animated via a _spring simulation_.
- Properties like `opacity` or `color` will be animated with a _tween_.

<Footnotes className='text-left'>Read more: <a href='https://developer.apple.com/videos/play/wwdc2023/10158/' target='_blank'>WWDC23: Animate with springs</a> | <a href='https://www.joshwcomeau.com/animation/a-friendly-introduction-to-spring-physics/' target='_blank'>Josh W. Comeau: A Friendly Introduction to Spring Physics</a></Footnotes>


Layout Animations


import { Footnotes } from '../components/footnotes'
import { Visualizer } from '../components/visualizer'
import { LayoutAnimation } from '../components/layout-animation'

# Layout Animations

Animate a `motion` component between distinct _layouts_ by setting the `layout` prop to `true`.
This will result in what we call a layout animation. For example:

<Visualizer Comp={LayoutAnimation} reload={false}>
```tsx showLineNumbers {11}
import { motion } from 'framer-motion'

<div
  style={{
    display: 'flex',
    flexDirection: isColumn ? 'column' : 'row'
  }}
>
  {items.map((item) => (
    <motion.div
      layout
      key={item}
    >
      {item}
    </motion.div>
  ))}
</div>
```
</Visualizer>

## But why not normal CSS?
1. [Not all CSS properties are animatable](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_animated_properties) e.g `flex-direction`
2. CSS layouts are difficult and [expensive to animate](https://web.dev/articles/animations-overview).


<Footnotes className='text-left'>Read more: <a href="https://www.framer.com/motion/layout-animations/" target='_blank'>Framer Motion: Layout Animations</a> | <a href='https://www.nan.fyi/magic-motion' target='_blank'>Nanda Syahrasyad: Inside Framer's Magic Motion</a> | <a href='https://blog.maximeheckel.com/posts/framer-motion-layout-animations/'>Maxime Heckel: Everything about Framer Motion layout animations</a></Footnotes>


Shared Layout Animations


import { Footnotes } from '../components/footnotes'
import { Visualizer } from '../components/visualizer'
import { SharedLayoutAnimation } from '../components/shared-layout-animation'
import { SharedLayoutAnimation2 } from '../components/shared-layout-animation-2'

# Shared Layout Animations

When a new component is added that has a `layoutId` prop that matches an existing component, it will automatically animate out from the old component.

<Visualizer Comp={SharedLayoutAnimation} reload={false}>
```tsx showLineNumbers {6}
import { motion } from 'framer-motion'

<ul>
  {items.map((item) => (
    <li key={item} className="relative">
      {isSelectedTabs && <motion.div layoutId="tabIndicator" />}
      <span>{item}</span>
    </li>
  ))}
</ul>
```
</Visualizer>

### Another example

With shared layout animations, we can effortlessly connect two elements, enabling a fluid transition between them.

<SharedLayoutAnimation2 />

<Footnotes className='text-left'>Read more: <a href="https://www.framer.com/motion/layout-animations/#shared-layout-animations" target='_blank'>Framer Motion: Shared Layout Animations</a></Footnotes>


Animate Presence


import { Visualizer } from '../components/visualizer'
import { AnimatePresenceComp } from '../components/animate-presence'

# Animate Presence

`AnimatePresence` allows components to have exit animations when they're removed from the React tree.

<Visualizer Comp={AnimatePresenceComp} reload={false}>
```tsx showLineNumbers title="basic-animate-presence.tsx" {9}
import { AnimatePresence, motion } from 'framer-motion'

// Basic usage
<AnimatePresence>
  {isShown && (
    <motion.div
      initial={{ opacity: 0, x: 100 }}
      animate={{ opacity: 1, x: 0 }}
      exit={{ opacity: 0, x: -100 }}
    />
  )}
</AnimatePresence>
```

```tsx showLineNumbers title="slideshow.tsx" {6}
import { AnimatePresence, motion } from 'framer-motion'

// Slideshow usage
<AnimatePresence mode="wait">
  <motion.div
    key={`slide-${activeSlide}`}
    initial={{ y: 20, filter: 'blur(10px)', opacity: 0 }}
    animate={{ y: 0, filter: 'blur(0)', opacity: 1 }}
    exit={{ y: -40, filter: 'blur(10px)', opacity: 0 }}
  >
    <SlideContent content={content[activeslide]} />
  </motion.div>
</AnimatePresence>
```
</Visualizer>

## Modes
- `sync` (Default) Children animate in/out as soon as they're added/removed.
- `wait` The entering child will wait until the exiting child has animated out.
- `popLayout` Exiting children will be "popped" out of the page layout. This allows surrounding elements to move to their new layout immediately.


Scroll Animations


# Scroll Animations

>The key ingredient on every winning website on [awwwards.com](https://www.awwwards.com/).
- Scroll-**linked** animations - Animation directly tied to scroll progress.
- Scroll-**triggered** animations - Animation triggered when element enters/leaves the viewport.



Scroll-linked Animations


import { Visualizer } from '../components/visualizer'
import { ScrollLinkedAnimations } from '../components/scroll-linked-animations'
import { Footnotes } from '../components/footnotes'

# Scroll-linked Animations

Scroll-linked animations are created using motion values and the `useScroll` hook.

<Visualizer Comp={ScrollLinkedAnimations} reload={false}>
```tsx showLineNumbers {6, 8-12}
import { useRef } from 'react'
import { useScroll, useTransform } from 'framer-motion'

const scrollTargetRef = useRef(null)

const { scrollYProgress } = useScroll({ target: scrollTargetRef })

const rotate = useTransform(
  scrollYProgress,   // Input: The scroll progress
  [0, 1],            // Input range: 0 (top of the target) to 1 (bottom of the target)
  [0, 360]           // Output range: rotate from 0 degrees to 360 degrees
)
                     // Example: When scroll progress reach 0.5,
                     // then the rotation would be 180 degress

// This is the scroll target
<div ref={scrollTargetRef}>
    <motion.div style={{ rotate }}>
      I'm rotating as you scroll!
    </motion.div>
</div>

```
</Visualizer>

`useScroll` + `useTransform` + `sticky` = `awwwards`

<Footnotes className='text-left'>Read more: <a href="https://www.framer.com/motion/use-scroll/" target="_blank">Framer Motion: useScroll</a></Footnotes>


Scroll-triggered Animations


import { Visualizer } from '../components/visualizer'
import { ScrollTriggeredAnimations } from '../components/scroll-triggered-animations'
import { Footnotes } from '../components/footnotes'

# Scroll-triggered Animations

The `whileInView` prop can be used to create scroll-triggered animations

<Visualizer Comp={ScrollTriggeredAnimations} reload={false}>
```tsx showLineNumbers {5, 10-11}
import { motion } from 'framer-motion'

<motion.div
  initial={{ opacity: 0 }}
  whileInView={{ opacity: 1 }}
/>

<motion.div
  initial={{ opacity: 0, y: 40 }}
  whileInView={{ opacity: 1, y: 0 }}
  viewport={{ amount: 0.8, once: true }}
/>

```
</Visualizer>

<Footnotes className='text-left'>Read more: <a href="https://www.framer.com/motion/scroll-animations/#scroll-triggered-animations" target="_blank">Framer Motion: Scroll-triggered Animations</a></Footnotes>


Framer Motion Recipes


# Framer Motion Recipes

Learn how to build beautiful animations by looking at other people's work.

- [Aceternity UI](https://ui.aceternity.com/)
- [Magic UI](https://magicui.design/)
- [BuildUI: Recipes](https://buildui.com/recipes)
- [Frostin](https://www.frostin.dev/)
- [Oliver Larose](https://www.youtube.com/@olivierlarose1)
- [Vaun Blu](https://x.com/vaunblu)
- [jhey](https://x.com/jh3yy)

## Courses
- [Animations for the Web](https://animations.dev/)


References


import { Footnotes } from '../components/footnotes'

# References

- [Animations for the Web: Vault](https://animations.dev/vault)
- [Rauno Freiberg: Invisible Details of Interaction Design](https://rauno.me/craft/interaction-design)
- [Emil Kowalski: Great Animations](https://emilkowal.ski/ui/great-animations)
- [Motion One: Blog](https://motion.dev/blog)
- [Motion One: Performance](https://motion.dev/docs/performance)
- [Nanda Syahrasyad: The Power of Keys in Framer Motion](https://www.nan.fyi/keys-in-framer-motion)
- [web.dev: Rendering Performance](https://web.dev/articles/rendering-performance)
- [Pedro Duarte](https://ped.ro/)


Thank You


import { TextHeading } from '@/components/shared/slides/text-heading'

<TextHeading>Thank you</TextHeading>



Sharing Session: Framer Motion.

by Muhammad Ilham Mubarak (Aang)