All Components

This website hosts native Kendo UI components, built from the ground up with the ultimate performance in mind, intended to be used in the React ecosystem.

Animation Types

The Animation components animate their content by using various animation effects.

The Animation package delivers the following types of animations:

Fade

The Fade Animation animates newly added children by using a fade-in effect.

<style>
 .content {
   width: 100px;
   padding: 10px;
   color: #787878;
   background-color: #fcf7f8;
   font-size: 13px;
   font-family: Helvetica, Arial, sans-serif;
   letter-spacing: 1px;
   text-align: center;
   border: 1px solid rgba(0,0,0,.05);
 }
 </style>
 <div id="app"></div>
class App extends React.Component {
    constructor(props) {
        super(props);

        this.state = { index: 1 };
    }

    onClick = () => {
        this.setState({
            index: this.state.index + 1
        });
    }

    render() {
        const { index } = this.state;

        return (
            <div>
                <dl>
                    <dt>
                        Fade:
                    </dt>
                    <dd>
                        <button className="k-button" onClick={this.onClick}>Animate</button>
                    </dd>
                </dl>

                <Fade>
                    <div className="content" key={index}>{index}</div>
                </Fade>
            </div>
        );
    }
}

ReactDOM.render(
    <App />,
    document.querySelector('my-app')
);

Expand

The Expand Animation animates the scaleY() or scaleX() CSS property of the container element.

<style>
 .content {
   width: 100px;
   padding: 10px;
   color: #787878;
   background-color: #fcf7f8;
   font-size: 13px;
   font-family: Helvetica, Arial, sans-serif;
   letter-spacing: 1px;
   text-align: center;
   border: 1px solid rgba(0,0,0,.05);
 }
 </style>
 <div id="app"></div>
class App extends React.Component {
    constructor(props) {
        super(props);

        this.state = { show: true };
    }

    onClick = () => {
        this.setState({
            show: !this.state.show
        });
    }

    render() {
        const { show } = this.state;

        const children = show ? (<div className="content">CONTENT</div>) : null;

        return (
            <div>
                <dl>
                    <dt>
                        Animate:
                    </dt>
                    <dd>
                        <button className="k-button" onClick={this.onClick}>Animate</button>
                    </dd>
                </dl>

                <Expand>
                    {children}
                </Expand>
            </div>
        );
    }
}

ReactDOM.render(
    <App />,
    document.querySelector('my-app')
);

Push

The Push Animation slides the new component by pushing the old one out.

<style>
 .content {
   width: 100px;
   padding: 10px;
   color: #787878;
   background-color: #fcf7f8;
   font-size: 13px;
   font-family: Helvetica, Arial, sans-serif;
   letter-spacing: 1px;
   text-align: center;
   border: 1px solid rgba(0,0,0,.05);
 }
 </style>
 <div id="app"></div>
class App extends React.Component {
    constructor(props) {
        super(props);

        this.state = { show: 1 };
    }

    onClick = () => {
        this.setState({
            show: !this.state.show
        });
    }

    render() {
        const { show } = this.state;

        const children = show ? (<div className="content">CONTENT</div>) : null;

        return (
            <div>
                <dl>
                    <dt>
                        Push:
                    </dt>
                    <dd>
                        <button className="k-button" onClick={this.onClick}>Animate</button>
                    </dd>
                </dl>

                <Push>
                    {children}
                </Push>
            </div>
        );
    }
}

ReactDOM.render(
    <App />,
    document.querySelector('my-app')
);

Reveal

The Reveal Animation animates the height or width CSS property of the container element.

<style>
 .content {
   width: 100px;
   padding: 10px;
   color: #787878;
   background-color: #fcf7f8;
   font-size: 13px;
   font-family: Helvetica, Arial, sans-serif;
   letter-spacing: 1px;
   text-align: center;
   border: 1px solid rgba(0,0,0,.05);
 }
 </style>
 <div id="app"></div>
class App extends React.Component {
    constructor(props) {
        super(props);

        this.state = { show: true };
    }

    onClick = () => {
        this.setState({
            show: !this.state.show
        });
    }

    render() {
        const { show } = this.state;

        const children = show ? (<div className="content">CONTENT</div>) : null;

        return (
            <div>
                <dl>
                    <dt>
                        Reveal:
                    </dt>
                    <dd>
                        <button className="k-button" onClick={this.onClick}>Animate</button>
                    </dd>
                </dl>

                <Reveal>
                    {children}
                </Reveal>
            </div>
        );
    }
}

ReactDOM.render(
    <App />,
    document.querySelector('my-app')
);

Slide

The Slide Animation slides a single piece of content in a predefined direction.

<style>
 .content {
   width: 100px;
   padding: 10px;
   color: #787878;
   background-color: #fcf7f8;
   font-size: 13px;
   font-family: Helvetica, Arial, sans-serif;
   letter-spacing: 1px;
   text-align: center;
   border: 1px solid rgba(0,0,0,.05);
 }
 </style>
 <div id="app"></div>
class App extends React.Component {
    constructor(props) {
        super(props);

        this.state = { show: true };
    }

    onClick = () => {
        this.setState({
            show: !this.state.show
        });
    }

    render() {
        const { show } = this.state;

        const children = show ? (<div className="content">CONTENT</div>) : null;

        return (
            <div>
                <dl>
                    <dt>
                        Slide:
                    </dt>
                    <dd>
                        <button className="k-button" onClick={this.onClick}>Animate</button>
                    </dd>
                </dl>

                <Slide>
                    {children}
                </Slide>
            </div>
        );
    }
}

ReactDOM.render(
    <App />,
    document.querySelector('my-app')
);

Zoom

The Zoom animation displays its content by applying a zoom-in or zoom-out transition effect.

<style>
 .content {
   width: 100px;
   padding: 10px;
   color: #787878;
   background-color: #fcf7f8;
   font-size: 13px;
   font-family: Helvetica, Arial, sans-serif;
   letter-spacing: 1px;
   text-align: center;
   border: 1px solid rgba(0,0,0,.05);
 }
 </style>
 <div id="app"></div>
class App extends React.Component {
    constructor(props) {
        super(props);

        this.state = { show: true };
    }

    onClick = () => {
        this.setState({
            show: !this.state.show
        });
    }

    render() {
        const { show } = this.state;

        const children = show ? (<div className="content">CONTENT</div>) : null;

        return (
            <div>
                <dl>
                    <dt>
                        Zoom:
                    </dt>
                    <dd>
                        <button className="k-button" onClick={this.onClick}>Animate</button>
                    </dd>
                </dl>

                <Zoom>
                    {children}
                </Zoom>
            </div>
        );
    }
}

ReactDOM.render(
    <App />,
    document.querySelector('my-app')
);
In this article