CodePen view

Apply animation transformations to hotspots.

configuration.json

{
    "story":
    {
        "uid": "hotspots-animated",
        "name": "Hotspots with animation",
        "slug": "hotspots-animated",
        "description": "This is a sample project with animation applied on hotspots",
        "default": "scene-0",

        "scenes":
        [
            {
                "uid": "scene-0",
                "name": "First scene",
                "slug": "first-scene",
                "description": "This is the first scene",

                "media":
                {
                    "uid": "media-0",
                    "type": "image",

                    "source":
                    {
                        "format": "equi",
                        "url": "01-forest.jpg"
                    }
                },

                "hotspots":
                [
                    {
                        "uid": "hotspot-0",
                        "name": "White rabbit",
                        "facingCenter": true,
                        "interactive": false,

                        "transform":
                        {
                            "position":
                            {
                                "radius": 300,
                                "theta": 0
                            },

                            "rotation":
                            {
                                "x": 0,
                                "y": 0
                            },

                            "scale":
                            {
                                "x": 0.6,
                                "y": 0.6
                            }
                        },

                        "material":
                        {
                            "image": "rabbit-34013.svg",
                            "transparent": true
                        },

                        "geometry":
                        {
                            "type": "plane",
                            "options":
                            {
                                "width": 72,
                                "height": 50
                            }
                        },

                        "animation":
                        {
                            "enabled": true,
                            "loop": false,
                            "random": false,
                            "autoPlay": true,

                            "tracks": [ "hotspot-0-track-0", "hotspot-0-track-1"]
                        }
                    }
                ]
            }
        ]
    },

    "hotspots":
    {
        "tracks":
        [
            {
                "uid": "hotspot-0-track-0",
                "name": "Animation track #0",
                "description": "First animation track",
                "smooth": true,

                "keyframes":
                [
                    {
                        "time": 4000,
                        "data": {
                            "position": { "radius": 333, "theta": 10, "phi": -5 }
                        }
                    },
                    {
                        "time": 5000,
                        "data": {
                            "position": { "radius": 316, "theta": 8, "phi": -6 }
                        }
                    },
                    {
                        "time": 8000,
                        "data": {
                            "position": { "radius": 266, "theta": 3, "phi": -8 }
                        }
                    },
                    {
                        "time": 9000,
                        "data": {
                            "position": { "radius": 250, "theta": 5, "phi": -10 }
                        }
                    },
                    {
                        "time": 12000,
                        "data": {
                            "position": { "radius": 200, "theta": 6, "phi": -15 }
                        }
                    }
                ]
            },

            {
                "uid": "hotspot-0-track-1",
                "name": "Animation track #1",
                "description": "Second animation track",
                "smooth": true,

                "keyframes":
                [
                    {
                        "time": 5000,
                        "data": {
                            "position": { "radius": 200, "theta": 90, "phi": -15 }
                        }
                    },
                    {
                        "time": 6000,
                        "data": {
                            "position": { "theta": 110, "phi": -10 }
                        }
                    },
                    {
                        "time": 7000,
                        "data": {
                            "position": { "theta": 130, "phi": -15 }
                        }
                    },
                    {
                        "time": 10000,
                        "data": {
                            "position": { "theta": 180 }
                        }
                    },
                    {
                        "time": 15000,
                        "data": {
                            "position": { "theta": -90 }
                        }
                    },
                    {
                        "time": 20000,
                        "data": {
                            "position": { "theta": 6 }
                        }
                    }
                ]
            }
        ]
    }
}

Back to samples

3rd Jan 2017