All Components

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

Direction

Except for the Fade Animation, the Animations provide a set of the predefined directions which allow you to control their entering and exiting effects.

The Fade Animation does not feature a configurable direction because it represents a transition in the opacity of the element.

To define the direction of the entering and exiting animations, use the direction property of each Animation type.

Expand

The Expand Animation supports the following predefined directions:

  • (Default) vertical—Expands the content from center to top and bottom, and vice-versa.
  • horizontal—Expands the content from center to left and right, and vice-versa.
<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);
 }
 .k-radio-label {
     line-height: 1.2;
     margin-bottom: .5rem;
 }
 </style>
class App extends React.Component {
    constructor(props) {
        super(props);

        this.state = { show: false, direction: 'vertical' };
    }

    onClick = () => {
        this.setState({
            show: !this.state.show
        });
    }
    onChange = (e) => {
        this.setState({ direction: e.target.value })
    }

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

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

        return (
            <div className="row">
                <div className="col-md-6">
                    <dl>
                        <dt>
                            Expand: {direction}
                        </dt>
                        <dd>
                            <button className="k-button" onClick={this.onClick}>Animate</button>
                        </dd>
                    </dl>
                    <Expand direction={direction}>
                        {children}
                    </Expand>
                </div>
                <div className="col-md-6">
                    <dl>
                        <dt>
                            Direction:
                        </dt>
                        <dd>
                            <div className="example-config">
                                <input id="ver" className="k-radio" type="radio" name="direction" value="vertical" defaultChecked={this.state.direction === 'vertical'} onClick={this.onChange}/>
                                <label htmlFor="ver" className="k-radio-label">
                                    &nbsp;Vertical
                                </label>
                                <br />
                                <input id="hor" className="k-radio" type="radio" name="direction" value="horizontal" defaultChecked={this.state.direction === 'horizontal'} onClick={this.onChange}/>
                                <label htmlFor="hor" className="k-radio-label">
                                    &nbsp;Horizontal
                                </label>
                            </div>
                        </dd>
                    </dl>
                </div>
            </div>
        );
    }
}

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

Push

The Push Animation supports the following predefined directions:

  • up—Pushes the content from bottom to top.
  • down—Pushes the content from top to bottom.
  • left—Pushes the content from right to left.
  • (Default) right—Pushes the content from left to right.
<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);
 }
 .k-radio-label {
     line-height: 1.2;
     margin-bottom: .5rem;
 }
 </style>
class App extends React.Component {
    constructor(props) {
        super(props);

        this.state = { direction: "right", index: 1 };
    }

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

    onChange = (e) => {
        this.setState({
            direction: e.target.value
        });
    }

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

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

                    <Push direction={direction} stackChildren={true}>
                        <div className="content" key={index}>{index}</div>
                    </Push>
                </div>
                <div className="col-md-6">
                    <dl>
                        <dt>
                            Direction:
                        </dt>
                        <dd>
                            <div className="example-config">
                                <input id="up" className="k-radio" type="radio" name="direction" value="up" defaultChecked={this.state.direction === 'up'} onClick={this.onChange}/>
                                <label htmlFor="up" className="k-radio-label">
                                    &nbsp;Up
                                </label>
                                <br />
                                <input id="down" className="k-radio" type="radio" name="direction" value="down" defaultChecked={this.state.direction === 'down'} onClick={this.onChange}/>
                                <label htmlFor="down" className="k-radio-label">
                                    &nbsp;Down
                                </label>
                                <br />
                                <input id="left" className="k-radio" type="radio" name="direction" value="left" defaultChecked={this.state.direction === 'left'} onClick={this.onChange}/>
                                <label htmlFor="left" className="k-radio-label">
                                    &nbsp;Left
                                </label>
                                <br />
                                <input id="right" className="k-radio" type="radio" name="direction" value="right" defaultChecked={this.state.direction === 'right'} onClick={this.onChange}/>
                                <label htmlFor="right" className="k-radio-label">
                                    &nbsp;Right
                                </label>
                            </div>
                        </dd>
                    </dl>
                </div>
            </div>
        );
    }
}

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

Reveal

The Reveal Animation supports the following predefined directions:

  • (Default) vertical—Reveals the height of the content.
  • horizontal—Reveals the width of the content.
<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);
 }
 .k-radio-label {
     line-height: 1.2;
     margin-bottom: .5rem;
 }
 </style>
class App extends React.Component {
    constructor(props) {
        super(props);

        this.state = { show: false, direction: "vertical" };
    }

    onClick = () => {
        this.setState({
            show: !this.state.show
        });
    }
    onChange = (e) => {
        this.setState({
            direction: e.target.value
        })
    }

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

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

