在滚动到显示时修改文本行动画答案

【问题标题】：Modifying Text Line Mask Animation on Scroll to on Reveal在滚动到显示时修改文本行动画
【发布时间】：2022-10-20 18:34:07
【问题描述】：

基本上我从 t.ricks 看到了这种惊人的效果：https://www.youtube.com/watch?v=yvqSioowCRc

我想在文本滚动到视图时做出相同的效果，而不是在滚动页面时播放效果

简而言之，我的问题是：我想在文本“出现”而不是“滚动”时播放动画

代码如下：

<style>
.line {
  position: relative;
}
.line-mask {
  position: absolute;
  top: 0;
  right: 0;
  background-color: black;
  opacity: 0.65;
  height: 100%;
  width: 100%;
  z-index: 2;
}
</style>

<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.8.0/gsap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.8.0/ScrollTrigger.min.js"></script>
<script src="https://unpkg.com/split-type"></script>
<script>
let typeSplit;
// Split the text up
function runSplit() {
  typeSplit = new SplitType(".split-lines", {
    types: "lines, words"
  });
  $(".line").append("<div class='line-mask'></div>");
  createAnimation();
}
runSplit();
// Update on window resize
let windowWidth = $(window).innerWidth();
window.addEventListener("resize", function () {
  if (windowWidth !== $(window).innerWidth()) {
    windowWidth = $(window).innerWidth();
    typeSplit.revert();
    runSplit();
  }
});

gsap.registerPlugin(ScrollTrigger);

function createAnimation() {
  $(".line").each(function (index) {
    let tl = gsap.timeline({
      scrollTrigger: {
        trigger: $(this),
        // trigger element - viewport
        start: "top center",
        end: "bottom center",
        scrub: 1
      }
    });
    tl.to($(this).find(".line-mask"), {
      width: "0%",
      duration: 1
    });
  });
}
</script>

【问题讨论】：

标签： jquery animation text

【解决方案1】：

我将使用的概念是为每一行设置不同的动画延迟，然后触发动画事件，例如通过将.line-mask 宽度设置为0%。

<div class="split-lines">
  <div class="line" style="display: block">
    Lorem Ipsum is
    <div class="line-mask" style="width: 100%; transition: width 0.2s ease-in;"></div>
  </div>
  <div class="line" style="display: block">
    simply dummy text of
    <div class="line-mask" style="width: 100%; transition: width 0.4s ease-in;"></div>
  </div>
  <div class="line" style="display: block">
    the printing and
    <div class="line-mask" style="width: 100%; transition: width 0.6s ease-in;"></div>
  </div>
</div>

这是一个具有相同概念的工作示例，延迟是内联样式还是 nth-child CSS 元素都没有关系：

let splitLines = document.getElementsByClassName('split-lines');

setTimeout(function() {
  splitLines[0].classList.add('animate');
}, 1000);

body {
  background: #000;
}
.split-lines {
  display: block;
  margin: 5% auto;
  color: #fff;
  font-size: 28px;
  line-height: 36px;
  width: 50%;
}
.split-lines.animate .line-mask {
  width: 0% !important;
}
.line {
  position: relative;
}
.line-mask {
  position: absolute;
  top: 0;
  right: 0;
  background-color: #000;
  opacity: 0.65;
  height: 100%;
  width: 100%;
  z-index: 2;
  transition: width 2s ease-in;
}
.line:nth-child(1) .line-mask {
  transition-delay: 0.2s;
}
.line:nth-child(2) .line-mask {
  transition-delay: 0.4s;
}
.line:nth-child(3) .line-mask {
  transition-delay: 0.6s;
}
.line:nth-child(4) .line-mask {
  transition-delay: 0.8s;
}
.line:nth-child(5) .line-mask {
  transition-delay: 1.0s;
}
.line:nth-child(6) .line-mask {
  transition-delay: 1.2s;
}
.line:nth-child(7) .line-mask {
  transition-delay: 1.4s;
}
.line:nth-child(8) .line-mask {
  transition-delay: 1.6s;
}
.line:nth-child(9) .line-mask {
  transition-delay: 1.8s;
}
.line:nth-child(10) .line-mask {
  transition-delay: 2s;
}

