
__Framer Motion makes it super easy to create great looking animations, but what if you want to have different animations for different screen sizes? In pure css you can just use a media query but did you know that by utilising the Window.matchMedia API you can use media queries in javascript too? This way we can write responsive animations for javascript animation libraries like Framer Motion & React Spring.__

## Using media queries in javascript

The easiest way to get started with the [window.matchMedia API](https://developer.mozilla.org/en-US/docs/Web/API/Window/matchMedia) in React is to create a custom hook. A lot of UI frameworks like [Material UI](https://material-ui.com/components/use-media-query/) and [Chakra UI](https://chakra-ui.com/docs/hooks/use-media-query) already exposes such a hook, but here's what it could look like if you would write your own:

```jsx
export function useMediaQuery(query) {
  const [matches, setMatches] = useState(false);

  useEffect(() => {
    const media = window.matchMedia(query);
    if (media.matches !== matches) {
      setMatches(media.matches);
    }
    const listener = () => {
      setMatches(media.matches);
    };
    media.addListener(listener);
    return () => media.removeListener(listener);
  }, [matches, query]);

  return matches;
}
```

It takes a media query string (the same way you would write it in css) and returns `true` if the query matches the current screen. If the screen is resized the value will update. Use it in code like this:

```jsx
 const isSmall = useMediaQuery('(min-width: 480px)');
```

A good idea is to set up custom hooks matching the media queries you already use in your css so you don't have to remember the pixel values (was it 479 or 480?):

```jsx
export const useIsSmall = () => useMediaQuery('(min-width: 480px)');
export const useIsMedium = () => useMediaQuery('(min-width: 768px)');

/* etc.. /*
```

## Responsive Animation with Variants

Now that we have our hooks setup lets put it all together by making an example using variants to conditionally change based on the media query.

```jsx
import { motion } from 'framer-motion'
import { useIsSmall } from 'src/hooks/utils'

const Component = () => {
	const isSmall = useIsSmall() /* or useMediaQuery('(min-width: 480px)'); */
 
	const variants = isSmall
	? {
	    animate: {
	      opacity: 1,
	      scale: 1,
				y: 0,
	    },
	    exit: {
	      opacity: 1,
	      scale: 1,
				y: 500,
	    },
	  }
	: {
	    animate: {
	      opacity: 1,
	      scale: 1,
	      y: 0,
	    },
	    exit: {
	      opacity: 0,
	      scale: 0.9,
	      y: -10,
	    },
	  };
	
	return (
		<motion.div initial="exit" animate="animate" exit="exit">Animated</div>
	);
}
```

That's it 🙌. You can also use the variable inline `<motion.div animate={isSmall ? { y: 500} : { y: 1000}} />` but I find that using it together with variants is the cleanest way most of the time.




Parallax scrolling has gotten a bad rap, but I believe that's in part because of the very poor implementations out there. As with everything, if we're mindful and make it subtle it can help convey our message more clearly. There's a simple thing you can do to greatly improve the effect: Use a spring-based easing.

Let's take a look at the [Epic React course](https://epicreact.dev) landing page:

<video playsInline autoPlay loop muted width="710" style={{ width: '100%', maxWidth: 710, marginBottom: 20}}>
    <source src="/blog/spring-parallax-framer-motion-guide/epicreact.mp4" type="video/mp4" />
    Sorry, your browser doesn't support embedded videos.
</video>

This is an example of a parallax transition implemented the right way. If you scroll super-quickly you will still see the animation, and if you use a mouse-wheel it never stutters. This is because the animation is eased and not mapped 1:1 to the actual scroll. This way the effect looks super nice! (And most importantly, it makes sense on this landing page and helps deliver the message).

Another website that does this right is [Quill.chat](http://quill.chat), notice how when you scroll through the site you get a sense of joy when the elements smoothly slide into view with just the right velocity. Had they not eased the movement if wouldn't have felt as good.

<video playsInline autoPlay loop muted width="710" style={{ width: '100%', maxWidth: 710, marginBottom: 20}}>
    <source src="/blog/spring-parallax-framer-motion-guide/quill.mp4" type="video/mp4" />
    Sorry, your browser doesn't support embedded videos.
</video>

## I'm convinced - How to implement parallax spring easing with react?

You can implement parallax scrolling in a lot of different ways, for this example I'm using my favourite animation framework Framer Motion to create a reusable `<Parallax />` component. You can do similar things with other frameworks like react-spring or as descibed [here](https://developers.google.com/web/updates/2016/12/performant-parallaxing) by Paul Lewis & Robert Flack on the google developer blog. If you already know the basics of parallax scrolling feel free to skip to the section adding the spring easing.

Let's start by creating a component that accept children as a prop.

```tsx
import { ReactNode } from 'react'

type ParallaxProps = {
  children: ReactNode
}

const Parallax = ({ children }: ParallaxProps): JSX.Element => {
  return children
})

export default Parallax
```

Next up we'll import `useViewportScroll` from framer-motion in order to get how far on the page we have scrolled. We'll use this as the input to another framer-motion hook called `useTransform` in order to calculate our parallax values which we'll add to a `motion.div`.

## Using Framer Motion useTransform

[useTransform](https://www.framer.com/api/motion/motionvalue/#usetransform) takes an input value and a transformer, and outputs a new value. For example:

```tsx
  // The output value will always be double that of `x`.
  const y = useTransform(x, value => value * 2)
```

Lets start by using some random values to see that it's working:

```tsx{2,9-12}
import { ReactNode } from 'react'
import { motion, useViewportScroll, useTransform } from 'framer-motion'

type ParallaxProps = {
  children: ReactNode
}

const Parallax = ({ children }: ParallaxProps): JSX.Element => {
  const { scrollY } = useViewportScroll()
  const y = useTransform(scrollY, [100, 200], [0, 500])

  return <motion.div style={{ y }}>{children}</motion.div>
})

export default Parallax
```

In order to find out the correct values we need to add some calculations. The idea is that the component should be centered in it's container when we've scrolled to the middle of the screen, but offset by x pixels when scrolled in either direction.

In order to do this we need two values: what the offsetTop of our element is and the height of the screen. Let's add a ref to our element and use `useLayoutEffect` to save those values when the component is about to mount.

```tsx{1,6,9-12,16-36,39}
import { useState, useRef, useLayoutEffect, ReactNode } from 'react'
import { motion, useViewportScroll, useTransform } from 'framer-motion'

type ParallaxProps = {
  children: ReactNode
  offset?: number
}

const Parallax = ({ children, offset = 50 }: ParallaxProps): JSX.Element => {
  const [elementTop, setElementTop] = useState(0)
  const [clientHeight, setClientHeight] = useState(0)
  const ref = useRef(null)

  const { scrollY } = useViewportScroll()

  // start animating our element when we've scrolled it into view
  const initial = elementTop - clientHeight
  // end our animation when we've scrolled the offset specified
  const final = elementTop + offset

  const y = useTransform(scrollY, [initial, final], [offset, -offset])

  useLayoutEffect(() => {
    const element = ref.current
    // save our layout measurements in a function in order to trigger
    // it both on mount and on resize
    const onResize = () => {
      // use getBoundingClientRect instead of offsetTop in order to
      // get the offset relative to the viewport
      setElementTop(element.getBoundingClientRect().top + window.scrollY || window.pageYOffset)
      setClientHeight(window.innerHeight)
    }
    onResize()
    window.addEventListener('resize', onResize)
    return () => window.removeEventListener('resize', onResize)
  }, [ref])

  return (
    <motion.div ref={ref} style={{ y }}>
      {children}
    </motion.div>
  )
})

export default Parallax
```

There's a lot going on here so let's break it down.

<ol>
  <li>We've added an <em>offset</em> prop to specify how strong we want our effect to be.</li>

  <li>We create a ref that we'll use to measure our element</li>

  <li>We setup our state where we'll save elementTop and clientHeight.</li>

  <li>We add a useLayoutEffect where we set those values so we can calculate the start and end for our transformer.</li>

  <li>Finally we put it all together in the useTransform function to get our new <em>y</em> value.</li>
</ol>

## Adding spring easing with useSpring

In order to get the smooth easing we talked about earlier we need to transform our new `y` value with a spring. We can do it with the useSpring hook.

```tsx{2,21-23}
import { useState, useRef, useLayoutEffect, ReactNode } from 'react'
import { motion, useViewportScroll, useTransform, useSpring } from 'framer-motion'

type ParallaxProps = {
  children: ReactNode
  offset?: number
}

const Parallax = ({ children, offset = 50 }: ParallaxProps): JSX.Element => {
  const [elementTop, setElementTop] = useState(0)
  const [clientHeight, setClientHeight] = useState(0)
  const ref = useRef(null)

  const { scrollY } = useViewportScroll()

  // start animating our element when we've scrolled it into view
  const initial = elementTop - clientHeight
  // end our animation when we've scrolled the offset specified
  const final = elementTop + offset

  const yRange = useTransform(scrollY, [initial, final], [offset, -offset])
  // apply a spring to ease the result
  const y = useSpring(yRange, { stiffness: 400, damping: 90 })

  useLayoutEffect(() => {
    const element = ref.current
    // save our layout measurements in a function in order to trigger
    // it both on mount and on resize
    const onResize = () => {
      // use getBoundingClientRect instead of offsetTop in order to
      // get the offset relative to the viewport
      setElementTop(element.getBoundingClientRect().top + window.scrollY || window.pageYOffset)
      setClientHeight(window.innerHeight)
    }
    onResize()
    window.addEventListener('resize', onResize)
    return () => window.removeEventListener('resize', onResize)
  }, [ref])

  return (
    <motion.div ref={ref} style={{ y }}>
      {children}
    </motion.div>
  )
})

export default Parallax
```

## Parallax accessibility: useReducedMotion

When designing products with motion we have to be careful and think about people who might have problems viewing things that move around. Some people can get dizzy or nauseous. You can specify this by a setting in you operating system, for example on MacOS the setting is in "Accessibility > Reduce Motion".

Luckily there's a Media Query for this called `prefers-reduced-motion`, and a useful hook exported by framer motion called `useReducedMotion`.

If the user prefers reduced motion we will render the children directly without our parallax container:

```tsx{2,10,34-37}
import { useState, useRef, useLayoutEffect, ReactNode } from 'react'
import { motion, useViewportScroll, useTransform, useSpring, useReducedMotion } from 'framer-motion'

type ParallaxProps = {
  children: ReactNode
  offset?: number
}

const Parallax = ({ children, offset = 50 }: ParallaxProps): JSX.Element => {
  const prefersReducedMotion = useReducedMotion()
  const [elementTop, setElementTop] = useState(0)
  const [clientHeight, setClientHeight] = useState(0)
  const ref = useRef(null)

  const { scrollY } = useViewportScroll()

  const initial = elementTop - clientHeight
  const final = elementTop + offset

  const yRange = useTransform(scrollY, [initial, final], [offset, -offset])
  const y = useSpring(yRange, { stiffness: 400, damping: 90 })

  useLayoutEffect(() => {
    const element = ref.current
    const onResize = () => {
      setElementTop(element.getBoundingClientRect().top + window.scrollY || window.pageYOffset)
      setClientHeight(window.innerHeight)
    }
    onResize()
    window.addEventListener('resize', onResize)
    return () => window.removeEventListener('resize', onResize)
  }, [ref])

  // Don't parallax if the user has "reduced motion" enabled
  if (prefersReducedMotion) {
    return <>{children}</>
  }

  return (
    <motion.div ref={ref} style={{ y }}>
      {children}
    </motion.div>
  )
}

export default Parallax
```

## Wrapping up

Our finished component:

<div style={{ background: 'var(--boxBg)', padding: 100 }}>
  <Parallax>
    <p style={{background: 'var(--brand)', color: 'white', padding: 10, textAlign: 'center', borderRadius: 5, fontWeight: 700}}>Parallax</p>
  </Parallax>
</div>

We've learned how we can create a parallax effect with Framer Motion, improve it by applying a spring easing and taking care of the accesibility aspect with useReducedMotion. Check out the full source code of our Framer Motion example in my [git repo](https://github.com/samuelkraft/samuelkraft-next/blob/master/components/parallax.tsx), and make sure to ❤️ the post below if you liked it, or reach out to me on [twitter](https://twitter.com/samuelkraft) for any comments or questions!





Back in 2013 I created this [CodePen](https://codepen.io/samuelkraft/pen/Farhl) of the chat bubble UI from iOS 7's messages app. It has since received an impressive 50k views and 170+ likes, apparently people like to build chat apps 😉. In this post I'll walk you through how it works, while also improving my previous code a bit.

Here's what we're building:

<Messages />

I'm building this in a Next.js/react app with css modules & sass. If you're looking for a more bare-bones css solution check out the codepen above.

Let's start by creating a list of messages, we'll add a `sent` key to our objects in order to differentiate between you own sent messages and the received messages. Add a .shared class for each message, and another class based on the sent key.

```tsx
import cn from 'classnames'
import styles from './messages.module.scss'

const messages = [
  { text: "Hey there! What's up", sent: true },
  { text: 'Checking out iOS7 you know..' },
  { text: 'Check out this bubble!', sent: true },
  { text: "It's pretty cool!" },
  { text: "And it's in css?" },
  { text: "Yeah it's pure CSS &amp; HTML", sent: true },
  { text: "(ok.. almost, I added a tiny bit of JS to remove sibling message tails)", sent: true },
  { text: "Wow that's impressive. But what's even more impressive is that this bubble is really high." },
]

const Messages = (): JSX.Element => (
  <ol className={styles.list}>
    {messages.map(({ text, sent }) => (
      <li key={text} className={cn(styles.shared, sent ? styles.sent : styles.received)}>{text}</li>
    ))}
  </ol>
)

export default Messages
```

That's all we need for the markup, let's create our css (or scss) file and add some styling!

We start by adding some basic styles like a max-width to contain our messages, remove the default list styling and change the display to flex. We do this because then we can make our messages collapse/decrease in width based on the message length by using the `align-self` property. If all messages were block elements they would always be the same size regardless of content.

If you don't already have a theme setup this is also a good place to add some css variables for the message colors and our page background-color. We need to know our page's background-color as we're going to overlay two different elements, one of which should mimic our background to achieve our effect.

```scss
.list {
  --sentColor: #0b93f6;
  --receiveColor: #e5e5ea;
  --bg: #fff;

  display: flex;
  flex-direction: column;
  max-width: 450px;
  margin: 0 auto;
  padding: 0;
  list-style: none;
}

[data-theme='dark'] {
  .list {
    --bg: #161515;
  }
}
```

<Warning type="info">
  If you don't know your background-color or if your background is an image I'm pretty sure you can accomplish the same effect with css <Link href="https://developer.mozilla.org/en-US/docs/Web/CSS/mask-image">mask-image</Link> and a background-gradient. Let me know if this is something you'd like to see, or why not open a <Link href="https://github.com/samuelkraft/samuelkraft-next">PR</Link>?
</Warning>

There are some shared styles both sending and receiving messages should have, so let's make a .shared class. It's styles are pretty basic; we set the max-width of each message to a little bit more than half of our list width, add some padding and margin etc.

Really the only tricky part about this component are the bubble "tails". We will render them using [psuedo-elements](https://developer.mozilla.org/en-US/docs/Web/CSS/Pseudo-elements) to not add unnecessary items to the DOM. For each tail we are using two psuedo elements, :before for the colored part and :after overlayed on top to "cut out" the colored part.

Since all tails will all have the same size and be positioned absolutely at the bottom of our bubbles let's add that to our shared class.

```scss
.shared {
  position: relative; /* Setup a relative container for our psuedo elements */
  max-width: 255px;
  margin-bottom: 15px;
  padding: 10px 20px;
  line-height: 24px;
  word-wrap: break-word; /* Make sure the text wraps to multiple lines if long */
  border-radius: 25px;

  &:before {
    width: 20px;
  }

  &:after {
    width: 26px;
    background-color: var(--bg); /* All tails have the same bg cutout */
  }

  &:before,
  &:after {
    position: absolute;
    bottom: 0;
    height: 25px; /* height of our bubble "tail" - should match the border-radius above */
    content: '';
  }
}
```

Let's continue to the specific messages, starting with the 'sent' styles. As mentioned before we want to make sure our message collapses if it's a very short one and we can do this by adding  `align-self: flex-end` . Our element will then only take up as much space as the content needs (maxing out at 255px which we set in our shared class), aligned to flex-end which in this case is right. For our receiving message we'll instead use `align-self: flex-start` as we want those aligned to the left.

## Styling our tails

If we take a closer look at the tails we're trying to accomplish we'll notice that there are basically two curved shapes. One curved shape extending from the bottom edge (the colored section, marked as blue below) and another one extending from the outer edge (our cutout/backgrund, marked as green below). Hover the message below and see how the blue creates our tail shape when overlaid with the green one.

<div style={{ padding: '50px', backgroundColor: 'var(--boxBg)', borderRadius: '5px', textAlign: 'center' }}>
  <TailBreakdown />
  <p style={{margin: 0, opacity: 0.75}}>Hover to arrange tail 👆</p>
</div>

Let's recreate these shapes with our pseudo elements. Start by setting the color of our bordered shape, then set the curve using border-radius, we can mimic the iOS one using different values for the horizontal and vertical axis. Then tweak the `right` value until it's positioned correctly.

Now we need to hide the parts that extend to the right of the bubble. We do this by almost recreating the same shape but filled with our background-color instead, and position it over the previous shape.

```scss
.sent {
  align-self: flex-end;
  color: white;
  background: var(--sentColor);

  &:before {
    right: -7px;
    background-color: var(--sentColor);
    border-bottom-left-radius: 16px 14px;
  }

  &:after {
    right: -26px;
    border-bottom-left-radius: 10px;
  }
}
```

For our received messages we do the same thing but to the left instead of to the right and change the colors.

```scss
.received {
  align-self: flex-start;
  color: black;
  background: var(--receiveColor);

  &:before {
    left: -7px;
    background-color: var(--receiveColor);
    border-bottom-right-radius: 16px 14px;
  }

  &:after {
    left: -26px;
    border-bottom-right-radius: 10px;
  }
}
```

We're almost there but there's one tiny detail left. Notice that when there are multiple messages in a row from the same person there's a tail for each message? We only want to add a tail for the most recent message in that case. Unfortunately there is no "previous sibling selector" in css so we have to go back to our markup and add a `noTail` class. We'll add the class if the next message's sent key is the same as the current message.

```typescript
{messages.map(({ text, sent }, i) => {
  const isLast = i === messages.length - 1
  const noTail = !isLast && messages[i + 1]?.sent === sent
  return (
    <li key={text} className={cn(styles.shared, sent ? styles.sent : styles.received, noTail && styles.noTail)}>
      {text}
    </li>
  )
})}
```
Back in our css we can now hide the tail when the class is applied. We can also optionally decrease the margin a bit so our messages feel more "connected".

```scss
.noTail {
  margin-bottom: 2px;

  &:before,
  &:after {
    opacity: 0;
  }
}
```
That's it! We can now display a list of nicely styled messages, and based on the "sent" key the messages will either display as sending or receiving. If there are multiple messages in a row from the same person only the most recent message will get a tail.

## ✨ Bonus: Animating our messages!

Building a chat app? We can easily animate our component with just a couple of lines of code using [Framer Motion](https://www.framer.com/motion/)!

Wrap your messages in `AnimatePresence` and then make each message a `motion.li`. Apply the `layout` prop to make our messages magically animate smoothly when messages are added or removed. Then specify how the enter animation should look like by adding the initial state (slightly offset with 0 opacity) and the entered state (reset position and full opacity). This time I'm generating the messages with [random-words](https://www.npmjs.com/package/random-words) to make sure our component works with different types of content. [See the full source code on my GitHub](https://github.com/samuelkraft/samuelkraft-next/blob/master/components/animatedmessages.tsx).

```tsx
import { motion, AnimatePresence } from 'framer-motion'
import styles from './messages.module.scss'

const transition = {
  type: 'spring',
  stiffness: 200,
  mass: 0.2,
  damping: 20,
}

const variants = {
  initial: {
    opacity: 0,
    y: 300,
  },
  enter: {
    opacity: 1,
    y: 0,
    transition,
  },
}

const Messages = (): JSX.Element => (
  <AnimatePresence>
    <ol className={styles.list}>
      {messages.map(({ text, sent }) => (
          <motion.li
            key={text}
            className={cn(styles.shared, sent ? styles.sent : styles.received)}
            initial="initial"
            animate="enter"
            variants={variants}
            layout
          >
            {text}
          </motion.li>
        ))}
    </ol>
  </AnimatePresence>
)
```

That's it! If this helped press the like button below or let me know on [twitter](https://twitter.com/samuelkraft).

<AnimatedMessages />



Despite its funny name, If you’ve ever used an iOS device you’ll recognise the [UISegmentedControl](https://developer.apple.com/documentation/uikit/uisegmentedcontrol):

<div style={{ padding: '20px', border: '1px solid var(--border)', borderRadius: '5px', textAlign: 'center' }}>
  <video playsInline autoPlay loop muted width="375" style={{ width: '100%', maxWidth: 375, marginBottom: 20}}>
      <source src="/blog/segmented-control-framer-motion/segmented-control-ios-two.mp4" type="video/mp4" />
      Sorry, your browser doesn't support embedded videos.
  </video>
  <video playsInline autoPlay loop muted width="375" style={{ width: '100%', maxWidth: 375}}>
      <source src="/blog/segmented-control-framer-motion/segmented-control-ios-five.mp4" type="video/mp4" />
      Sorry, your browser doesn't support embedded videos.
  </video>
</div>

In this post I’ll show how to recreate it for web using React and Framer Motion resulting in this (try it out by clicking below!):

<div style={{ padding: '80px 7px 50px', border: '1px solid var(--border)', borderRadius: '5px', textAlign: 'center' }}>
  <SegmentedControl items={["Upcoming", "Past"]} />
  <br />
  <SegmentedControl items={["H", "D", "W", "M", "Y"]} />
</div>

## Our stack

I’m using a Next.js/React/Typescript/SASS/CSS Modules stack but any react project works fine, as we are use Framer Motion for the animations.

## Our finished component

```tsx
import { useState } from 'react'
import { motion, AnimateSharedLayout } from 'framer-motion'
import styles from './segmentedcontrol.module.scss'

type SegmentedControlProps = {
  items: Array<string>
}

const SegmentedControl = ({ items }: SegmentedControlProps): JSX.Element => {
  const [activeItem, setActiveitem] = useState(0)
  return (
    <AnimateSharedLayout>
      <ol className={styles.list}>
        {items.map((item, i) => {
          const isActive = i === activeItem
          return (
            <motion.li
              className={isActive || i === activeItem - 1 ? styles.itemNoDivider : styles.item}
              whileTap={isActive ? { scale: 0.95 } : { opacity: 0.6 }}
              key={item}
            >
              <button onClick={() => setActiveitem(i)} type="button" className={styles.button}>
                {isActive && <motion.div layoutId="SegmentedControlActive" className={styles.active} />}
                <span className={styles.label}>{item}</span>
              </button>
            </motion.li>
          )
        })}
      </ol>
    </AnimateSharedLayout>
  )
}

export default SegmentedControl
```

```scss
/* CSS variables from my global config */
:root {
  --boxBg: #f3f3f3;
  --activeBg: #292929;
  --text: #000;
  --shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

[data-theme='dark'] {
  --boxBg: #1f1e1d;
  --activeBg: #292929;
  --text: #fff;
}
```

```scss
.list {
  display: inline-flex;
  margin: 0;
  padding: 3px;
  list-style: none;
  background-color: var(--boxBg);
  border-radius: 10px;
}

.item {
  position: relative;
  margin-bottom: 0;
  line-height: 1;

  &:after {
    position: absolute;
    top: 15%;
    right: -0.5px;
    display: block;
    width: 1px;
    height: 70%;
    background-color: var(--border);
    transition: opacity 200ms ease-out;
    content: '';
  }

  &:last-of-type {
    &:after {
      display: none;
    }
  }
}

.itemNoDivider {
  composes: item;

  &:after {
    opacity: 0;
  }
}

.button {
  position: relative;
  margin: 0;
  padding: 7px 30px;
  color: var(--text);
  line-height: 1;
  background: transparent;
  border: none;
  outline: none;

  &:hover,
  &:focus {
    cursor: pointer;
  }
}

.label {
  position: relative;
  z-index: 2;
}

.active {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 1;
  background-color: var(--inputBg);
  border-radius: 7px;
  box-shadow: var(--shadow);
  content: '';
}
```

There are a few things happening here so let’s walk it through.

First we make sure our component accepts an array of items as props, then we initialise our state to keep track of which item is selected with react `useState`.

```tsx
import { useState } from 'react'

type SegmentedControlProps = {
  items: Array<string>
}

const SegmentedControl = ({ items }: SegmentedControlProps): JSX.Element => {
  const [activeItem, setActiveitem] = useState(0)
  return ()
}

```

<Warning type="info">
In a real-world use case you might opt to keep track of the active item by the page pathname so that you can link to a specific page, in that case you'd get the current pathname with your respective routing solution and then compare it to your items. For Next.js something like:


```tsx
/* example.com/two */

import { useRouter } from 'next/router'

const { pathname } = useRouter()

const items = ['one', 'two', 'three']
{items.map(item => {
  const activeItem = pathname.contains(item)
})}

```
</Warning>

Moving on we wrap our component with `AnimateSharedLayout` from [Framer Motion](https://www.framer.com/motion/), it’s a dead simple way of animating between different elements or components. If you’ve used keynote you can think of it like the “Magic Move” transition. In this example we’re using it to animate our active background state when switching items.

We'll map over our items, get the current active tab by comparing the item index to our state, and for each item return a `motion.li`. [Motion components](https://www.framer.com/api/motion/component/) are used to specify how we want our animation to look like by passing props like `animate` (how the animation will finish), `initial` (our initial state of the animation), `exit` (how our animation looks like when the component dismounts) etc. There are also helper props for things like hover and taps like `whileHover` and `whileTap`. In this example we're using the `whileTap` prop for two things depending on if the item is active or not. If it's active, scale the active state down slightly so the user sees that the UI responds otherwise change the opacity slightly.

If showing more than 2 items, we want to show dividers between the items. We can do this in CSS by using an :after psuedo element. That way we don't need to add any extra elements to the original DOM. Let's change classNames for our motion.li depending on if the divider should be visible or not. There are two scenarios where it should not be visible: 1: when the current item is selected and 2: it's the item before the current selected one. This is because we're positioning the divider to the right of each item (`right: -0.5px`). Our last item does not need any divider so we can remove it with the `:last-of-type` selector. Let's also add an opacity transition so that the dividers fade smootly when switching items.

```tsx
return (
  <AnimateSharedLayout>
    <ol className={styles.list}>
      {items.map((item, i) => {
        const isActive = i === activeItem
        return (
          <motion.li
            className={isActive || i === activeItem - 1 ? styles.itemNoDivider : styles.item}
            whileTap={isActive ? { scale: 0.95 } : { opacity: 0.6 }}
            key={item}
          >
            …
          </motion.li>
        )
      })}
    </ol>
  </AnimateSharedLayout>
)
```
```scss
.item {
  position: relative;
  margin-bottom: 0;
  line-height: 1;

  &:after {
    position: absolute;
    top: 15%;
    right: -0.5px;
    display: block;
    width: 1px;
    height: 70%;
    background-color: var(--border);
    transition: opacity 200ms ease-out;
    content: '';
  }

  &:last-of-type {
    &:after {
      display: none;
    }
  }
}

.itemNoDivider {
  composes: item; /* css modules syntax, compiles to something like "class="item itemNoDivider" */

  &:after {
    opacity: 0;
  }
}
```



We'll add a button inside each item in order to change item on click. If the current item is the active item we add a `motion.div` for rendering the active background styles. This is where we are telling AnimatePresence which element to animate by passing a `layoutId`. It can be any string but needs to match for all elements that should share the same transition. Let's add some styling to the active div and put our item text inside a span in order to position it above the background div with CSS.

```tsx
<button onClick={() => setActiveitem(i)} type="button" className={styles.button}>
  {isActive && <motion.div layoutId="SegmentedControlActive" className={styles.active} />}
  <span className={styles.label}>{item}</span>
</button>
```

```scss
.button {
  position: relative;
  margin: 0;
  padding: 7px 30px;
  color: var(--text);
  line-height: 1;
  background: transparent;
  border: none;
  outline: none;

  &:hover,
  &:focus {
    cursor: pointer;
  }
}

.label {
  position: relative;
  z-index: 2;
}

.active {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 1;
  background-color: var(--activeBg);
  border-radius: 7px;
  box-shadow: var(--shadow);
  content: '';
}
```

When clicking to change items our background will now animate magically 🪄. If you try to click the same item that's already active it will scale down slightly. If there are more than 2 items, we'll have dividers between the items that are not siblings to the active one. When switching items the dividers will fade smoothly.

## Our complete component

<div style={{ padding: '80px 7px 50px', border: '1px solid var(--border)', borderRadius: '5px', textAlign: 'center' }}>
  <SegmentedControl items={["One", "Two", "Three"]} />
</div>

The full source code is [available on my GitHub](https://github.com/samuelkraft/samuelkraft-next/blob/master/components/segmentedcontrol.tsx).

Creating transitions is super fun with Framer Motion and I am especially excited for the possibilities around AnimatedSharedLayout. It makes it extremely easy to create fluid interfaces and I'll be showing more examples of this in the future!

If this helped press the ❤️ below or let me know on [Twitter](https://twitter.com/samuelkraft)



Click around on this webpage and you'll notice a small transition between each page. In this post I'll show you how to create this page transition using Framer Motion.

## Let's get started

We'll start by installing framer motion

```bash
yarn add framer-motion
```

Then create a new component, PageTransition.tsx to house our transition. We want to animate any children of this component so we'll pass children as a prop.

```tsx
import { ReactNode } from 'react'

const PageTransition = ({ children }: { children: ReactNode }): JSX.Element => <div>{children}</div>

export default PageTransition
```

Use this component as a wrapper to any pages you want to animate. In my case I'll add it to my [Page component](https://github.com/samuelkraft/samuelkraft-next/blob/master/components/page.tsx#L29), which sets the layout and shows my footer on all pages.

```tsx{5}
const Page = ({ children }: PageProps): JSX.Element => (
  <div className={styles.container}>
    <Header />
    <main className={styles.main}>
      <PageTransition>{children}</PageTransition>
    </main>
    <Footer />
  </div>
)
```

Framer motion have a couple of different apis to use, and since we want to animate the entry of our children we'll use [AnimatePresence](https://www.framer.com/api/motion/animate-presence/) and [motion components](https://www.framer.com/api/motion/component/). AnimatePresence will animate components when they are added or removed from the React tree. Let's replace our placeholder div with AnimatePresence and nest a motion component that will contain our animation logic.

```tsx
import { ReactNode } from 'react'
import { AnimatePresence, motion } from 'framer-motion'

const PageTransition = ({ children }: { children: ReactNode }): JSX.Element => (
  <AnimatePresence>
    <motion.div>
      {children}
    </motion.div>
  </AnimatePresence>
)

export default PageTransition
```

[Motion components](https://www.framer.com/api/motion/component/) are used to specify how we want our animation to look like by passing props like animate (how the animation will finish), initial (our initial state of the animation), exit (how our animation looks like when the component dismounts) etc.

As an example, passing these values we can animate our component from hidden to visible:

```tsx
<motion.div initial={{ opacity: 0 }} animate={{ opacity: 1 }} />
```

In our specific case we want to animate the entry of the page as if it was sliding up. We can do this by changing our initial prop's y value, and then resetting it in animate.

```tsx
<motion.div initial={{opacity: 0, y: 8 }} animate={{ opacity: 1, y: 0 }}>
```

Navigate to a different page and our animation is working! However the transition needs some love. Framer motion automatically applies a transition based on what you're animating, as an example if you're just animating opacity it's automatically an easing and in the case of transforms it uses a spring. Let's change our transition by applying our own custom easing function. I recommend [cubic-bezier.com](http://cubic-bezier.com) as a great interactive website where you can create your own easings. We want our transition to start fast and then ease out so let's add a transition property with a duration and our custom easing:

```tsx
<motion.div
  initial={{opacity: 0, y: 8 }}
  animate={{
    opacity: 1,
    y: 0,
    transition: {
      duration: 0.4,
      ease: [0.61, 1, 0.88, 1],
    }
  }}
>
```

Now the transition feels a lot better ✌️.

## Improving organisation

We can improve this code further by using framer [variants](https://www.framer.com/api/motion/component/#animationprops.variants), it allows us to keep our animation logic outside out render function in an object organised by name.

Let's create a variable and add our logic. We can name our variants whatever we want, in this case I'll call them 'initial' and 'enter'.

```tsx
const variants = {
  initial: {
    opacity: 0,
    y: 8,
  },
  enter: {
    opacity: 1,
    y: 0,
    transition: {
      duration: 0.4,
      ease: [0.61, 1, 0.88, 1],
    },
  },
}
```

In our motion component we'll then pass our variant variable and can then simply reference our variant names in intial & animate:

```tsx
<motion.div initial="initial" animate="enter" variants={variants}>
  {children}
</motion.div>
```

Our complete final example now looks like this:
```tsx
import { ReactNode } from 'react'
import { AnimatePresence, motion } from 'framer-motion'

const variants = {
  initial: {
    opacity: 0,
    y: 8,
  },
  enter: {
    opacity: 1,
    y: 0,
    transition: {
      duration: 0.4,
      ease: [0.61, 1, 0.88, 1],
    },
  },
}

const PageTransition = ({ children }: { children: ReactNode }): JSX.Element => (
  <AnimatePresence>
    <motion.div initial="initial" animate="enter" variants={variants}>
      {children}
    </motion.div>
  </AnimatePresence>
)

export default PageTransition
```

Feel free to play with transitions and easings, maybe add an exit animation as well? As you've noticed framer motion makes it super easy to create fun and performant transitions. 👌
