1

I'm working on an interactive website assignment, and I'm using video's for some parts. I managed to change the background-video src when a particular element is clicked, but the transition is very abrupt. I want it to be smooth and fade out.

I tried adding transition: all .3s ease-in-out; to the video css class, but that didn't work.

My current code:

JS

const handleClickItem = e => {
    const $video = document.querySelector('.omgeving_vid');
    const activeItem = e.currentTarget;
    console.log(activeItem);
    updateGroup(activeItem); //for changing opacity of elements, not relevant
    console.log(activeItem.dataset.omgeving);

    if (activeItem.dataset.omgeving === 'sneeuw') {
      $video.setAttribute('src', './assets/longread/new_snowstorm.mp4');
    } else if (activeItem.dataset.omgeving === 'regen') {
      $video.setAttribute('src', './assets/longread/new_rainfall.mp4');
    }
  };

HTML

  <video class="omgeving_vid" src="./assets/longread/new_snowstorm.mp4" autoplay loop muted></video>
  <div class="omgeving-options">
    <div data-omgeving="assen" class="omgeving--option assen">
    <img src="./assets/longread/ash_icon.png" alt="ash">
    <p class="omgeving-options--title">Assen</p>
    </div>
    <div data-omgeving="sneeuw" class="omgeving--option sneeuw">
      <img src="./assets/longread/snow_icon.png" alt="snow">
      <p class="omgeving-options--title">Sneeuw</p>
    </div>
    <div data-omgeving="regen" class="omgeving--option regen">
    <img src="./assets/longread/rain_icon.png" alt="rain">
    <p class="omgeving-options--title">Regen</p>
    </div>
  </div>
Arthur Robaeys
  • 327
  • 3
  • 15
  • 1
    I suggest using CSS animations. This answer has the code for how to do that. https://stackoverflow.com/questions/11660710/css-transition-fade-in – Chris Hawkes Jan 22 '20 at 20:52
  • I tried the example code, but I think css transitions don't apply when I'm just changing the src, because it still doesn't fade like I hoped. – Arthur Robaeys Jan 22 '20 at 21:00
  • 2
    You can't animate/transition changing the source directly. You will need at least two `video` elements with the src attribute already set and transition between those two elements. – Jon P Jan 22 '20 at 21:26
  • Using gsap you can wait for the onComplete event to trigger then switch the video source and then transition back in. – Tom Shaw Jan 22 '20 at 22:57

0 Answers0