Popup button to close should appear after the gif/video is completed?

Ask the Community Customization
1

I have to integrate a popup on my website where I want the button to close it shoudl appear after the gif is completed? Is it possible to delay the start of action button or cross or close button?

1 Like
2

A post was merged into an existing topic: Close when the video is over

4

Hi there and welcome aboard @Mudit_Agarwal :wave:

If you want to display the close button only after the GIF is completed, please create the HTML block in your widget’s settings and this code there:

image image

<style>
  :root {
    --eas-animation-delay: 15s;
  }

  [class*='Block__BaseBlock-sc']:has(div:not([class])) {
    margin: 0;
  }
  [class*='Popup__PopupCloseInside-sc'] {
    animation: appear var(--eas-animation-delay) ease-in-out forwards;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
  }

  @keyframes appear {
    99% {
      opacity: 0;
    }
    100% {
      opacity: 1;
      visibility: visible;
      pointer-events: auto;
    }
  }
</style>

In the 3rd line of the code, you need to set the length of your video/GIF:

image


Please test it out and let me know if you like the result :slightly_smiling_face:

5

Thanks so much, it worked… can you please help me with one more similar thing… I have to add a button “Learn More”, I want that to also start appearing after delay… how to implement similar HTML for that… or any other solution?

6

Never mind, I am able to achieve this by using the following code:

<style>
  :root {
    --eas-animation-delay: 13s;
  }

  [class*='Block__BaseBlock-sc']:has(div:not([class])) {
    margin: 0;
  }
  [class*='ButtonBase__ButtonContainer-sc-p43e7i-3 euBiGU'] {
    animation: appear var(--eas-animation-delay) ease-in-out forwards;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
  }

  @keyframes appear {
    99% {
      opacity: 0;
    }
    100% {
      opacity: 1;
      visibility: visible;
      pointer-events: auto;
    }
  }
</style>
2 Likes
7

Happy to hear that you’ve found a workaround for the Learn More button as well!

If anything else comes up, we are here to help :wink: