javascript - Animate text on scroll svg, can't active both two shapes at the same time?

Question

I have made this animate text on scroll, where I would like to have a heart and a triangle. First I can't make it into a triangle. Second I can make both shapes work at the same time. When I remove one of the javascript parts, it works.

Made it into a codepen. Hope someone can help me out. Thanks!

This is my link to https://codepen.io/pen/bGwyKpM.

Otherwise also here:

HTML

<!-- Heart -->

  <div class="container1">
      <svg id="heart" data-name="heart" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 400 400">

          <path class="shape" id="shape" d="M-400 32 v-150 h200 a100,100 90 0,1 0,200 a100,100 90 0,1 -200,0 z" transform="rotate(225, 0, 0)"/>

          <text font-family="arial">
              <textPath xlink:href="#shape" id="textPath"> THE BLISS OF ADOPTION  ? THE BLISS OF ADOPTION  ? THE BLISS OF ADOPTION  ? THE BLISS OF ADOPTION  ? THE BLISS OF ADOPTION  ? </textPath>
          </text>
      </svg>
  </div>
  <!-- Triangle -->
  <div class="container2">
      <svg id="hearttwo" data-name="hearttwo" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 400 400">

          <path class="shape1" id="shape1" d="M-400 32 v-150 h200 a100,100 90 0,1 0,200 a100,100 90 0,1 -200,0 z" transform="rotate(225, 0, 0)"/>

          <text font-family="arial">
              <textPath xlink:href="#shape1" id="textPathB"> THE ULTIMATE FAIRYTALE ? THE ULTIMATE FAIRYTALE ? THE ULTIMATE FAIRYTALE ? THE ULTIMATE FAIRYTALE ? THE ULTIMATE FAIRYTALE ? </textPath>
          </text>
      </svg>
  </div>

CSS


/* heart shape */
.shape {
  fill: none;
  /* stroke: white; */
}

#heart {
  width: 90vmin;
  height: auto;
  object-fit: contain;
  /* overflow: hidden; */
}

#textPath {
  /* The font-size is really hacky, sorry :( */
  font-family: 'Till-Normal';
  --sizefactor: 1.112;
  font-size: calc(1em * var(--sizefactor));
  letter-spacing: calc(1em * var(--sizefactor));
  fill: var(--purple-full);
  font-weight: 800
}

.container1 {
  width: 100%;
  height: 50vh;
  display: flex;
  align-items: center;
  justify-content: center;
  /* background-color: palevioletred; */
}

/* 2 heart shape */
.shape1 {
  fill: none;
  /* stroke: white; */
}

#hearttwo {
  width: 90vmin;
  height: auto;
  object-fit: contain;
  /* overflow: hidden; */
}

#textPathB {
  /* The font-size is really hacky, sorry :( */
  font-family: 'Till-Normal';
  --sizefactor: 1.112;
  font-size: calc(1em * var(--sizefactor));
  letter-spacing: calc(1em * var(--sizefactor));
  fill: var(--purple-full);
  font-weight: 800
}

.container2 {
  width: 100%;
  height: 50vh;
  display: flex;
  align-items: center;
  justify-content: center;
  /* background-color: palevioletred; */
}

Java


const textPath = document.querySelector("#textPath");

const a = document.documentElement,
  b = document.body,
  st = "scrollTop",
  sh = "scrollHeight",
  startOffset = 0;

const offsetOnScroll = (percent, startOffset) =>
  textPath.setAttribute("startOffset", percent * 10 + startOffset);

textPath.setAttribute("startOffset", startOffset);

document.addEventListener("scroll", (event) => {
  let percent = ((a[st] || b[st]) / ((a[sh] || b[sh]) - a.clientHeight)) * 100;
  window.requestAnimationFrame(() => offsetOnScroll(percent * -1, startOffset));
});


/* number two; */
const textPathB = document.querySelector("#textPathB");

const a = document.documentElement,
  b = document.body,
  st = "scrollTop",
  sh = "scrollHeight",
  startOffset = 0;

const offsetOnScroll = (percent, startOffset) =>
  textPathB.setAttribute("startOffset", percent * 10 + startOffset);

textPathB.setAttribute("startOffset", startOffset);

document.addEventListener("scroll", (event) => {
  let percent = ((a[st] || b[st]) / ((a[sh] || b[sh]) - a.clientHeight)) * 100;
  window.requestAnimationFrame(() => offsetOnScroll(percent * -1, startOffset));
});

question from:https://stackoverflow.com/questions/65858913/animate-text-on-scroll-svg-cant-active-both-two-shapes-at-the-same-time

Answer 1

You have duplicated the variables' names

change the Number two to this:

/* number two; */
const textPathB = document.querySelector("#textPathB");
const aB = document.documentElement,
    bB = document.body,
    stB = "scrollTop",
    shB = "scrollHeight",
    startOffsetB = 0;
const offsetOnScrollB = (percent, startOffsetB) =>
    textPathB.setAttribute("startOffset", percent * 10 + startOffset);
    textPathB.setAttribute("startOffset", startOffset);
document.addEventListener("scroll", (event) => {
    let percent = ((aB[stB] || bB[stB]) / ((aB[shB] || bB[shB]) - aB.clientHeight)) * 100;
window.requestAnimationFrame(() => offsetOnScrollB(percent * -1, startOffset));
});