Skip Video and cancel interaction

Design help Animations & Interactions
1

Hi people,

my page starts with an 16 sec. video. I created an interaction on page load with 16 sec. delay. So when the video is over, my interaction starts.
Now the client wants a “skip” button. When i click the “skip” button, the same “page load”-interaction (this time on “mouse click”-trigger) starts. But after 16 sec. the “page load” interaction also starts.
How can i solve this situation? I want both options. That means the “page load”-interaction should get “overwritten”. How can i achieve this?
Thanks in advance.

Best regards,

Yaz

Here is my public share link: [LINK](https://preview.webflow.com/preview/bethmanns4?utm_medium=preview_link&utm_source=designer&utm_content=bethmanns4&preview=efda9feea53b1f64c12b7f4bc1272245&workflow=preview)
(how to access public share link)

2

hi @Yaz the one way is to assign click listener to button with this if logic:

if button is clicked

  1. hide video ( one way you can do that is by adding class that will hide element)
  2. stop video (not sure about this as it is background video)
  3. start header animation (you can create this animation with CSS and again using class to be added)
    else
  4. set timeout 16s to play CSS animation

it is very short overview of one way how it can be done with custom code. :wink:

3

Hey Stan,

thanks for the ideas. Actually i need code for this…
Im desperate, bro! Can you code me this? How much would it cost?