animate-css-styled-components

simple port of animate css for styled-components

instalation

install animate-css-styled-components

[sudo] npm i --save animate-css-styled-components

How to use

import animate-css-styled-components module calling global animations

import { Wobble, FadeIn, FadeOut } from 'animate-css-styled-components';

See how import specifics animations here.

Now, this animation is a component and you can encompassing the desired content within the component.

Example:

  <Wobble duration="0.8s" delay="1s">
    <Card>
      card content...
    </Card>
  </Wobble>

Props

• duration
  • prop for represent animation-duration
  • default 1s
• delay
  • prop for represent animation-delay
  • default 0s
• timingFunction
  • prop for represent animation-timing-function
  • default ease
• iterationCount
  • prop for represent animation-iteration-count
  • default 1
• direction
  • prop for represent animation-direction
  • default normal
• fillMode
  • prop for represent animation-fill-mode
  • default both
• playState
  • prop for represent animation-play-state
  • default running
• display
  • prop for represent display css property
  • default block

Animate - HOC

For convenience you can use Animate HOC to use animations stacked, you could pass a unique component to Animation prop or an array of animations, example:

  import Animate, {
    Flash,
    Bounce
  } from 'animate-css-styled-components';

  <Animate 
    Animation={[Flash, Bounce]} 
    duration="0.8s" 
    delay="0.2s">
    <Card>
      card content...
    </Card>
  </Animate>

In this example that you could see here, the Bounce Animation will run after when Flash animation is finished, respecting the duration time + delay time, duration and delay are same for all animations, but you could pass diferents values to each animation prop, look:

  import Animate, {
    Flash,
    Bounce,
    FadeOut,
    FadeIn
  } from 'animate-css-styled-components';

  <Animate 
    Animation={[Flash, Bounce, FadeOut, FadeIn]}
    duration={["0.8s", "3s", "2s", "0.4s"]}
    delay={["0.2s", "0.1s", "0.5s", "1s"]}>
    <Card>
      card content...
    </Card>
  </Animate>

See this example here

Don't forget, you coul pass any animations props as single string if the value are same for all animations stacked or an array of values.

Examples - Storybook

See all examples here

How to create custom styled animations

You can import BaseAnimation component and create your custom animation

Example:

  import { BaseAnimation } from 'animate-css-styled-components';

  //create your custom animation
  const SlideOutDownAnimation = keyframes`
    from {
      transform: translate3d(0, 0, 0);
    }

    to {
      visibility: hidden;
      transform: translate3d(0, 100%, 0);
    }
  `;

  //extend BaseAnimation component and create
  //your custom styled animation
  const SlideOutDown = styled(BaseAnimation)`
    animation-name: ${SlideOutDownAnimation};
  `;

  //export your custom styled animation  
  export default SlideOutDown;

now your animation is a styled-component and you can use this like any other styled-component, passing the all BaseAnimation props.

Made with love and styled-components!