Skip to main content

Fade in video text/overlay

John Persson

Hi,

Is it possible to fade in a text or image overlay when it comes to video transformations.

I'm working on a client project that requires us to insert text at certain points in a video. Inserting and styling the text was easy enough thanks to you documentation. The only part I'm missing is being able to fade the text in/out.

Thank you,
/John

1

Comments

20 comments

Date Votes
  • Yakir Perlin

    Hi John,

    Just add the fade effect (`e_fade`)and the start offset (`so`) like this : 

    http://res.cloudinary.com/demo/video/upload/l_text:Helvetica_60:Puppy,so_2,e_fade:6000/ar_2.5,c_crop/dog.mp4

    Note that for now, the fade-in duration counts from the begin of the video, and not from the starting offset point, we are going to fix it in next few weeks. we will update you on that.

     

     

     

     

    0
  • John Persson
    Edited

    Hi Yakir,

    Thank you for the fast response. I'm glad to hear your working on this feature.

    I notice the text appears in mid fade. I'm guessing  this is an issue related to what you mentioned about the fade-in duration.
    Can we expect a similar parameter for fade-out in the near future?

    Best,
    /John

    0
  • Yakir Perlin

    Hi Jhon,

    Fade-out overlay works the same, just set negative duration value as duration.

    As mention, this also needs some polish from our side and I will update you as soon as this feature will be ready.

     

    0
  • Yakir Perlin
    Edited

    Hi Jhon,

    I'm happy to tell you that this issue has been fixed :)

    It'd be great if you could please try it and let me know if it helps with your use-case?

    Thanks,

    Yakir

     

    0
  • Tools

    Thanks for this help, Yakir.

    Is it possible to have text slide in from one side of the video? So instead of fade in, slide in?

     

    Thanks!

    0
  • Aditi Madan

    Hi,

    Currently, we do not have a slide effect like fade but it can be achieved using a animated gif.

    Here is an example: https://res.cloudinary.com/demo/video/upload/l_image:giphy_bkjwiz,g_south_west/dog.mp4

    Regards,
    Aditi

    0
  • Tools

    Thanks for the feedback I will try that.

    On another note, I am trying to add text that fades in and fades out. For example: fade in at 2 seconds and fade out at 8 seconds. Very short fade in and fade out.

     

    Here is my attempt: https://res.cloudinary.com/demo/video/upload/l_text:Helvetica_60:Puppy,so_2,eo_8,e_fade:-1000/ar_2.5,c_crop/dog.mp4

     

    Let me know if you can help with this.

    Thanks!

    0
  • Eyal Katz Talmon

    Hi,

    You can apply the fade effect in order to both fade in and fade out a layer, e.g. take a look at the following link - 

    https://res.cloudinary.com/demo/video/upload/l_text:Helvetica_60:Puppy/e_fade:1000/e_fade:-5000/fl_layer_apply,so_4,du_6/ar_2.5,c_crop/dog.mp4

    Notice that I have used the layer_apply flag, which encapsulates the layer - meaning that everything in between the fl_layer_apply and the layer declaration (l_text...) is applied on the layer. Parameters that are within the fl_layer_apply section are in charge of the relation between the layer and the underlying video, in this case - start offset and the duration of the layer.

    Hope this helps!

    0
  • Tools

    Thank you this works nicely. May I ask what the 1000 and -5000 are counting from?

    0
  • Eyal Katz Talmon

    Hi, of course :)

    When the start offset time arrives, the fade-in effect (with the positive number as argument), is making the layer to gradually appear. At the same time ('so') the fade-out effect (with the negative number as argument) is making the layer to gradually disappear - so they essentially overlap each other. I chose a short fade in time (1 second) and a slow fade-out time (5 seconds) so the layer will have time to fully appear before the fade-out start to show.

    For example, if I choose 1 second for both the fade in and fade out, the layer will not get to be fully opaque -

    https://res.cloudinary.com/demo/video/upload/l_text:Helvetica_60:Puppy/e_fade:1000/e_fade:-1000/fl_layer_apply,so_4,eo_10/ar_2.5,c_crop/dog.mp4

    By the way, the duration (`du`) and the end offset (`eo`) are redundant in this use case, and you can just use the fade in and fade out effect -

    https://res.cloudinary.com/demo/video/upload/l_text:Helvetica_60:Puppy/e_fade:1000/e_fade:-5000/fl_layer_apply,so_4/ar_2.5,c_crop/dog.mp4

    0
  • Tools

    Very helpful thank you.

     

    Would something like this (47 seconds in video) be possible with cloudinary? Essentially, moving objects around and creating a slideshow style video?

     

    https://youtu.be/fhxPMHKoQvo?t=47

    0
  • Ido

    Hi

    The transition of one slide to the other is not supported, but it's possible to concatenate several videos as explained here

    So it would be possible to display one video and then jump to the next.

    Does that make sense?

    0
  • May

    Hello!

    The fade in in this video does not seem to be working for this url. What could be the possible issue?

    https://res.cloudinary.com/demo/video/upload/co_rgb:ffffff,e_fade:3000,eo_15,g_south,l_text:Helvetica_30_700:Melbourne%20City,so_5,y_200/ar_2.5,c_crop/dog.mp4

    Thank you!

    0
  • Loic Verger Del Bove

    Hi May,

    The fade in effect still starts from the beginning of the video and not the beginning of the layer so in your case, the layer appears when the fade effect is already done. If you set your fade effect to 8s. You can see the effect: https://res.cloudinary.com/demo/video/upload/co_rgb:ffffff,e_fade:8000,eo_15,g_south,l_text:Helvetica_30_700:Melbourne%20City,so_5,y_200/ar_2.5,c_crop/dog.mp4

    Best,

    Loic

    0
  • May
    Edited

    Thanks Loic. Perfect! So does that mean if my video text overlay starts at 5 sec but I want my fade effect to appear for 3 sec long then, I need to set the e_fade to be 8000 so that the fading will take place for 3 sec (from 5 sec to 8 sec). And also is there a way to control how much we want to fade? For the case like white text, the fading is not so obvious. Thank you!

    0
  • Stephen Doyle

    Hi May,

    If you want the overlay to fade in for 3 seconds, then for it to be fully visible for 5 additional seconds, the value for e_fade would be 3000, but you may need to move the start time for the overlay to be 3 seconds earlier than before.

    Loic's previous example works like this:
    so_5 - adds the text at the 5 second mark
    e_fade:8000 fade in for 8 seconds

    So you can see when watching the video that the text starts to fade in after 5 seconds, and fully present after 13

    You may also want to check the "layer_apply" flag also, if you want to apply effects or other transformations specifically on the overlays and not to the overall result: https://cloudinary.com/documentation/layers#multiple_layer_transformations_fl_layer_apply

    The only parameter on the fade transformation is how long the fade will take, so you can speed it up or slow it down, but this won't affect how it appears otherwise - if you need more contrast when fading in a text overlay, you may want to add a different text color, background, or outline color to the text to make it easier to see

    For example: https://res.cloudinary.com/demo/video/upload/co_rgb:ffffff,e_fade:8000,eo_15,g_south,l_text:Helvetica_30_700:Melbourne%20City,so_5,y_200/co_black,e_outline:fill:2/fl_layer_apply/ar_2.5,c_crop/dog.mp4

    Regards,

    Stephen

    0
  • Patt

    Hey I hope someone can help me out

    I'm curious as to whether we can keep the same parameters for the text fading in, but delay the text coming in until 5 seconds in

    I believe Yakir 4 years ago further up this thread had a solution where you could fade in the text from the starting offset point and not the beginning of the video, but I'm finding it hard to find documentation to make that possible

    Example where my start offset is set to 0
    https://res.cloudinary.com/demo/video/upload/co_rgb:FF0000,e_fade:500,eo_15,g_south,l_text:Helvetica_43:TEXT,so_0,y_300/dog.mp4

    Example where my start offset is set to 5 but it loses that really nice fade in from the previous example
    https://res.cloudinary.com/demo/video/upload/co_rgb:FF0000,e_fade:500,eo_15,g_south,l_text:Helvetica_43:TEXT,so_5,y_300/dog.mp4

     

    I'd greatly appreciate any help
    Thanks
    Patt

    0
  • Victor Li

    Hi Patt,

    Thanks for reaching out to us with this. That is something we've considered implementing in the past, but so far it hasn't taken priority over other features and fixes for development. If we end up implementing this, we'd be happy to let you know!

    Regards,
    Victor

    0
  • Eduardo Verillo

    Hi Victor,

    We're developing a solution where multiple videos will be concatenated, each with its own text overlay fading in and out. Given all the features you offer, this seemed like a no-brainer, but now became a major roadblock for our client. Is there a way to work around this?

    Regards,
    Eduardo

     

    0
  • Aleksandar Kostadinov

    Hi Eduardo,

    I see that you created a ticket directly with us (via https://support.cloudinary.com/hc/en-us/requests/new) as well regarding this topic so I've just responded on there as well.

    0

Post is closed for comments.

Didn't find what you were looking for?

New post