Ignore nested elements

미리보기 안의 버튼·입력·포인터로 모션을 확인하세요. 실행 방식은 아래 활용 메모를 참고하세요.

<!doctype html>
<!-- Source: https://codepen.io/GreenSock/pen/JojaebV; archived original panels separately. Runtime: official GSAP 3.15.0. -->
<html lang="en" class=""><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><title>Ignore nested elements</title>

<link rel="stylesheet" href="https://asset.wemashup.com/wp-content/uploads/wm-asset-library/gsap/shared/xxmzBrw.css">
<style>
html,
body {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
}

h2 {
  opacity: 0
}

.container {
  position: relative;
  width: 90vw;
  display: flex;
  flex-direction: column;
  align-items: center;
  border-radius: 9px;
}

.line {
  overflow: hidden;
}

.word {
  border: 1.5px dashed var(--color-surface-white);
  background-image: var(--color-text-gradient);
  background-size: 100%;
  -webkit-background-clip: text;
  -moz-background-clip: text;
  -webkit-text-fill-color: transparent;
  -moz-text-fill-color: transparent;
  background-clip: text;
  text-fill-color: transparent;
  min-height: 50px;
  padding: 1rem;
  border-radius: 10px;
  margin: 0.25rem;
}

/*   style added to align boxes for styling purposes - not necessary for */
sup {
  line-height: 0 
}
</style></head><body>
<div class="container">
  <h2>Split with ignored<sup>1</sup> nested elements<sup>™</sup></h2>
</div>

<script src="https://asset.wemashup.com/wp-content/uploads/wm-asset-library/gsap/shared/gsap-3.15.0-gsap.min.js"></script>
<script src="https://asset.wemashup.com/wp-content/uploads/wm-asset-library/gsap/shared/368d7310ee9cf598.js"></script>
<script src="https://asset.wemashup.com/wp-content/uploads/wm-asset-library/gsap/shared/gsap-3.15.0-SplitText.min.js"></script>
<script>
gsap.registerPlugin(SplitText);

document.fonts.ready.then(() => {
  gsap.set("h2", { opacity: 1 });

  const headlineSplit = SplitText.create("h2", {
    type: "words",
    wordsClass: "word++",
    ignore: "sup"
  });

  gsap.from(headlineSplit.words, {
    y: -100,
    opacity: 0,
    rotation: "random(-80, 80)",
    stagger: 0.1,
    duration: 1,
    ease: "back"
  });
});

</script></body></html>

<div class="container">
  <h2>Split with ignored<sup>1</sup> nested elements<sup>™</sup></h2>
</div>

html,
body {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
}

h2 {
  opacity: 0
}

.container {
  position: relative;
  width: 90vw;
  display: flex;
  flex-direction: column;
  align-items: center;
  border-radius: 9px;
}

.line {
  overflow: hidden;
}

.word {
  border: 1.5px dashed var(--color-surface-white);
  background-image: var(--color-text-gradient);
  background-size: 100%;
  -webkit-background-clip: text;
  -moz-background-clip: text;
  -webkit-text-fill-color: transparent;
  -moz-text-fill-color: transparent;
  background-clip: text;
  text-fill-color: transparent;
  min-height: 50px;
  padding: 1rem;
  border-radius: 10px;
  margin: 0.25rem;
}

/*   style added to align boxes for styling purposes - not necessary for */
sup {
  line-height: 0 
}

gsap.registerPlugin(SplitText);

document.fonts.ready.then(() => {
  gsap.set("h2", { opacity: 1 });

  const headlineSplit = SplitText.create("h2", {
    type: "words",
    wordsClass: "word++",
    ignore: "sup"
  });

  gsap.from(headlineSplit.words, {
    y: -100,
    opacity: 0,
    rotation: "random(-80, 80)",
    stagger: 0.1,
    duration: 1,
    ease: "back"
  });
});