vielhuber/0.readme.md

## 0.readme.md

      
    Raw
  

              0.readme.md
            
          
    links


https://lottiefiles.com
https://dotlottie.io
https://docs.lottiefiles.com/dotlottie-players

steps


create a free account on lottiefiles.com
download after effects plugin on https://lottiefiles.com/plugins/after-effects
create animation in after effects
export (upload) to lottiefiles and download as dotLottie


## 1.index.html
<!DOCTYPE html>
<html lang="de" class="font-custom text-black bg-white responsive-typography selection-color scrollbar hyphenate">
    <head>
        <meta charset="utf-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=5, minimum-scale=1" />
        <title>lottie</title>
        <style>
            .container {
                padding: 20px;
            }

            .player-container {
                width: 20%;
                height: 0;
                padding-bottom: 10%;
                margin: 0 0 20px;
                position: relative;
                border: 3px solid red;
            }
            .player-container--playing {
                border: 3px solid blue;
            }
            .player {
                position: absolute;
                top: 0;
                left: 0;
                width: 100%;
                height: 100%;
            }
            @media screen and (max-width: 1100px) {
                .player-container {
                    width: 100%;
                    padding-bottom: 50%;
                }
            }

            .button-container {
                margin-top: 20px;
            }
            .button {
                background-color: #000;
                color: #fff;
                padding: 10px 20px;
            }

            .debug {
                background-color: #eee;
                display: block;
                margin-top: 20px;
                padding: 20px;
            }
        </style>
    </head>
    <body>
        <div class="container">
            <div class="player-container"></div>

            <div class="button-container">
                <button class="button" data-src="1.lottie">play _1</button>
                <button class="button" data-src="2.lottie">play _2</button>
                <button class="button" data-src="3.lottie">play _3</button>
            </div>

            <code class="debug"> </code>
        </div>

        <script data-inline src="/bundle.js"></script>
    </body>
</html>

## 2.script.js
// npm install @dotlottie/player-component
import '@dotlottie/player-component';

export default class Page {
    constructor() {
        this.player = null;
        this.playing = false;
        this.queue = [];
    }

    async ready() {}

    async load() {
        document.querySelectorAll('button').forEach($button => {
            $button.addEventListener('click', e => {
                let file = e.currentTarget.getAttribute('data-src');
                this.queue.push(file);
            });
        });

        setInterval(() => {
            document.querySelector('.debug').innerHTML = JSON.stringify(this.queue);
        }, 50);

        setInterval(() => {
            if (this.queue.length > 0) {
                if (this.playing === false) {
                    this.playing = true;
                    // <dotlottie-player class="player" loop autoplay></dotlottie-player>
                    let $player = document.createElement('dotlottie-player');
                    $player.setAttribute('class', 'player');
                    $player.setAttribute('loop', '');
                    $player.setAttribute('autoplay', '');
                    $player.setAttribute('speed', '5');
                    document.querySelector('.player-container').appendChild($player);

                    $player.addEventListener('ready', () => {
                        //console.log('ready');
                        $player.closest('.player-container').classList.add('player-container--playing');
                        // remove other players(!)
                        if ($player.closest('.player-container').querySelectorAll('dotlottie-player').length > 1) {
                            $player
                                .closest('.player-container')
                                .querySelectorAll('dotlottie-player')
                                .forEach($el => {
                                    if ($el !== $player) {
                                        $el.remove();
                                    }
                                });
                        }
                    });

                    // stop animation on last frame
                    $player.addEventListener('frame', animation => {
                        if (this.playing === true && animation.detail.frame > $player.getLottie().totalFrames - 1) {
                            $player.pause();
                            this.playing = false;
                            $player.closest('.player-container').classList.remove('player-container--playing');
                        }
                    });

                    // this timeout is needed, otherwise the eventlisteners won't work
                    let last = this.queue.shift();
                    setTimeout(() => {
                        $player.load('./_lottie/' + last);
                    }, 100);
                }
            }
        }, 250);
    }
}
	<!DOCTYPE html>
	<html lang="de" class="font-custom text-black bg-white responsive-typography selection-color scrollbar hyphenate">
	<head>
	<meta charset="utf-8" />
	<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=5, minimum-scale=1" />
	<title>lottie</title>
	<style>
	.container {
	padding: 20px;
	}

	.player-container {
	width: 20%;
	height: 0;
	padding-bottom: 10%;
	margin: 0 0 20px;
	position: relative;
	border: 3px solid red;
	}
	.player-container--playing {
	border: 3px solid blue;
	}
	.player {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	}
	@media screen and (max-width: 1100px) {
	.player-container {
	width: 100%;
	padding-bottom: 50%;
	}
	}

	.button-container {
	margin-top: 20px;
	}
	.button {
	background-color: #000;
	color: #fff;
	padding: 10px 20px;
	}

	.debug {
	background-color: #eee;
	display: block;
	margin-top: 20px;
	padding: 20px;
	}
	</style>
	</head>
	<body>
	<div class="container">
	<div class="player-container"></div>

	<div class="button-container">
	<button class="button" data-src="1.lottie">play _1</button>
	<button class="button" data-src="2.lottie">play _2</button>
	<button class="button" data-src="3.lottie">play _3</button>
	</div>

	<code class="debug"> </code>
	</div>

	<script data-inline src="/bundle.js"></script>
	</body>
	</html>
	// npm install @dotlottie/player-component
	import '@dotlottie/player-component';

	export default class Page {
	constructor() {
	this.player = null;
	this.playing = false;
	this.queue = [];
	}

	async ready() {}

	async load() {
	document.querySelectorAll('button').forEach($button => {
	$button.addEventListener('click', e => {
	let file = e.currentTarget.getAttribute('data-src');
	this.queue.push(file);
	});
	});

	setInterval(() => {
	document.querySelector('.debug').innerHTML = JSON.stringify(this.queue);
	}, 50);

	setInterval(() => {
	if (this.queue.length > 0) {
	if (this.playing === false) {
	this.playing = true;
	// <dotlottie-player class="player" loop autoplay></dotlottie-player>
	let $player = document.createElement('dotlottie-player');
	$player.setAttribute('class', 'player');
	$player.setAttribute('loop', '');
	$player.setAttribute('autoplay', '');
	$player.setAttribute('speed', '5');
	document.querySelector('.player-container').appendChild($player);

	$player.addEventListener('ready', () => {
	//console.log('ready');
	$player.closest('.player-container').classList.add('player-container--playing');
	// remove other players(!)
	if ($player.closest('.player-container').querySelectorAll('dotlottie-player').length > 1) {
	$player
	.closest('.player-container')
	.querySelectorAll('dotlottie-player')
	.forEach($el => {
	if ($el !== $player) {
	$el.remove();
	}
	});
	}
	});

	// stop animation on last frame
	$player.addEventListener('frame', animation => {
	if (this.playing === true && animation.detail.frame > $player.getLottie().totalFrames - 1) {
	$player.pause();
	this.playing = false;
	$player.closest('.player-container').classList.remove('player-container--playing');
	}
	});

	// this timeout is needed, otherwise the eventlisteners won't work
	let last = this.queue.shift();
	setTimeout(() => {
	$player.load('./_lottie/' + last);
	}, 100);
	}
	}
	}, 250);
	}
	}