Fade in?

Ask the community
,
1

I’m a novice to coding. I’m an artist, not a programmer. I’m trying to use some coding with Velo to add a simple fade in effect. I wish to provide a linked image towards the end of a trailer video. I can’t use the standard built-in fade animation because it does not give me a long enough delay. I can’t have the fade in occur until towards the end of a video. As you can see in the screen cap, I’ve added the code but absolutely nothing happens. I’ve searched everywhere I can think for a straightforward answer. What am I doing wrong here? I’m sure it’s a simple solution but I can’t figure it out. Please help.

1920×1080 258 KB

2

Hi there,

First of all, you need to put your code inside your page’s onReady function:

$w.onReady(() => {
    // Your code here
})

Also, the best way to achive your goal is to use the video component’s onEnded() event handler to show the image, here’s how:

$w.onReady(() => {
    $w('#video').onEnded(() => {
        $w('#Enter').show('fade', { duration: 2000, delay: 0 })
    })
})

In this case, you don’t need a delay since the text element will be displayed immediately as soon as the video ends.

Hope this helps~!
Ahmad

3

This helps a great deal! One thing though… when I go to preview it, the debugger states “ReferenceError: onEnded is not defined”. I’m sure there’s something else I’m missing.

4

Okay… follow up. I think I figured out what I needed to do. The debugger doesn’t give me any warning but it’s still not doing anything. Does this look right?

1920×1080 265 KB

5

@bartwillard yes, sorry, my bad, I had a typo in my answer, I’ve just updated it, it should work now.

6

@ahmadnasriya That worked! Thank you so much!

7

@bartwillard You’re welcome :blush: