THIS IS A SAMPLE

Rohit Tikmany Created by: Rohit 19-SEP-2023 Edit me to learn more { "selector": "[data-custom-animation-id=\"fly-in-top-0-0.5\"]", "--x": "0", "--y": "calc(-100 * 1vh - height())", "animations": [ { "duration": "0s", "keyframes": [ {"transform": "translate(var(--x), var(--y))"}, {"transform": "translate(var(--x), var(--y))"} ] }, { "delay": "0s", "duration": "0.5s", "easing": "cubic-bezier(0.2, 0.6, 0.0, 1)", "keyframes": [ {"transform": "translate(var(--x), var(--y))"}, {"transform": "translate(0, 0)"} ] } ] } { "selector": "[data-custom-animation-id=\"fly-in-bottom-0.25-0.8\"]", "--x": "0", "--y": "calc(100 * 1vh + height())", "animations": [ { "duration": "0.25s", "keyframes": [ {"transform": "translate(var(--x), var(--y))"}, {"transform": "translate(var(--x), var(--y))"} ] }, { "delay": "0.25s", "duration": "0.8s", "easing": "cubic-bezier(0.2, 0.6, 0.0, 1)", "keyframes": [ {"transform": "translate(var(--x), var(--y))"}, {"transform": "translate(0, 0)"} ] } ] } { "selector": "[data-custom-animation-id=\"fly-in-bottom-0-0.55\"]", "--x": "0", "--y": "calc(100 * 1vh + height())", "animations": [ { "duration": "0s", "keyframes": [ {"transform": "translate(var(--x), var(--y))"}, {"transform": "translate(var(--x), var(--y))"} ] }, { "delay": "0s", "duration": "0.55s", "easing": "cubic-bezier(0.2, 0.6, 0.0, 1)", "keyframes": [ {"transform": "translate(var(--x), var(--y))"}, {"transform": "translate(0, 0)"} ] } ] }

This is scene #2

Not sure if it auto-advanced

PHOTO WITH CONTENT

Now here's a full-bleed photo...

Not sure about the contrast here... { "selector": "[data-custom-animation-id=\"fly-in-bottom-0-0.55\"]", "--x": "0", "--y": "calc(100 * 1vh + height())", "animations": [ { "duration": "0s", "keyframes": [ {"transform": "translate(var(--x), var(--y))"}, {"transform": "translate(var(--x), var(--y))"} ] }, { "delay": "0s", "duration": "0.55s", "easing": "cubic-bezier(0.2, 0.6, 0.0, 1)", "keyframes": [ {"transform": "translate(var(--x), var(--y))"}, {"transform": "translate(0, 0)"} ] } ] }

Alright. Much better.

Same scene with a contrast layer added. { "selector": "[data-custom-animation-id=\"fly-in-bottom-0-0.55\"]", "--x": "0", "--y": "calc(100 * 1vh + height())", "animations": [ { "duration": "0s", "keyframes": [ {"transform": "translate(var(--x), var(--y))"}, {"transform": "translate(var(--x), var(--y))"} ] }, { "delay": "0s", "duration": "0.55s", "easing": "cubic-bezier(0.2, 0.6, 0.0, 1)", "keyframes": [ {"transform": "translate(var(--x), var(--y))"}, {"transform": "translate(0, 0)"} ] } ] }

NOTICE THE ANIMATION SEQUENCE...

Some layers are delayed to play once the previous one finishes animating.

Now this is a video scene.

Works! (Auto-advance won't work if video is set to loop) { "selector": "[data-custom-animation-id=\"fly-in-bottom-0-0.55\"]", "--x": "0", "--y": "calc(100 * 1vh + height())", "animations": [ { "duration": "0s", "keyframes": [ {"transform": "translate(var(--x), var(--y))"}, {"transform": "translate(var(--x), var(--y))"} ] }, { "delay": "0s", "duration": "0.55s", "easing": "cubic-bezier(0.2, 0.6, 0.0, 1)", "keyframes": [ {"transform": "translate(var(--x), var(--y))"}, {"transform": "translate(0, 0)"} ] } ] }

Now here's a call to action

Double click on the button below to configure your scene call to action { "selector": "[data-custom-animation-id=\"fly-in-bottom-0-0.55\"]", "--x": "0", "--y": "calc(100 * 1vh + height())", "animations": [ { "duration": "0s", "keyframes": [ {"transform": "translate(var(--x), var(--y))"}, {"transform": "translate(var(--x), var(--y))"} ] }, { "delay": "0s", "duration": "0.55s", "easing": "cubic-bezier(0.2, 0.6, 0.0, 1)", "keyframes": [ {"transform": "translate(var(--x), var(--y))"}, {"transform": "translate(0, 0)"} ] } ] } Visit JioCinema

INTERACTIVE CONTENT

Can add quizzes or polls anywhere within the story

HERE'S A POLL SCENE:

Alright, thanks for your time It was good while it lasted Drop me an email