        return (
            <div className="row">
                <div className="col-md-6">
                    <dl>
                        <dt>
                            Reveal: {direction}
                        </dt>
                        <dd>
                            <button className="k-button" onClick={this.onClick}>Animate</button>
                        </dd>
                    </dl>
                    <Reveal direction={direction}>
                        {children}
                    </Reveal>
                </div>
                <div className="col-md-6">
                    <dl>
                        <dt>
                            Direction:
                        </dt>
                        <dd>
                            <div className="example-config">
                                <input id="ver" className="k-radio" type="radio" name="direction" value="vertical" defaultChecked={this.state.direction === 'vertical'} onClick={this.onChange}/>
                                <label htmlFor="ver" className="k-radio-label">
                                    &nbsp;Vertical
                                </label>
                                <br />
                                <input id="hor" className="k-radio" type="radio" name="direction" value="horizontal" defaultChecked={this.state.direction === 'horizontal'} onClick={this.onChange}/>
                                <label htmlFor="hor" className="k-radio-label">
                                    &nbsp;Horizontal
                                </label>
                            </div>
                        </dd>
                    </dl>
                </div>
            </div>
        );
    }
}

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

Slide

The Slide Animation supports the following predefined directions:

  • up—Slides the content from bottom to top, and vice-versa.
  • (Default) down—Slides the content from top to bottom, and vice-versa.
  • left—Slides the content from right to left, and vice-versa.
  • right—Slides the content from left to right, and vice-versa.
<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);
 }
 .k-radio-label {
     line-height: 1.2;
     margin-bottom: .5rem;
 }
 </style>
class App extends React.Component {
    constructor(props) {
        super(props);

        this.state = { show: false, direction: "down" };
    }

    onClick = () => {
        this.setState({
            show: !this.state.show
        });
    }
    onChange = (e) => {
        this.setState({
            direction: e.target.value
        })
    }

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

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

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

                    <Slide direction={direction}>
                        {children}
                    </Slide>
                </div>
                <div className="col-md-6">
                    <dl>
                        <dt>
                            Direction:
                        </dt>
                        <dd>
                            <div className="example-config">
                                <input id="up" className="k-radio" type="radio" name="direction" value="up" defaultChecked={this.state.direction === 'up'} onClick={this.onChange}/>
                                <label htmlFor="up" className="k-radio-label">
                                    &nbsp;Up
                                </label>
                                <br />
                                <input id="down" className="k-radio" type="radio" name="direction" value="down" defaultChecked={this.state.direction === 'down'} onClick={this.onChange}/>
                                <label htmlFor="down" className="k-radio-label">
                                    &nbsp;Down
                                </label>
                                <br />
                                <input id="left" className="k-radio" type="radio" name="direction" value="left" defaultChecked={this.state.direction === 'left'} onClick={this.onChange}/>
                                <label htmlFor="left" className="k-radio-label">
                                    &nbsp;Left
                                </label>
                                <br />
                                <input id="right" className="k-radio" type="radio" name="direction" value="right" defaultChecked={this.state.direction === 'right'} onClick={this.onChange}/>
                                <label htmlFor="right" className="k-radio-label">
                                    &nbsp;Right
                                </label>
                            </div>
                        </dd>
                    </dl>
                </div>
            </div>
        );
    }
}

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

Zoom

The Zoom Animation supports the following predefined directions:

  • in—Zooms the content from the inside to the outside.
  • (Default) out—Zooms the content from the outside to the inside.
<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);
 }
 .k-radio-label {
     line-height: 1.2;
     margin-bottom: .5rem;
 }
 </style>
class App extends React.Component {
    constructor(props) {
        super(props);

        this.state = { direction: "out", index: 1 };
    }

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

    onChange = (e) => {
        this.setState({
            direction: e.target.value
        });
    }

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

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

                    <Zoom direction={direction} stackChildren={true}>
                        <div className="content" key={index}>{index}</div>
                    </Zoom>
                </div>
                <div className="col-md-6">
                    <dl>
                        <dt>
                            Direction:
                        </dt>
                        <dd>
                            <div className="example-config">
                                <input id="in" className="k-radio" type="radio" name="direction" value="in" defaultChecked={this.state.direction === 'in'} onClick={this.onChange}/>
                                <label htmlFor="in" className="k-radio-label">
                                    &nbsp;In
                                </label>
                                <br />
                                <input id="out" className="k-radio" type="radio" name="direction" value="out" defaultChecked={this.state.direction === 'out'} onClick={this.onChange}/>
                                <label htmlFor="out" className="k-radio-label">
                                    &nbsp;Out
                                </label>
                            </div>
                        </dd>
                    </dl>
                </div>
            </div>
        );
    }
}

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