Pages
    • GETTING STARTED
        • API REFERENCE
                                                                                                                                              • COMMAND LINE
                                                                                                                                                  On this page

                                                                                                                                                        .play()

                                                                                                                                                        This method is used to create and play an animation. This method is promise-based.

                                                                                                                                                        Syntax

                                                                                                                                                        await $(el).play(effect[, timing = {}]);

                                                                                                                                                        Parameters

                                                                                                                                                        • effect: Array|Object|String - The effect to play. See Animation.
                                                                                                                                                        • timing: Object - Options for the animation. See Animation.

                                                                                                                                                        Return

                                                                                                                                                        • this - The Play UI instance.

                                                                                                                                                        Usage

                                                                                                                                                        Play from Standard Keyframes. Below, we fade out an element using an array of keyframes.

                                                                                                                                                        let el = document.querySelector('#el');
                                                                                                                                                        $(el).play([{opacity:1}, {opacity:0}], {duration:600}).then($el => {
                                                                                                                                                            console.log('The end!');
                                                                                                                                                        });

                                                                                                                                                        Play a CSS Transition. Below, we fade out an element by simply specifying a end-state keyframe. The starting keyframe for the animation is automatically derived from the element's current state.

                                                                                                                                                        $(el).play({opacity:0}, {duration:600}).then($el => {
                                                                                                                                                            console.log('The end!');
                                                                                                                                                        });

                                                                                                                                                        Play a CSS Animation Name. Below, we fade out an element using an animation defined in the document's stylesheet.

                                                                                                                                                        <style>
                                                                                                                                                        
                                                                                                                                                        @keyframes fadeout {
                                                                                                                                                          0% { opacity: 1;}
                                                                                                                                                          100% { opacity: 0;}
                                                                                                                                                        }
                                                                                                                                                        
                                                                                                                                                        </style>
                                                                                                                                                        $(el).play('fadeout', {duration:600}).then($el => {
                                                                                                                                                            console.log('The end!');
                                                                                                                                                        });

                                                                                                                                                        Static Usage

                                                                                                                                                        The .play() instance method is internally based on the standalone ui/play() function which may be used statically.

                                                                                                                                                        Import

                                                                                                                                                        const { play } = $.ui;
                                                                                                                                                        import { play } from '@webqit/playui-js/src/ui/index.js';

                                                                                                                                                        Syntax

                                                                                                                                                        See the general way to use Play UI's standalone functions