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

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 >
  <div  data-splitting>lorem</div>
  <div  data-splitting>lorem</div>
  <div  data-splitting>ipsum</div>
  <div  data-splitting>ipsum</div>
</div>

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

CodePudding user response：

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 >
  <div>
    <div  data-splitting>lorem</div>
    <div  data-splitting>lorem</div>
  </div>  
  <div>
    <div  data-splitting>ipsum</div>
    <div  data-splitting>ipsum</div>
  </div>
</div>

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