<div class="split-lines">
  <div class="line" style="display: block; text-align: start; width: 100%;">
    <div class="word" style="display: inline-block;">Lorem</div>
    <div class="word" style="display: inline-block;">Ipsum</div>
    <div class="word" style="display: inline-block;">is</div>
    <div class="line-mask" style="width: 100%;"></div>
  </div>
  <div class="line" style="display: block; text-align: start; width: 100%;">
    <div class="word" style="display: inline-block;">simply</div>
    <div class="word" style="display: inline-block;">dummy</div>
    <div class="word" style="display: inline-block;">text</div>
    <div class="word" style="display: inline-block;">of</div>
    <div class="line-mask" style="width: 100%;"></div>
  </div>
  <div class="line" style="display: block; text-align: start; width: 100%;">
    <div class="word" style="display: inline-block;">the</div>
    <div class="word" style="display: inline-block;">printing</div>
    <div class="word" style="display: inline-block;">and</div>
    <div class="line-mask" style="width: 100%;"></div>
  </div>
  <div class="line" style="display: block; text-align: start; width: 100%;">
    <div class="word" style="display: inline-block;">typesetting</div>
    <div class="word" style="display: inline-block;">industry.</div>
    <div class="line-mask" style="width: 100%;"></div>
  </div>
  <div class="line" style="display: block; text-align: start; width: 100%;">
    <div class="word" style="display: inline-block;">Lorem</div>
    <div class="word" style="display: inline-block;">Ipsum</div>
    <div class="word" style="display: inline-block;">has</div>
    <div class="line-mask" style="width: 100%;"></div>
  </div>
  <div class="line" style="display: block; text-align: start; width: 100%;">
    <div class="word" style="display: inline-block;">been</div>
    <div class="word" style="display: inline-block;">the</div>
    <div class="word" style="display: inline-block;">industry's</div>
    <div class="line-mask"></div>
  </div>
  <div class="line" style="display: block; text-align: start; width: 100%;">
    <div class="word" style="display: inline-block;">standard</div>
    <div class="word" style="display: inline-block;">dummy</div>
    <div class="word" style="display: inline-block;">text</div>
    <div class="line-mask"></div>
  </div>
  <div class="line" style="display: block; text-align: start; width: 100%;">
    <div class="word" style="display: inline-block;">ever</div>
    <div class="word" style="display: inline-block;">since</div>
    <div class="word" style="display: inline-block;">the</div>
    <div class="word" style="display: inline-block;">1500s,</div>
    <div class="line-mask"></div>
  </div>
  <div class="line" style="display: block; text-align: start; width: 100%;">
    <div class="word" style="display: inline-block;">when</div>
    <div class="word" style="display: inline-block;">an</div>
    <div class="word" style="display: inline-block;">unknown</div>
    <div class="line-mask"></div>
  </div>
  <div class="line" style="display: block; text-align: start; width: 100%;">
    <div class="word" style="display: inline-block;">printer</div>
    <div class="word" style="display: inline-block;">took</div>
    <div class="word" style="display: inline-block;">a</div>
    <div class="word" style="display: inline-block;">galley</div>
    <div class="line-mask"></div>
  </div>
</div>

ps：使用SCSS for loop，您可以非常快速地编写nth-child CSS 代码，例如：

$anim_start: 0.0;
$anim_gap: 0.2;
@for $i from 1 through 10 {
    .line::nth-child(#{$i}) .line-mask {
        transition-delay: #{$anim_start + ($anim_gap * ($i - 1))}s;
    }
}

这是CODEPEN 上的 SCSS 示例。

【讨论】：