Transition Timing Function

Utilities for controlling the easing of CSS transitions.

Usage

Use transitionTimingFunction={timingFn} utilities to control an element's easing curve.

<x.button
  transition
  transitionDuration={700}
  transitionTimingFunction="ease-in"
>
  Hover me
</x.button>
<x.button
  transition
  transitionDuration={700}
  transitionTimingFunction="ease-out"
>
  Hover me
</x.button>
<x.button
  transition
  transitionDuration={700}
  transitionTimingFunction="ease-in-out"
>
  Hover me
</x.button>

Responsive

To control an element's transition-timing-function at a specific breakpoint, use responsive object notation. For example, adding the property transitionTimingFunction={{ md: "ease-in" }} to an element would apply the transitionTimingFunction="ease-in" utility at medium screen sizes and above.

<x.div transitionTimingFunction={{ md: 'ease-in' }} />

For more information about xstyled's responsive design features, check out Responsive Design documentation.

Customizing

Transition Properties

If you'd like to customize your values for transition properties, use the theme.transitionProperties section of your theme.

  // theme.js

  export const theme = {
    transitionProperties: {
      // ...
      colors: ['background-color', 'border-color', 'color', 'fill', 'stroke'],
      opacity: ['opacity'],
      shadow: ['box-shadow'],
      transform: ['transform'],
+     dialogs: ['box-shadow', 'transform'],
    },
  }

If you don't want to customize it, a set of transitionProperties is already defined in default theme:

const defaultTheme = {
  // ...
  transitionProperties: {
    default: [
      'background-color',
      'border-color',
      'color',
      'fill',
      'stroke',
      'opacity',
      'box-shadow',
      'transform',
    ],
    colors: ['background-color', 'border-color', 'color', 'fill', 'stroke'],
    opacity: ['opacity'],
    shadow: ['box-shadow'],
    transform: ['transform'],
  },
}

Styled bindings

Automatic

Using xstyled's styled, all timing functions defined are automatically bound to transition-timing-function attribute:

import styled from '@xstyled/...'

const Button = styled.button`
  transition-timing-function: ease-in;
`

To learn more about styled syntax, read styled syntax documentation.

Manual

It is possible to manually bind a timing function using th.timingFunction utility:

import styled from '...'
import { th } from '@xstyled/...'

const Button = styled.button`
  transition: color ${th.timingFunction('ease-in')} 150ms;
`

Hooks

Get a timing function in any component using useTimingFunction hook:

import { useTimingFunction } from '@xstyled/...'

function Button() {
  const timingFunction = useTimingFunction('ease-in')
}