Animations in Office UI Fabric

Working on an assignment and rummaging through Google search results I ran into this page. Apparently, Office UI Fabric supports animation. But the documentation does not list out any details as to what classes to use, neither are there any examples. More search and I find this issue having similar complaint as mine. The issue also lists a sample code using CSS-in-JS to implement animation. Lets take a look.

First lets import animation modules from Office UI Fabric.

import { AnimationStyles, AnimationClassNames, AnimationVariables } from 'office-ui-fabric-react/lib/Styling';

Lets take a look at what each modules does.

AnimationStyles

This module contains all the standard Office UI Fabric animations as JSON objects with predefined keyframes. Below are the styles we can use.

slideRightIn10
slideRightIn20
slideRightIn40
slideRightIn400
slideLeftIn10
slideLeftIn20
slideLeftIn40
slideLeftIn400
slideUpIn10
slideUpIn20
slideDownIn10
slideDownIn20
slideRightOut10
slideRightOut20
slideRightOut40
slideRightOut400
slideLeftOut10
slideLeftOut20
slideLeftOut40
slideLeftOut400
slideUpOut10
slideUpOut20
slideDownOut10
slideDownOut20
scaleUpIn100
scaleDownIn100
scaleUpOut103
scaleDownOut98
fadeIn100
fadeIn200
fadeIn400
fadeIn500
fadeOut100
fadeOut200
fadeOut400
fadeOut500
rotate90deg
rotateN90deg

To use AnimationStyles you use the CSS-in-JS approach with the JavaScript spread operator.

const btnStyleSlideIn: IButtonStyles = {
    root: {
        ...AnimationStyles.slideLeftIn400
    }
};

Below is the sample React code implementation.

public render(): React.ReactElement {
    const btnStyleSlideIn: IButtonStyles = {
        root: {
            ...AnimationStyles.slideLeftIn400
        }
    };
    return (<>
        <PrimaryButton text="Animate"
            onClick={(_) => {
                this.setState({
                    enableAnimation: true
                }, () => {
                    setTimeout(() => {
                        this.setState({
                            enableAnimation: false
                        });
                    }, 2000)
                });
            }}
            disabled={this.state.enableAnimation} />
        <Button text="I am sliding in to left"
            iconProps={{ iconName: 'ChevronLeft' }}
            styles={this.state.enableAnimation ? btnStyleSlideIn : {}} />
    </>);
}

AnimationClassNames

This module contains all the standard Office UI Fabric animation class names. It is similar to AnimationStyles but it just gives you class names rather than the JSON object. Below is the sample React code implementation.

public render(): React.ReactElement {
    return (<>
        <PrimaryButton text="Animate"
            onClick={(_) => {
                this.setState({
                    enableAnimation: true
                }, () => {
                    setTimeout(() => {
                        this.setState({
                            enableAnimation: false
                        });
                    }, 2000)
                });
            }}
            disabled={this.state.enableAnimation} />
        <Button text="I am sliding in to left, using CSS class"
            iconProps={{ iconName: 'ChevronLeft' }}
            className={this.state.enableAnimation ? AnimationClassNames.slideLeftIn400 : ""} />
    </>);
}

AnimationVariables

This module exports duration values and easing functions which can be used in custom animations. You can use these values in your animations. If you log it to browser console you should see something similar to below output.

{
    durationValue1: "0.167s",
    durationValue2: "0.267s",
    durationValue3: "0.367s",
    durationValue4: "0.467s",
    easeFunction1: "cubic-bezier(.1,.9,.2,1)",
    easeFunction2: "cubic-bezier(.1,.25,.75,.9)"
}

Below is a sample React code implementation.

public render(): React.ReactElement {
    const kf: string = keyframes({
        "12.5%": { left: -5 },
        "25%": { left: 5 },
        "37.5%": { left: -2.5 },
        "50%": { left: 2.5 },
        "62.5%": { left: -1 },
        "75%": { left: 1 }
    });
    
    const btnStyleShakeIt: IButtonStyles = {
        root: {
            animationDuration: AnimationVariables.durationValue1, // Use Office UI Fabric animation duration
            animationName: kf
        }
    };

    return (<>
        <PrimaryButton text="Animate"
            onClick={(_) => {
                this.setState({
                    enableAnimation: true
                }, () => {
                    setTimeout(() => {
                        this.setState({
                            enableAnimation: false
                        });
                    }, 2000)
                });
            }}
            disabled={this.state.enableAnimation} />
        <Button text="Shake it!"
            styles={this.state.enableAnimation ? btnStyleShakeIt : {}} />
    </>);
}