# KeyframeDelay delays keyframe start until keyframe >= :start prop

<script>
    import Bytepath from "bytepath";
    export default {
        name: "DelayExample",
        props: {
            keyframe:{
                type: Number,
                default: 0,
            }
        },
        components: {
            underwater: Bytepath.samples.scenes.underwater.underwater,
            octopus: Bytepath.samples.scenes.underwater.octopus,
            "keyframe-delay": Bytepath.timers.delay,
        },
    }
</script>
<template>
    <svg height="500" viewBox="0 0 1384 1000">
        <underwater :show-viewbox="false" overflow="hidden">
            <g>
                <!-- Start animating at frame 0 -->
                <keyframe-delay :keyframe="keyframe" v-slot="delay">
                    <octopus color="blue" :y="-300" :x="delay.keyframe"/>
                </keyframe-delay>
                <!-- Start at frame 500 -->
                <keyframe-delay :start="500" :keyframe="keyframe" v-slot="delay">
                    <octopus color="blue" :y="-50" :x="delay.keyframe"/>
                </keyframe-delay>
                <!-- Starts at frame 1000 -->
                <keyframe-delay :start="1000" :keyframe="keyframe" v-slot="delay">
                    <octopus color="blue" :y="200" :x="delay.keyframe"/>
                </keyframe-delay>
            </g>
        </underwater>
    </svg>
</template>

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

# KeyframeRepeat will return keyframe to 0 at frame :repeat

<script>
    import Bytepath from "bytepath";
    export default Bytepath.CreateAsset({
        name: "RepeatExample",
        layers: [],
        viewport: true,
        components: {
            underwater: Bytepath.samples.scenes.underwater.underwater,
            octopus: Bytepath.samples.scenes.underwater.octopus,
            "keyframe-repeat": Bytepath.timers.repeat,
        },
    });
</script>
<template>
    <svg  height="500" viewBox="0 0 1384 1000">
        <underwater :show-viewbox="true" overflow="hidden">
            <g>
                <!-- Repeats every 250 frames -->
                <keyframe-repeat :repeat="250" :keyframe="keyframe" v-slot="delay">
                    <octopus color="blue" :y="-300" :x="delay.keyframe"/>
                </keyframe-repeat>
                <!-- Repeats every 500 frame -->
                <keyframe-repeat :repeat="500" :keyframe="keyframe" v-slot="delay">
                    <octopus color="blue" :y="-50" :x="delay.keyframe"/>
                </keyframe-repeat>
                <!-- Repeats every 1000 frames -->
                <keyframe-repeat :repeat="1000" :keyframe="keyframe" v-slot="delay">
                    <octopus color="blue" :y="200" :x="delay.keyframe"/>
                </keyframe-repeat>
            </g>
        </underwater>
    </svg>
</template>

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

# KeyframeVisible resets keyframe if asset goes off screen

<script>
    import CreateAsset from "../../../bytepathnpm/Factories/CreateAsset";
    import Underwater from "../../../bytepathnpm/Samples/Scenes/Underwater/Underwater";
    import Octopus from "../../../bytepathnpm/Samples/Scenes/Underwater/Octopus";
    import KeyframeVisible from "../../../bytepathnpm/vue/Components/Timers/KeyframeVisible";
    export default CreateAsset({
        name: "HiddenExample",
        layers: [],
        viewport: true,
        components: {
            Underwater,
            Octopus,
            KeyframeVisible,
        },
    });
</script>
<template>
    <svg  height="500" viewBox="0 0 1384 1000">
        <underwater :show-viewbox="true" overflow="hidden">
            <!-- Repeats when the octopus goes off screen -->
            <keyframe-visible :keyframe="keyframe" v-slot="visible">
                <octopus color="blue" :x="-500 + (visible.keyframe)"/>
            </keyframe-visible>
        </underwater>
    </svg>
</template>

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

# Keyframe modifiers can be chained together

<script>
    import Bytepath from "bytepath";
    export default Bytepath.CreateAsset({
        name: "DelayExample",
        layers: [],
        viewport: true,
        components: {
            underwater: Bytepath.samples.scenes.underwater.underwater,
            octopus: Bytepath.samples.scenes.underwater.octopus,
            "keyframe-visible": Bytepath.timers.visible,
            "keyframe-delay": Bytepath.timers.delay,
        },
    });
</script>
<template>
    <svg height="500" viewBox="0 0 1384 1000">
        <underwater :show-viewbox="true" overflow="hidden">
            <g>
                <keyframe-delay :keyframe="keyframe"  v-slot="delay">
                    <keyframe-visible v-bind="delay" v-slot="visible">
                        <octopus color="blue" :y="-300" :x="visible.keyframe"/>
                    </keyframe-visible>
                </keyframe-delay>
                <keyframe-delay :start="1000" :keyframe="keyframe"  v-slot="delay">
                    <keyframe-visible v-bind="delay" v-slot="visible">
                        <octopus color="blue" :y="-50" :x="visible.keyframe"/>
                    </keyframe-visible>
                </keyframe-delay>
                <keyframe-delay :start="2000" :keyframe="keyframe"  v-slot="delay">
                    <keyframe-visible v-bind="delay" v-slot="visible">
                        <octopus color="blue" :y="200" :x="visible.keyframe"/>
                    </keyframe-visible>
                </keyframe-delay>
            </g>
        </underwater>
    </svg>
</template>

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

← Tween Renderless Animations →