How would I mask an element with an animated overlay?

Question

I'm trying to do some page transitions for a project I'm working on, I have an animated overlay that comes onto the screen when the user is navigating the site using Barba but I'm having an issue.

I want a logo centered on the page that rolls in with the overlay but I need it to be positioned separately from the overlay since any transform on the overlay would affect the logo as well. (I want the logo to mask with the overlay element)

What I've tried :

• Switching around the Element hierarchy/Z-index (I'm sure the problem lies somewhere in here)
• Trying different transforms
• Messing with Max Width (Had some success but I need the transform origin property)

Example -

let transitionOpen = false;

$('.transition-cta').on("click", function() {
  if (transitionOpen === false) {
    $('.transition-background').css("transform", "scaleX(1)");
    $(this).css("color", "white");
    transitionOpen = true;
  } else {
    $('.transition-background').css("transform", "scaleX(0)");
    $(this).css("color", "black");
    transitionOpen = false;
  }
});

body {
  background-color: lightblue;
}

.someContent {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.transition-wrapper {
  overflow: hidden;
}

.transition-background {
  width: 100%;
  height: 100vh;
  position: absolute;
  top: 0;
  left: 0;
  transform-origin: left;
  transition: 0.7s ease-in-out;
  background-color: #1f1f1f;
  transform: scaleX(0);
  z-index: 2;
}

.transition-center {
  background-image: url('https://i.imgur.com/6um9G9h.png');
  z-index: 2;
  width: 150px;
  height: 150px;
  position: absolute;
  background-repeat: no-repeat;
  background-size: cover;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.transition-cta {
  text-decoration: underline;
  cursor: pointer;
  z-index: 3;
  position: absolute;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.0/jquery.min.js"></script>
<div class="transition-wrapper">
  <div class="transition-background"></div>
  <!-- I want to clip this with the transition background -->
  <div title="I only want this to show with the transition overlay" class="transition-center"></div>
</div>

<div class="transition-cta">Trigger Transition</div>

<div class="someContent">
  <h1>Some Content</h1>
</div>

(The globe should roll in with the overlay)

This feels like an extremely simple problem but I'm really struggling to solve it. I can't tell if I'm burned out or this is actually as complicated as my brain is making it.

Thanks!

Answer 1

Use a clip-path animation instead and you can simplify your code by having the logo as background of the transition-wrapper

let transitionOpen = false;

$('.transition-cta').on("click", function() {
  $('.transition-wrapper').toggleClass('show');
  if (transitionOpen === false) {
    $(this).css("color", "white");
    transitionOpen = true;
  } else {
    $(this).css("color", "black");
    transitionOpen = false;
  }
});

body {
  background-color: lightblue;
}

.someContent {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.transition-wrapper {
  width: 100%;
  height: 100vh;
  position: absolute;
  top: 0;
  left: 0;
  transition: 0.7s ease-in-out;
  background: url('https://i.imgur.com/6um9G9h.png') center/150px 150px no-repeat;
  background-color: #1f1f1f;
  clip-path: polygon(0 0, 0%  0, 0%   100%, 0 100%);
  z-index: 3;
}

.transition-wrapper.show {
  clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
}

.transition-cta {
  text-decoration: underline;
  cursor: pointer;
  z-index: 3;
  position: absolute;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.0/jquery.min.js"></script>
<div class="transition-wrapper">
</div>

<div class="transition-cta">Trigger Transition</div>

<div class="someContent">
  <h1>Some Content</h1>
</div>