While the fade out is delayed, have the curtains close

HTML & CSS
1

I added a delay to the fade out here.

.fadingOut .isOpen {
  animation: fadingOut 1s;
  animation-delay: 8s;
}

While the fade out is delayed, how would I be able to have the curtains close?

https://jsfiddle.net/2h9xwoL4/

I found this where it is able to open and close. https://codepen.io/geoffgraham/pen/OXJMmY

Can this be used to have the curtains close?

 function addCurtains(exitButtons) {
    const container = exitButtons.closest(".container");
    const curtains = container.querySelector(".sliding-panels");
    curtains.classList.add(".curtain");
  }

  function exitClickHandler(evt) {
    resetPage();
    addCurtains(evt.currentTarget);
  }

What would need to be added to the css?

Would I be adding some kind of reverse animation?

Instead of forwards, backwards?

I think I have the right idea, I just don’t know how to implement it.

.container.active .curtain .panel-left {
  animation: curtain1 8s backwards 1s;
}

@keyframes curtain1 {
  to {
    transform: translateX(calc(-100% - 1px));
  }
}
.container.active .curtain .panel-right {
  animation: curtain2 8s backwards 1s;
}

@keyframes curtain2 {
  to {
    transform: translateX(calc(100% + 1px));
  }
}

If I am able to make an animation appear after clicking on the playButtons,

Being the curtains opening.

I should be able to make an animation appear after clicking the exit button where I added a delay to it which would allow for the curtains to close.

Maybe it’s more complicated than I realize.

I think what I am trying to do should be able to work, but I don’t know how to put the pieces together.

2

I think I would be using animation-direction: reverse;
https://developer.mozilla.org/en-US/docs/Web/CSS/animation-direction

animation: curtain2 8s reverse;

But I still don’t know how I would get it to work in the code.

Putting all the pieces together.

3

When the button is clicked you will need to add a class that you can use to create the new animation. You may be able to use the same animation name but use animation-direction reverse.

However it may be easier to create a new animation in the other direction.

You would then need to remove that class when the body fade has ended.

4

You could use the fadingOut class to trigger a new animation. Assumng you have set the delay as you mentioned you could add this new animation.

.fadingOut .container.active .curtain .panel-left {
  animation: curtain1-reverse 8s forwards;
}

.fadingOut .container.active .curtain .panel-right {
  animation: curtain2-reverse  8s forwards;
}

@keyframes curtain1-reverse {
    from {
    transform: translateX(calc(-100% - 1px));
  }
  to {
    transform: translateX(0);
  }
}

@keyframes curtain2-reverse {
  from {
    transform: translateX(calc(100% - 1px));
  }
  
   to {
    transform: translateX(0);
  }
}

It’s easier than messing about with the original as that would need kick starting.

Of course you are switching the video off straight away which means the curtains close over a blank screen. That will be something for you to work out.

1 Like
5

Only the right curtain is moving here, the left curtain stays still.

How is that fixed?

https://jsfiddle.net/r071das4/

.container.active .curtain .panel-left {
  animation: curtain1 8s forwards 1s;
}

@keyframes curtain1 {
  to {
    transform: translateX(calc(-100% - 1px));
  }
}
.container.active .curtain .panel-right {
  animation: curtain2 8s forwards 1s;
}

@keyframes curtain2 {
  to {
    transform: translateX(calc(100% + 1px));
  }
}
.container.active .curtain .panel-left {
  animation: curtain3 8s backwards 1s;
}


.fadingOut .container.active .curtain .panel-left {
  animation: curtain1-reverse 8s forwards;
}



@keyframes curtain1-reverse {
    from {
    transform: translateX(calc(-100% - 1px));
  }
  to {
    transform: translateX(0);
  }
}
.fadingOut .container.active .curtain .panel-right {
  animation: curtain2-reverse  8s forwards;
}
@keyframes curtain2-reverse {
  from {
    transform: translateX(calc(100% - 1px));
  }
  
   to {
    transform: translateX(0);
  }
}
6

That’s because you changed the animation name!

Remove this code:

.container.active .curtain .panel-left {
  animation: curtain3 8s backwards 1s;
}

Note that the value ‘backwards’ refers to the ‘fill-mode’ anyway and means that the element returns to its previous property states. You should have added animation-direction:reverse but not on that rule and not in that way as you just break the initial animation.

1 Like
7

Fixed: https://jsfiddle.net/p4xhzf3d/

1 Like
8

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.