Animation

Style a component's animation properties

import { animation } from 'jynx'

The animation function gives you control of a component's animation styles, providing support for both the shorthand property and all its sub-properties including animation-name, animation-duration, animation-timing-function, etc.

Usage

To use the animation function, create a component using the AnimationProps type and include the function within it's style argument.

/* Import the function and its corresponding props type */
import { animation, AnimationProps } from 'jynx'


/* Then define a component with the type and include the 
 function within its style argument */
export const Component = styled.div<AnimationProps>`
    ${animation}
  `

/* Or using the legacy functional syntax */
export const Component = styled.div<AnimationProps>((props) => `
    ${animation}
  `)

Props

By default, when passing a string to any animation props, the raw css value is used. This means you can define animation styles however you normally would:

<Component animation={`${example} 0.3s ease-out infinite`} />

When using CSS-in-JS, keyframes should be generated using a utility function. See emotion's keyframes util for more info.

Time-based properties like animationDelay and animationDuration can also be passed a numeric value.

numbers between 0 and 1 or defined as a decimal are converted to seconds (e.g. 0.3 => '0.3s')
numbers above 1 that are integers are converted to milliseconds (e.g. 300 => '300ms')

Additionally, any standard named values (inherit, initial, etc) are available to use, and when using typescript, will show up as suggestions in your IDE.

Types

When working in typescript, use the AnimationProps interface to provide reliable type definitions for your components and value suggestions in your IDE.

interface AnimationProps {
  animation?: StyleProp<CSS.Property.Animation>
  animationName?: StyleProp<CSS.Property.AnimationName>
  animationDuration?: StyleProp<CSS.Property.AnimationDuration<string | 0 | number>>
  animationTimingFunction?: StyleProp<CSS.Property.AnimationTimingFunction>
  animationDelay?: StyleProp<CSS.Property.AnimationDelay<string | 0 | number>>
  animationIterationCount?: StyleProp<CSS.Property.AnimationIterationCount>
  animationDirection?: StyleProp<CSS.Property.AnimationDirection>
  animationFillMode?: StyleProp<CSS.Property.AnimationFillMode>
  animationPlayState?: StyleProp<CSS.Property.AnimationPlayState>
}

API

The animation function allows for a number of props to be passed to your component from directly within your jsx / tsx. Select props also have shorthand aliases that can be used for a more concise syntax.

Prop	Shorthand	CSS Property	Theme Scale
animation		animation
animationName		animation-name
animationDuration		animation-duration
animationTimingFunction		animation-timing-function
animationDelay		animation-delay
animationIterationCount		animation-iteration-count
animationDirection		animation-direction
animationFillMode		animation-fill-mode
animationPlayState		animation-play-state

Examples

/* using plain CSS values */
<Component animation={`${example} 0.3s ease-out infinite`} />


/* using numeric values to generate specific time units */
/* `0.3s` */
<Component animationDelay={0.3} />

/* `600ms` */
<Component animationDuration={600} />


/* based on a conditional */
<Component animationDelay={isOpen ? 0.3 : 0} />


/* using responsive styles */
<Component animationDuration={[300, 600, null, 900]} />

<Component animationTimingFunction={{_: 'ease-out', md: 'ease-in-out', lg: 'cubic-bezier(0.075, 0.82, 0.165, 1)'}} />