Using luma matte assets and overlays to build new effects and transition

In Shotstack api , we are not able to use hover and those css animation , so I request you to add some more transition so that we can make good quality video and can have options to use multiple effects and transition . Please add these transitions and effects that are these in the css file , I will be really really greatful

Hi @chinusahoo.cs.cs,

These docs show you what CSS is currently supported.

I cannot see from the CSS in what type of animation that would result. If you can post an example of the actual animation I may be able to give more feedback on how to achieve your desired effect.

If you require more advanced animations you currently have two options:

Luma Matte Transitions

You can build your own transitions using luma mattes:

Examples

Custom paint transition

Result

Luma Matte file

JSON

{
    "timeline": {
        "soundtrack": {
            "src": "https://shotstack-assets.s3-ap-southeast-2.amazonaws.com/music/unminus/palmtrees.mp3",
            "effect": "fadeOut"
        },
        "background": "#000000",
        "tracks": [
            {
                "clips": [
                    {
                        "asset": {
                            "type": "title",
                            "text": "Shotstack Luma Matte",
                            "style": "marker",
                            "size": "small"
                        },
                        "start": 0,
                        "length": 4.5,
                        "transition": {
                            "in": "fade",
                            "out": "fade"
                        }
                    }
                ]
            },
            {
                "clips": [
                	{
                        "asset": {
                            "type": "luma",
                            "src": "https://shotstack-assets.s3-ap-southeast-2.amazonaws.com/examples/luma-mattes/paint-left.mp4"
                        },
                        "start": 3.6,
                        "length": 1.4
                    },
                    {
                        "asset": {
                            "type": "video",
                            "src": "https://shotstack-assets.s3-ap-southeast-2.amazonaws.com/footage/table-mountain.mp4"
                        },
                        "start": 0,
                        "length": 5
                    }
                ]
            },
            {
                "clips": [
                	{
                        "asset": {
                            "type": "luma",
                            "src": "https://shotstack-assets.s3-ap-southeast-2.amazonaws.com/examples/luma-mattes/paint-right.mp4"
                        },
                        "start": 7.2,
                        "length": 1.4
                    },
                    {
                        "asset": {
                            "type": "video",
                            "src": "https://shotstack-assets.s3-ap-southeast-2.amazonaws.com/footage/road.mp4"
                        },
                        "start": 3.6,
                        "length": 5
                    }
                ]
            },
            {
                "clips": [
                    {
                        "asset": {
                            "type": "video",
                            "src": "https://shotstack-assets.s3-ap-southeast-2.amazonaws.com/footage/lake.mp4"
                        },
                        "start": 7.2,
                        "length": 5,
                        "transition": {
                            "out": "fade"
                        }
                    }
                ]
            }
        ]
    },
    "output": {
        "format": "mp4",
        "resolution": "1080"
    }
}

Custom wave transition

Result

Luma Matte file

JSON

{
    "timeline": {
        "soundtrack": {
            "src": "https://shotstack-assets.s3-ap-southeast-2.amazonaws.com/music/unminus/palmtrees.mp3",
            "effect": "fadeOut"
        },
        "background": "#000000",
        "tracks": [
            {
                "clips": [
                    {
                        "asset": {
                            "type": "title",
                            "text": "Shotstack Luma Matte",
                            "style": "marker",
                            "size": "small"
                        },
                        "start": 0,
                        "length": 4.5,
                        "transition": {
                            "in": "fade",
                            "out": "fade"
                        }
                    }
                ]
            },
            {
                "clips": [
                	{
                        "asset": {
                            "type": "luma",
                            "src": "https://shotstack-assets.s3.amazonaws.com/luma-mattes/waves/single-left.mp4"
                        },
                        "start": 3.6,
                        "length": 1.4
                    },
                    {
                        "asset": {
                            "type": "video",
                            "src": "https://shotstack-assets.s3-ap-southeast-2.amazonaws.com/footage/table-mountain.mp4"
                        },
                        "start": 0,
                        "length": 5
                    }
                ]
            },
            {
                "clips": [
                	{
                        "asset": {
                            "type": "luma",
                            "src": "https://shotstack-assets.s3.amazonaws.com/luma-mattes/waves/single-right.mp4"
                        },
                        "start": 7.2,
                        "length": 1.4
                    },
                    {
                        "asset": {
                            "type": "video",
                            "src": "https://shotstack-assets.s3-ap-southeast-2.amazonaws.com/footage/road.mp4"
                        },
                        "start": 3.6,
                        "length": 5
                    }
                ]
            },
            {
                "clips": [
                    {
                        "asset": {
                            "type": "video",
                            "src": "https://shotstack-assets.s3-ap-southeast-2.amazonaws.com/footage/lake.mp4"
                        },
                        "start": 7.2,
                        "length": 5,
                        "transition": {
                            "out": "fade"
                        }
                    }
                ]
            }
        ]
    },
    "output": {
        "format": "mp4",
        "resolution": "1080"
    }
}

Animated overlays

We support Quicktime Animation mov files with transparent backgrounds so you can create layered transitions like this:

Examples

Result

JSON

