How can I get SplittingJS to work on two different elements?

Okay so I’m trying to get two separate divs to have a Splitting.js effect when hovering a parent element to both of the divs. The problem is it’s only applying to the first div, not both.

Because of the way this code is being used, it’s not possible to put the text into just one div – they have to be separate (they’re being layered with z-index. so headertitleone is z-index 0, then there’s an image between them, and then headertitletwo is the top layer with z-index 4)

Here’s the code:

console.clear();

Splitting();

.headerobjects {
  width: 500px;
  height: 500px;
  position: relative;
  left: 5%;
}

.headertitleone {
  font-size: 5rem;
  color: black;
  position: absolute;
  top: 10px;
  left: 10px;
  font-family: serif;
}

.headertitletwo {
  font-size: 5rem;
  color: black;
  position: absolute;
  top: 80px;
  left: 20px;
  z-index: 4;
  font-family: serif;
}

.headertitleone {
  grid-area: 1;
  transition: opacity 0.4s cubic-bezier(0.445, 0.05, 0.55, 0.95), transform 0.4s cubic-bezier(0.445, 0.05, 0.55, 0.95);
}

.headertitleone .word {
  white-space: nowrap;
}

.headertitletwo .word {
  white-space: nowrap;
}

.headertitleone .char {
  display: inline-block;
  transform-origin: 50% 50% 0.4em;
  transition: transform 0.5s cubic-bezier(0.5, 0, 0, 1);
  transition-delay: calc(0ms + var(--char-index) * 25ms);
  backface-visibility: hidden;
  margin: 0 -0.02em;
}

.headertitletwo .char {
  display: inline-block;
  transform-origin: 50% 50% 0.4em;
  transition: transform 0.5s cubic-bezier(0.5, 0, 0, 1);
  transition-delay: calc(0ms + var(--char-index) * 25ms);
  backface-visibility: hidden;
  margin: 0 -0.02em;
}

.headertitleone:nth-child(2),
.headertitletwo:nth-child(2) {
  font-family: sans-serif;
}

.headertitleone:nth-child(2) .char,
.headertitletwo:nth-child(2) .char {
  transform: rotate3d(1, -0.5, 0, 90deg);
}

.headerobjects:hover .headertitleone:nth-child(1) {
  opacity: 0;
}

.headerobjects:hover .headertitletwo:nth-child(1) {
  opacity: 0;
}

.headerobjects:hover .headertitleone:nth-child(1) .char {
  transform: rotate3d(1, 0.3, 0, -90deg);
}

.headerobjects:hover .headertitletwo:nth-child(1) .char {
  transform: rotate3d(1, 0.3, 0, -90deg);
}

.headerobjects:hover .headertitleone:nth-child(2) {
  opacity: 1;
}

.headerobjects:hover .headertitletwo:nth-child(2) {
  opacity: 1;
}

.headerobjects:hover .headertitleone:nth-child(2) .char {
  transform: rotate3d(0, 0, 0, 90deg);
}

.headerobjects:hover .headertitletwo:nth-child(2) .char {
  transform: rotate3d(0, 0, 0, 90deg);
}

<link rel="stylesheet" href="https://unpkg.com/splitting/dist/splitting.css" />
<link rel="stylesheet" href="https://unpkg.com/splitting/dist/splitting-cells.css" />

<div class="headerobjects">
  <div class="headertitleone" data-splitting>lorem</div>
  <div class="headertitleone" data-splitting>lorem</div>
  <div class="headertitletwo" data-splitting>ipsum</div>
  <div class="headertitletwo" data-splitting>ipsum</div>
</div>

<script src="https://unpkg.com/splitting/dist/splitting.min.js"></script>

Answer

Encapsulating each into its own <div> seems to make the library affect both. Please below demo:

console.clear();

Splitting();

.headerobjects {
  width: 500px;
  height: 500px;
  position: relative;
  left: 5%;
}

.headertitleone {
  font-size: 5rem;
  color: black;
  position: absolute;
  top: 10px;
  left: 10px;
  font-family: serif;
}

.headertitletwo {
  font-size: 5rem;
  color: black;
  position: absolute;
  top: 80px;
  left: 20px;
  z-index: 4;
  font-family: serif;
}

.headertitleone {
  grid-area: 1;
  transition: opacity 0.4s cubic-bezier(0.445, 0.05, 0.55, 0.95), transform 0.4s cubic-bezier(0.445, 0.05, 0.55, 0.95);
}

.headertitleone .word {
  white-space: nowrap;
}

.headertitletwo .word {
  white-space: nowrap;
}

.headertitleone .char {
  display: inline-block;
  transform-origin: 50% 50% 0.4em;
  transition: transform 0.5s cubic-bezier(0.5, 0, 0, 1);
  transition-delay: calc(0ms + var(--char-index) * 25ms);
  backface-visibility: hidden;
  margin: 0 -0.02em;
}

.headertitletwo .char {
  display: inline-block;
  transform-origin: 50% 50% 0.4em;
  transition: transform 0.5s cubic-bezier(0.5, 0, 0, 1);
  transition-delay: calc(0ms + var(--char-index) * 25ms);
  backface-visibility: hidden;
  margin: 0 -0.02em;
}

.headertitleone:nth-child(2),
.headertitletwo:nth-child(2) {
  font-family: sans-serif;
}

.headertitleone:nth-child(2) .char,
.headertitletwo:nth-child(2) .char {
  transform: rotate3d(1, -0.5, 0, 90deg);
}

.headerobjects:hover .headertitleone:nth-child(1) {
  opacity: 0;
}

.headerobjects:hover .headertitletwo:nth-child(1) {
  opacity: 0;
}

.headerobjects:hover .headertitleone:nth-child(1) .char {
  transform: rotate3d(1, 0.3, 0, -90deg);
}

.headerobjects:hover .headertitletwo:nth-child(1) .char {
  transform: rotate3d(1, 0.3, 0, -90deg);
}

.headerobjects:hover .headertitleone:nth-child(2) {
  opacity: 1;
}

.headerobjects:hover .headertitletwo:nth-child(2) {
  opacity: 1;
}

.headerobjects:hover .headertitleone:nth-child(2) .char {
  transform: rotate3d(0, 0, 0, 90deg);
}

.headerobjects:hover .headertitletwo:nth-child(2) .char {
  transform: rotate3d(0, 0, 0, 90deg);
}

<link rel="stylesheet" href="https://unpkg.com/splitting/dist/splitting.css" />
<link rel="stylesheet" href="https://unpkg.com/splitting/dist/splitting-cells.css" />

<div class="headerobjects">
  <div>
    <div class="headertitleone" data-splitting>lorem</div>
    <div class="headertitleone" data-splitting>lorem</div>
  </div>  
  <div>
    <div class="headertitletwo" data-splitting>ipsum</div>
    <div class="headertitletwo" data-splitting>ipsum</div>
  </div>
</div>

<script src="https://unpkg.com/splitting/dist/splitting.min.js"></script>