@UiReact

Installation

The Basics

Themes

Colorations

Foundation

Main View

Components

Charts

Dialogs

Framer Animations

EzForms

Forms

Grids

Typography

Tools

Contributing

Feature request

Framer animations

Package: @uireact/framer-animations

^v0.8.3

‼️ Beta

Set of basic framer motion props that have animations configured to quickly re use animation objects through multiple components.

Installation ⚙️

1. Make sure you install peer dependencies first:

Expand peer dependencies

2. Install package:

npm i -S @uireact/framer-animations

Usage

All animations uses MotionProps type to create the needed animation props so you only pass it to the @UiReact components or you can spread it into any motion component.

Fade-in animations

These animations are executed when component is rendered:

UiReactFadeUp

UiReactFadeDown

UiReactFadeLeft

UiReactFadeRight


  <UiCard motion={UiReactFadeUp}>
    <UiHeading>Card header</UiHeading>
    <UiText>Card content</UiText>
  </UiCard>

Hover animations

These animations are executed when component is hovered:

UiReactHoverScaleUp

UiReactHoverElevate

UiReactHoverDance

UiReactHoverShake


  <UiCard motion={{ ...UiReactHoverScaleUp }}>
    <UiHeading>Card header</UiHeading>
    <UiText>Card content</UiText>
  </UiCard>

Tap animations

These animations are executed when component is clicked:

UiReactTapScaleDown

UiReactTapPush


  <UiCard motion={{ ...UiReactTapScaleDown }}>
    <UiHeading>Card header</UiHeading>
    <UiText>Card content</UiText>
  </UiCard>

On-View animations

These animations are executed every time the component enters the view:

UiReactViewFloat ∞

UiReactViewPulse ∞

UiReactViewRotating ∞

UiReactViewDancing ∞

UiReactViewShaking ∞

UiReactViewAppearUp

UiReactViewAppearLeft

UiReactViewAppearRight


  <UiCard motion={{ ...UiReactViewFloat }}>
    <UiHeading>Card header</UiHeading>
    <UiText>Card content</UiText>
  </UiCard>

∞ = Animation repeats

Usage with UiIcon

Some icons play very well with a a few animations like these ones:

Rotating:


  <UiIcon icon="SettingsBig" category="tertiary" size="xlarge" motion={UiReactViewRotating} />

Dancing:


  <UiIcon icon="BellRing" category="tertiary" size="xlarge" motion={UiReactViewDancing} />

Shake on hover:


  <UiIcon icon="ShoppingBasket" category="tertiary" size="xlarge" motion={UiReactHoverShake} />

We are working on animations for icons, that animate the actual SVG paths, stay tuned for that future release 🚀

Merge multiple animations

Using these objects you CAN'T merge objects for the same animation states because the later would override the previous one for instace:

Merge 2 fade-in animations won't work:

❌ { ...UiReactFadeUp, ...UiReactFadeDown}

Although merging different state animatios such as fade-in animation, hover and tap animation will work:

✅ { ...UiReactFadeUp, ...UiReactHoverScaleUp, ...UiReactTapScaleDown}

Example merging animations


  <UiCard motion={{ 
      ...UiReactViewFloat, 
      ...UiReactTapScaleDown, 
      ...UiReactHoverScaleUp
  }}>
    <UiHeading>Card header</UiHeading>
    <UiText>Card content</UiText>
  </UiCard>

In a motion component

You can use this animation objects without @uireact library, For example in a simple motion component:

  // Using it as is:
  <motion.div style={{backgroundColor: '#000000'}} {...UiReactFadeUp}>
    <UiHeading>Card header</UiHeading>
    <UiText>Card content</UiText>
  </motion.div>

  // Customizing some props:

  const custom = {...UiReactFadeUp, transition: { delay: 2 }};

  <motion.div style={{backgroundColor: '#000000'}} {...custom}>
    <UiHeading>Card header</UiHeading>
    <UiText>Card content</UiText>
  </motion.div>

Animations exported

These are the animations exported:

import {
  UiReactFadeUp,
  UiReactFadeDown,
  UiReactFadeLeft,
  UiReactFadeRight,
  UiReactHoverScaleUp,
  UiReactHoverElevate,
  UiReactTapScaleDown,
  UiReactTapPush,
  UiReactViewAppearUp,
  UiReactViewAppearLeft,
  UiReactViewAppearRight,
  UiReactViewFloat,
  UiReactViewPulse,
  UiReactViewDancing,
  UiReactViewRotating,
  UiReactViewShaking,
  UiReactHoverDance,
  UiReactHoverShake
} from '@uireact/motion'