{
    "timeline": {
        "soundtrack": {
            "src": "https://shotstack-assets.s3-ap-southeast-2.amazonaws.com/music/unminus/lit.mp3",
            "effect": "fadeOut"
        },
        "background": "#000000",
        "tracks": [
            {
                "clips": [
                    {
                        "asset": {
                            "type": "title",
                            "text": "Shotstack Overlays",
                            "style": "future",
                            "size": "x-small",
                            "position": "bottomLeft"
                        },
                        "start": 1,
                        "length": 5,
                        "transition": {
                            "in": "fade",
                            "out": "fade"
                        }
                    }
                ]
            },
            {
                "clips": [
                    {
                        "asset": {
                            "type": "video",
                            "src": "https://shotstack-pubic-files.s3-ap-southeast-2.amazonaws.com/examples/overlays/shapes-transition.mov"
                        },
                        "start": 5.5,
                        "length": 2.68
                    }
                ]
            },
            {
                "clips": [
                	{
                        "asset": {
                            "type": "video",
                            "src": "https://shotstack-pubic-files.s3-ap-southeast-2.amazonaws.com/examples/overlays/clip1.mp4"
                        },
                        "start": 0,
                        "length": 7
                    },
                    {
                        "asset": {
                            "type": "video",
                            "src": "https://shotstack-pubic-files.s3-ap-southeast-2.amazonaws.com/examples/overlays/clip2.mp4"
                        },
                        "start": 7,
                        "length": 5,
                        "transition": {
                            "out": "fade"
                        }
                    }
                ]
            }
        ]
    },
    "output": {
        "format": "mp4",
        "resolution": "1080"
    }
}

In this link if you scroll down to “2d transitions” and try hovering your mouse over the boxes (labelled with name if the effects/transitions) you can see the effects and transitions I am talking about , and the previous comment there is the link that takes you to the css page , so everything is now with you , so can you please add these many things as both “effects” and “transitions” in your api , I the alternatives are not useful , what we want is and the alternatives don’t match my requirements , so please I request you to add these things to your api. thank you.

You should be able to achieve those effects using transparent overlays.

This is an example for an animated logo, but could as well be an animation as per your example:

{
    "timeline": {
        "soundtrack": {
            "src": "https://shotstack-assets.s3-ap-southeast-2.amazonaws.com/music/freeflow.mp3",
            "effect": "fadeOut"
        },
        "tracks": [
                        {
                "clips": [
                    {
                        "asset": {
                            "type": "video",
                            "src": "https://shotstack-assets.s3.amazonaws.com/overlays/logo-square-pop.mov"
                        },
                        "start": 0,
                        "length": 5
                    }
                ]
            },
            {
                "clips": [
                    {
                        "asset": {
                            "type": "video",
                            "src": "https://shotstack-assets.s3.ap-southeast-2.amazonaws.com/footage/road.mp4"
                        },
                        "start": 0,
                        "length": 5
                    }
                ]
            }
        ]
    },
    "output": {
        "format": "mp4",
        "resolution": "hd"
    }
}

We’ll add your request to build these types of effects using alternative methods to our feature request list.

can you please show me an example , how to use that with pictures , the name defies it self in the over lay that , it will overlay in an existing asset , Can you please do that in an image . Please ?

I don’t want any static effects , I want to use the effects in the images that which will be different for each users. but the thing which you say is a static example .

Currently there isn’t a way to dynamically link a static overlay animation with a dynamic element (like an image). The best you can do is either use the effects and transitions currently available, or find a balance between using luma assets, dynamic overlays and the available Shotstack assets.

I quickly built an animation in After Effects similar to the CSS animations shared (shared below), and built an example where you can use a luma matte using this custom animation, an html asset acts as a container, and another html asset that adds your dynamic content on top.

wobble.aep (156.9 KB)

This method allows you to create custom animated containers that dynamically stretch based on the amount of content it includes.

Advanced Luma Matte

Result

720x480px Container Dimensions

1800x480px Container Dimensions

Luma matte asset

JSON

{
    "timeline": {
        "cache": false,
        "background": "#000000",
        "tracks": [
            {
                "clips": [
                    {
                        "asset": {
                            "type": "html",
                            "html": "<p>Hello World!</p>",
                            "css": "p {font-size: 48px; color: white;}"
                        },
                        "start": 0,
                        "length": 2,
                        "transition": {
                            "in": "fadeFast"
                        }
                    }
                ]
            },
            {
                "clips": [
                	{
                        "asset": {
                            "type": "luma",
                            "src": "https://shotstack-assets.s3.amazonaws.com/luma-mattes/effects/wobble.mp4"
                        },
                        "start": 0,
                        "length": 2
                    },
                    {
                        "asset": {
                            "type": "html",
                            "html": "<p></p>",
                            "width": 720,
                            "height": 480,
                            "background": "#00c7a2"
                        },
                        "start": 0,
                        "length": 2
                    }
                ]
            },
            {
                "clips": [
                    {
                        "asset": {
                            "type": "video",
                            "src": "https://shotstack-assets.s3-ap-southeast-2.amazonaws.com/footage/road.mp4"
                        },
                        "start": 0,
                        "length": 2
                    }
                ]
            }
        ]
    },
    "output": {
        "format": "mp4",
        "resolution": "hd"
    }
}

thank you very much for replying so quick , but these are not the answers to my problem , I will wait until you make these(ones that I mentioned in the previous thread) effects and transitions available in your api . And I would request you to implement them as early as possible , I have just shared the hover effects but I want these kinds of effects and transitions on images and videos. Thank you sir .