Lootie/Bodyanimation things

General
1

Hello,

I would like to ask, what could I do, that template which was exported from AE with bodymovin plugin start normally from first time, not after one cycle when looping?

Demo video:

2

Something like that?
For lower thirds I play from frame 3 to 50 and inverse when stopping.
Before each play it’s looping some frames for updating data without problems.



<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    
    <title>Bericht</title>
    
    <script src="./js/webcg-framework.umd.js.Download"></script>
    <!--script src="./js/webcg-devtools.umd.js.Download"></script-->
	<script src="./js/lottie.min.js"></script>
	
    <style type="text/css">

		@font-face {
		  font-family: 'TheSans C4s';
		  src: url('./fonts/TheSansC4s-Plain.ttf') format('truetype');
		}
		@font-face {
		  font-family: 'TheSans C4s';
		  src: url('./fonts/TheSansC4s-Bold.ttf') format('truetype');
		  font-weight: bold;
		}
	
		div,body,span{margin: 0px; padding: 0px;}
		
        html {
            /* Hintergrund Farbe */
            background-color: transparent;
            /* Border Box = einfacheres Skalieren von Elementen */
            box-sizing: border-box;
            /* Keine Scrollbars */
            overflow: hidden
            /* Default Font Family */
            font-family: TheSans C4s, Verdana, Geneva, sans-serif;
        }

        *, *:before, *:after {
            /* Falls benötigt wird das Box-Sizing von Elementen wieder ausgestellt und erbt vom Elternelement */
            box-sizing: inherit;
        }
		.modal-footer a{
			visibility: hidden;
		}
    </style>
	
    <script type="text/javascript">
		// Set initial data for webcg-devtools
		//window.debugData = { 'f0': 'ein Wert'};
		
		var g_animation;
		var g_animationLoaded = false;
		
		function setData(data){
			var t = (data.f0?data.f0.text||data.f0:'');
			g_animation.renderer.elements[1].updateDocumentData({t:t},0);
		}
		
		webcg.on('data', function (data) {
			return new Promise(function(resolve, reject) {
				if(g_animationLoaded){
					setData(data);
					return resolve();
				}else{
					g_animation.addEventListener(
						'segmentStart',
						function(event){
							if(event.firstFrame == 0){
								setData(data);
								return resolve();
							}else{
								return reject('no start segment');
							}
							g_animation.removeEventListener('data_failed');
							return resolve();
						},
						{once:true}
					)
					g_animation.addEventListener(
						'data_failed',
						function(event){
							g_animation.removeEventListener('segmentStart');
							return reject('data failed');
						},
						{once:true}
					)
				}
			}).catch(function(e) {console.error(e)});
		})
		

		//lädt alle Lottie Animationen beim Template Play
		webcg.on('play', function () {
			g_animation.playSegments([[3, 50],[51,54]], true);
		})

		//killt lottie beim Template Stop und initialisiert auf Anfang
		webcg.on('stop', function () {
			g_animation.playSegments([[50, 3],[2, 0]], true);
		})

		webcg.on('next', function () {
		
		})
		
		//killt lottie vor dem Template Remove
		webcg.on('remove', function () {
			lottie.destroy();
		})
		
		
		
		//Callback für das Laden des Seiteninhalts
		document.addEventListener("DOMContentLoaded", function(event) {
			g_animation = lottie.loadAnimation({
				container: Bericht, // the dom element that will contain the animation
				renderer: 'svg',
				loop: true,
				autoplay: false,
				path: './data/bericht.json' // the path to the animation json
			});
			g_animation.addEventListener("DOMLoaded", function(event){
				g_animation.playSegments([0,2], true);
				g_animationLoaded = true;
			});
		});
	</script>

</head>
<body style="background-color: rgba(0, 0, 0, 0);">
	<div id='Bericht'></div>
</body>
</html>

It works but I’m no coding expert

1 Like