All Projects → dielduarte → Animate Css Styled Components

dielduarte / Animate Css Styled Components

simple port of animate css for styled-components

Projects that are alternatives of or similar to Animate Css Styled Components

React Css Grid
React layout component based on CSS Grid Layout and built with styled-components
Stars: ✭ 239 (+38.15%)
Mutual labels:  react-component, styled-components
React Terminal Component
Terminal emulator component for React. Emulate a terminal/console with autocomplete, commands, a file-system and themes.
Stars: ✭ 169 (-2.31%)
Mutual labels:  react-component
React Touch Carousel
Ultra-customizable carousel framework for React.JS
Stars: ✭ 158 (-8.67%)
Mutual labels:  react-component
Miniprogram
猫眼电影/Taro/微信小程序/React
Stars: ✭ 163 (-5.78%)
Mutual labels:  react-component
React Awesome Styled Grid
A responsive 8-point grid system layout for React using styled-components
Stars: ✭ 157 (-9.25%)
Mutual labels:  styled-components
Filbert Js
A lightweight(~1kb) css-in-js framework
Stars: ✭ 167 (-3.47%)
Mutual labels:  styled-components
Styled Bootstrap
💅🏻 A styled-component implementation of Bootstrap
Stars: ✭ 154 (-10.98%)
Mutual labels:  styled-components
Cassette
📼 A flexible media player component library for React that requires no up-front config
Stars: ✭ 171 (-1.16%)
Mutual labels:  react-component
2019 12
🎟 급증하는 트래픽에도 안정적인 예약 서비스, Atomic Pattern을 적용한 재사용 가능한 컴포넌트, 실용적인 Testing을 주제로 하는 이벤트 서비스
Stars: ✭ 169 (-2.31%)
Mutual labels:  styled-components
React Tiny Virtual List
A tiny but mighty 3kb list virtualization library, with zero dependencies 💪 Supports variable heights/widths, sticky items, scrolling to index, and more!
Stars: ✭ 2,057 (+1089.02%)
Mutual labels:  react-component
React Paginate
A ReactJS component that creates a pagination
Stars: ✭ 2,169 (+1153.76%)
Mutual labels:  react-component
15 Puzzle
The 15-puzzle is a sliding puzzle that consists of a frame of numbered square tiles in random order with one tile missing, built in react
Stars: ✭ 161 (-6.94%)
Mutual labels:  styled-components
Storybook Addon Styled Component Theme
storybook addon
Stars: ✭ 168 (-2.89%)
Mutual labels:  styled-components
React App Rewire Styled Components
Add the styled-components Babel plugin to your create-react-app app via react-app-rewired
Stars: ✭ 159 (-8.09%)
Mutual labels:  styled-components
React Adminlte Dash
This project is No Longer Maintained. React implementation of AdminLTE themed dashboard
Stars: ✭ 170 (-1.73%)
Mutual labels:  styled-components
React Site Nav
A kick ass site menu powered by styled components inspired by Stripe.
Stars: ✭ 155 (-10.4%)
Mutual labels:  styled-components
Material Ui Datatables
An another React Data tables component.
Stars: ✭ 163 (-5.78%)
Mutual labels:  react-component
Gatsby Theme Superstylin
💅 A Gatsby Theme with styled-components
Stars: ✭ 165 (-4.62%)
Mutual labels:  styled-components
React Elastic Carousel
A flexible and responsive carousel component for react https://sag1v.github.io/react-elastic-carousel
Stars: ✭ 173 (+0%)
Mutual labels:  styled-components
React Tradingview Widget
React component for rendering the TradingView Advanced Real-Time Chart Widget.
Stars: ✭ 170 (-1.73%)
Mutual labels:  react-component

animate-css-styled-components

simple port of animate css for styled-components

Build Status


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!

Note that the project description data, including the texts, logos, images, and/or trademarks, for each open source project belongs to its rightful owner. If you wish to add or remove any projects, please contact us at [email protected].