nasted element inside the target disappeared

[xmarya]

I'm new to SplitType, I just wanted to do a simple animation for the header of my website, it's working very nicely but I have a problem with the nested element.

HTML :

      <h1 class="main-heading all-heading-setting" id="main-heading">
        Lorem, ipsum dolor. <span class="gradiant-text">lorem</span> Lorem ipsum dolor sit amet consectetur adipisicing!
      </h1>

the css of the target and gradiant-text element :

.main-heading {
  font-size: 5rem;
  line-height: 1;
  max-width: 75%;
  text-shadow: 0 8px 16px rgb(0 0 0 / 0.1);

  /*for splitType package*/
  font-kerning: none;
}

.gradiant-text {
  text-transform: capitalize;
  -webkit-text-fill-color: transparent;
  background-image: linear-gradient(
    90deg,
    #28abe1 15%,
    #ff729f 50%,
    #f18f01 85%
  );
  -webkit-background-clip: text;
  background-clip: text;
  display: inline;

   /*for splitType package*/
   font-kerning: none;
}

javascript :

import SplitType from "split-type";
import { animate, stagger } from "motion";

// const headingMain = document.querySelector(".main-heading");
// const headingSub = document.querySelector(".sub-heading");

const headingsub = new SplitType("#sub-heading", {types: "lines"});
// const headingMain = new SplitType("#main-heading", {types: "words"});
const headingMain = SplitType.create('#main-heading');
const bringThemAllTogether = [...headingsub.lines, ...headingMain.words];

export const startAnimation = () => {
    animate(bringThemAllTogether, {y: [24, 0], opacity: [0, 1]}, {duration:[1], delay: stagger(0.08)});
}

maybe there is some css rules in the .gradiant-text class that conflict with SplitType? help please

[xmarya]

I solved the problem. maybe in the future someone will face the same issue so I put my going-around solution here.

because the package adds a

tag around each word I've added another css rule to apply .gradiant-text class for each div inside the same class, so it's like this :

.gradiant-text,
 .gradiant-text div{
  text-transform: capitalize;
  -webkit-text-fill-color: transparent;
  background-image: linear-gradient(
    90deg,
    #28abe1 15%,
    #ff729f 50%,
    #f18f01 85%
  );
  -webkit-background-clip: text;
  background-clip: text;
  /* display: inline; */

   /*for splitType package*/
   /* font-kerning: none; */
}

I hope that helps.