Snippets

Merkulove Team Lottier player initialization in custom event

Created by Dmitry Merkulov
lottier.js
Raw 
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
/**
 * RUN AFTER SLIDER IS INITIALIZED
 */

// Add slider wrapper class name, to inialize lottiers only inside your slider
const lottiers = document.querySelectorAll( ".mdp-lottier" ); 

for ( const lottier of lottiers ) {

    const lottierPlayer = lottier.querySelector( "lottie-player" );

    lottierPlayer.setSpeed( parseInt( lottier.getAttribute( "data-speed" ) ) );
    lottierPlayer.loop = "true" === lottier.getAttribute( "data-loop" );
    lottierPlayer.controls = "true" === lottier.getAttribute( "data-controls" );
    lottierPlayer.mode = lottier.getAttribute( "data-mode" );
    lottierPlayer.renderer = lottier.getAttribute( "data-renderer" );

    if ( "auto_play" === lottier.getAttribute( "data-autoplay" ) ) {

        lottierPlayer.play();

    }

    if ( "section_hover" === lottier.getAttribute( "data-autoplay" ) ){

        lottierPlayer.addEventListener( "mouseover", function() {

            lottierPlayer.play();

        } );

        lottierPlayer.addEventListener( "mouseout", function() {

            lottierPlayer.pause();

        } );

    }

    if ( "on_click" === lottier.getAttribute( "data-autoplay" ) ){

        let startPlay = 0;
        lottierPlayer.addEventListener( "click", function() {

            if ( startPlay === 0 ) {

                lottierPlayer.play();
                startPlay = 1;

            } else {

                lottierPlayer.pause();
                startPlay = 0;

            }

        } );

    }

    if ( "true" === lottier.getAttribute( "data-enablelink" ) ) {

        lottierPlayer.addEventListener( "click", function() {

            window.open( lottier.getAttribute( "data-link" ), "_blank" );

        } );

    }

}

Comments (0)

HTTPS SSH

You can clone a snippet to your computer for local editing. Learn more.