Skip to content

Apply CSS keyframe animations to all children of this wrapper component

License

Notifications You must be signed in to change notification settings

cmwall/blanket-animation

Repository files navigation

Blanket Animation

This component is used to apply keyframe animations to all of its children.

For example, you can animate lists just by wrapping your items with this component:

List Animation

Installation

With npm:

npm install blanket-animation --save

With yarn:

yarn add blanket-animation

Usage

Import the component:

import BlanketAnimation from "blanket-animation"

Use the component to wrap items that you want to animate:

<BlanketAnimation>
  <p>Text 1</p>
  <p>Text 2</p>
  <p>Text 3</p>
  <p>Text 4</p>
  <p>Text 5</p>
</BlanketAnimation>

The default settings will be applied to the children of the BlanketAnimation component. Your animation should look similar to the one on the first gif in this README.

When using more than one BlanketAnimation on a page with different animations, make sure to pass the name of the animation for each individual animation. This is to ensure your animations do not conflict.

Settings

If the default animation does not interest you, you can pass in your own keyframe animation as well as other settings as props.

Animation

This is the keyframe animation that you want applied to the children. It should be a multiline string with only the keyframe object.

DO NOT SUPPLY THE KEYFRAME KEYWORD OR THE NAME OF THE ANIMATION.

Default:

`{
  from { opacity: 0; transform: translateY(-10px); }
  to { opacity: 1; transform: translateY(0); }
}`

Example value:

`{
  0% { opacity: 0; transform: translateX(-1000px) translateY(-400px);  }
  50% { opacity: 0.5; transform: translateX(200px) translateY(200px); }
  80% { opacity: 0.5; transform: translateX(-50px) translateY(-50px); }
  100% { opacity: 1; transform: translateX(0) translateY(0);}
}`

Example usage:

<BlanketAnimation
  animation={`{
    0% { opacity: 0; transform: translateX(-1000px) translateY(-400px);  }
    50% { opacity: 0.5; transform: translateX(200px) translateY(200px); }
    80% { opacity: 0.5; transform: translateX(-50px) translateY(-50px); }
    100% { opacity: 1; transform: translateX(0) translateY(0);}
  }`}
>
  <p>1</p>
  <p>2</p>
  <p>3</p>
</BlanketAnimation>

This will produce something like:

Custom Animation

Animation Name

This is the name of your animation (in CSS). It is a plain string. You should pass unique animation names for unique animations. If you are intending on using the default animation, you do not need to pass this prop.

Default: "blanketAnimationFadeIn"

Example value: "customAnimationName"

Example usage:

<BlanketAnimation animationName="customAnimationName">
  <p>1</p>
  <p>2</p>
  <p>3</p>
</BlanketAnimation>

Delay

How long to delay the start of the animation (in seconds).

Default: 0

Example value: 2.5

Example usage:

<BlanketAnimation delay={2.5}>
  <p>1</p>
  <p>2</p>
  <p>3</p>
</BlanketAnimation>

Duration

How long the animation will execute for each child component.

Default: 1

Example value: 0.3

Example usage:

<BlanketAnimation duration={0.3}>
  <p>1</p>
  <p>2</p>
  <p>3</p>
</BlanketAnimation>

Delay Offset

How long the animations are delayed between each child. In other words, the delay between animation 1 starting and animation 2 starting.

Default: 0.1

Example value: 1

Example usage:

<BlanketAnimation delayOffset={1}>
  <p>1</p>
  <p>2</p>
  <p>3</p>
</BlanketAnimation>

Initial Style

An object describing the initial styling of each child component.

Initial style is always applied by the default value unless passed in as a prop. If you do not intend to add the initial style of opacity 0, you must pass your own style object in.

Default:

{ opacity: 0 }

Example value:

{ transform: "translateX(-100px)" }

Example usage:

<BlanketAnimation initialStyle={{ transform: "translateX(-100px)" }}>
  <p>1</p>
  <p>2</p>
  <p>3</p>
</BlanketAnimation>

Completion Style

An object describing the completion style of each child component.

When the animation completes, what should the child component's style look like?

This will be added as an inline style, so keep specificity in mind.

Default:

{}

Example value:

{ transform: "translateX(-20px)" }

Example usage:

<BlanketAnimation completionStyle={{ transform: "translateX(-20px)" }}>
  <p>1</p>
  <p>2</p>
  <p>3</p>
</BlanketAnimation>

SSR

If you are rendering your css through server-side rendering, you can set this prop to true.

THIS WILL NOT ADD THE ANIMATION TO THE STYLESHEET. Instead, it will add only the animation name to the inline styles.

YOU SHOULD NAME YOUR KEYFRAME ANIMATION AND PASS THAT NAME IN. When you set ssr, you should pass the name of the keyframe animation in as animationName. Otherwise, it will look for the default animation name of blanketAnimationFadeIn.

Default: false

Example value: true

Example usage: note the animation name

<BlanketAnimation ssr animationName="exampleAnimationName">
  <p>1</p>
  <p>2</p>
  <p>3</p>
</BlanketAnimation>

About

Apply CSS keyframe animations to all children of this wrapper component

Topics

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published