Asset Composition

Assets can be composed together in other components to create new assets.

• AFTER YOUR ASSET RUNS ITS ANIMATIONS
• ANY TRANSFORMATIONS BY PARENT ASSETS AND SVG TAGS WILL BE APPLIED TO YOUR ASSET
• ALLOWS YOU TO MOVE ASSETS TOGETHER WHILE

Scene Composition

Vehicle Composition

In the example below we import two sample assets, balloon and human. By including human as a slotted component on balloon, and binding the balloon's slot props, The human asset can use the balloon as a "vehicle", moving around the screen as a single asset. Try moving the sliders below and watch the assets move together.

<script>
    import Bytepath from "bytepath";
    export default {
        data() {
            return { x: 50, y: 0, angle: 0 };
        },
        components: {
            balloon: Bytepath.samples.assets.tinyBalloon.tinyBalloon,
            human: Bytepath.samples.assets.human,
        }
    }
</script>
<template>
    <div>
        <input type="range" v-model.number="x" min="0" max="100">X = {{ x }}<br/>
        <input type="range" v-model.number="y" min="0" max="50">Y = {{ y }}<br/>
        <input type="range" v-model.number="angle" min="0" max="360">Angle = {{ angle }}<br/>
        <!-- Here human and balloon are two distinct asets -->
        <human :x="0" :show-viewbox="true" width="100" height="100" :align="'topleft'" :fit="true" />
        <balloon :x="25" :show-viewbox="true" width="100" height="100" :align="'topleft'" :fit="true" />
        <!-- Here balloon and human have been combined to make a single asset -->
        <balloon :x="x" :y="y" :a="angle" v-slot="balloon" width="100" height="100" :align="'topleft'" :fit="true">
            <human :show-viewbox="true" :position="balloon.position" :align="'none'" />
        </balloon>
    </div>
</template>

How This Works

Asset Slots

Passing keyframe & slot props To Children components

The keyframe value that a component receives can be forwarded along to any child components that you want to animate.