white-logo

KappaX

burger-icon
search-icon

/

Video's Current Time Event

With KappaX, you can create engaging experiences that respond to the timeline of your video. In this article, we'll show you how to achieve this with ease.

Importance of Time Event

As the video progresses, any of the layers can be shown or hidden without any interaction made. Because you can add clickable hotspots, timed overlays, and even create shop from video experiences without editing the video itself. The best part is that you can turn these layers interactive with logic!

Remember

Whenever the video timeline is used to add interactivity, the logic goes into the ‘Time’ event of the video layer and it requires a condition in the rules section. You can add multiple conditions and actions to create complex interactive experiences.

Implementing Actions

For this example, we have a video layer and several image layers on the artboard. By default, these images are hidden, but we'll write the logic to show them one after the other based on the current time of the video.

Here are the steps:

  1. Select the video layer and switch to the logic panel.
  2. Next, select the 'Time' event.
    Video Timeline1
  3. In the rules section, check if the current time of the video is equal to 1.5 seconds. In action, write "Show Donut Img 1”.
    Video Timeline2
  4. Add more blocks to show other images at an interval of 1.5 seconds as well.
    Video Timeline3
  5. Switch to preview mode, and you'll see that as the video starts playing, the images show up without any interaction needed.
  6. But that's not all! Let's add more logic to this. When the time reaches 9 seconds, we'll hide all the images and set the width of the video to 1920px.
    Video Timeline4

With KappaX, you can also add various transitions and other interactions based on the 'Time' event. It's easy and straightforward, so what are you waiting for? Let's get started and create some amazing interactive experiences!

On this page

Importance of Time Event

Remember

Implementing Actions