# How to fade in an image in sync with video

**URL:** <https://forum.8thwall.com/t/how-to-fade-in-an-image-in-sync-with-video/1484>\
**Category:** Technical Support\
**Tags:** video\
**Created:** [May 27, 2024, 8:18pm UTC](https://forum.8thwall.com/t/how-to-fade-in-an-image-in-sync-with-video/1484 "2024-05-27T20:18:21Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![Massimo\_Di\_Leo](https://sea1.discourse-cdn.com/flex019/user_avatar/forum.8thwall.com/massimo_di_leo/32/658_2.png) [@Massimo\_Di\_Leo](https://forum.8thwall.com/u/Massimo_Di_Leo)\
**Post date:** [May 27, 2024, 8:18pm UTC](https://forum.8thwall.com/t/how-to-fade-in-an-image-in-sync-with-video/1484/1 "2024-05-27T20:18:21Z")

</div>

I need to have a png displayed after exactly 21 seconds from when the video over the target has been set to play (I am using the “image target with video sound” template).

Ideally the png should be “in sync” with the video, I mean it should appear (with a slow fade in if possible) after exactly 21 seconds of the video and should disappear when the video reaches 31 seconds. If the target is lost, of course the count down should be “stopped” until the video is resumed again.

Is there any way to achieve this result ?

---

<div class="post-metadata">

**Author:** ![Ian](https://sea1.discourse-cdn.com/flex019/user_avatar/forum.8thwall.com/ian/32/430_2.png) [@Ian](https://forum.8thwall.com/u/Ian)\
**Post date:** [May 28, 2024, 5:38pm UTC](https://forum.8thwall.com/t/how-to-fade-in-an-image-in-sync-with-video/1484/2 "2024-05-28T17:38:19Z")

</div>

You could set a settimout function after the initial vidoe is clicked.

> **[setTimeout() global function - Web APIs | MDN](https://developer.mozilla.org/en-US/docs/Web/API/setTimeout)**
>
> The global setTimeout() method sets a timer which executes a function or specified
> piece of code once the timer expires.

---

<div class="post-metadata">

**Author:** ![Rickard\_Elimaa](https://sea1.discourse-cdn.com/flex019/user_avatar/forum.8thwall.com/rickard_elimaa/32/202_2.png) [@Rickard\_Elimaa](https://forum.8thwall.com/u/Rickard_Elimaa)\
**Post date:** [May 28, 2024, 6:36pm UTC](https://forum.8thwall.com/t/how-to-fade-in-an-image-in-sync-with-video/1484/3 "2024-05-28T18:36:19Z")

</div>

1. If you add the image as an `a-image`, you can add a delay to the [animation](https://aframe.io/docs/1.5.0/components/animation.html).
2. If the image is an HTML element, then use a delay in the CSS animation.
3. You can set an event listener on the video element, listening for [timeupdate,](https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/timeupdate_event) and start the animation when 21 seconds have passed.

If you want to take pausing and resuming into account, then the third option is the most viable one.