Button click animation can’t get to work

[chris]

I have two blocks, one contains a CTA button, the other a self hosted video.

What steps do I need to take to get the CTA block to fade out and play the video?

[manc]

How have you currently set it up?

I’d probably do it like this:
Create an OnClick event in the BF Panel, target set as the cta button, with 2 Actions

1. Toggle class on the cta block
2. Play Video with the video selector

Let’s say you toggle the class cta_hide, then in your cta’s block css, add something like:

%root% {
  transition: .25s all ease-out;
}

%root%.cta_hide {
  opacity: 0;
}

You could of course add the transition via the UI as well or even animate it using a timeline but that seems overkill for a fade out

Hope it helps, if it still doesn’t work, feel free to post some screenshots of your setup n stuff so we can investigate

[chris]

Hey! Thanks for replying. I really appreciate it.

I can get the CTA to fade out, but the video des not start playing. I also would like a different CTA to fade in at the end of the video. First things first though! How do I get the video to play?

Structure:

Section

• Container
  ---- Intro CTA Wrapper (this or the button can be click to start everything)
  -------- Heading
  -------- Text
  -------- Button
  ---- Outro CTA Wrapper
  -------- Heading
  -------- Text
  -------- Button
  ---- Media Wrapper
  -------- Self Hosted Video

I have then positioned all three “wrapper” blocks absolute and the container relative left 0 top 0 to layer each block one on top the other. The Intro wrapper fades out to reveal the video which has started playing. The video plays for say 16s and then just before it end, the outro CTA block fades in. I am thinking I will need to use the timeline for this very purpose since I don’t believe there is any way to trigger that outro cta to fade in when the video is near completion, other than time.

[manc]

Ok I’ve got it

Didn’t position anything absolute or anything but works:

To get the video to play, you need to target the actual video element, which isn’t the class you assigned to but rather .your-class video

First Event when clicking the intro wrapper or button or whatever:

Second, we create a custom event to detect when the video ends:

Now all that’s left is adding the fade-out via css using the toggled classes. If you do the fadeout in pure css, u might wanna play around with z-index too or add pointer-events: none to whichever wrapper thats currently hidden, so the text of the visible wrapper stays selectable.

You could of course do the animation via JS and completly hide the wrappers but I think css is good enough for this.

[chris]

Oh wow! Thanks @manc !

that’s got it, just a bit of z-index fiddling to finish it off.

I would like to learn the why part though, if you would be so kind.

I see that you put a class of .vid video as the target element. The only thing I had missed was that addition of video. Why is that needed? What does it add? What makes that needed? lol! I am very curious… lol

The other bit that really opened my eyes was the toggle class switch. That is super cool!
Combining that with the ended event is perfect if you want that css animation to start after the video ends. It works.
But, lets say on this project if I wanted the outro fade in to start 1s before the end of the video so that there is no pause? Then I would have to approach this in a different way. I am curious how that could be achieved?

Mahalo plenty Aloha bruddah!
Chris

[manc]

The .vid class is applied to the div wrapping the video, in order to access any events of the video though, we need to target the actual <video> element

I’m haven’t really worked with video events that much but there is a timeupdate event, which basically fires every time the video updates. How often exactly can vary by device and framerate (I think) but it seems more than accurate enough to do something X seconds before the video ends.

So you’d add an event like so:

and add the following JS:

// Get our outro wrapper
const outro = document.querySelector('.outro__wrapper');

// Add a class when the video only has 3 seconds left
if (trigger.currentTime > trigger.duration-3) {
  outro.classList.add("show");
}

Given that the event fires on every update, I added a class instead of toggling it. If I set it to toggle the class, we have a disco situation where the outro wrapper starts flashing as it gets the class toggled on and off.

You could define a variable and set it to true before running the time check, add that variable as a condition to the check and set it to false once your desired time is reached. That way it would only run once. Figured I’d keep it simple since I doubt there will be any performance hits in this case.

Here is an overview over all kinds of video events and other video related stuff: HTMLMediaElement: timeupdate event - Web APIs | MDN

Hope it helps and have fun experimenting Feel free to post back if you run into any issues.