复杂文本动画逐字母答案

【问题标题】：Complex Text Animation Letter by Letter复杂文本动画逐字母
【发布时间】：2016-10-12 11:34:45
【问题描述】：

我有两个关于多个文本动画的问题：是否可以以这种方式为文本设置动画：

我在 After Effects 中准备了一个Example。

首先我的问题： 1.我只想让文本出现。之后它不应该消失。

当文本通过滚动出现在屏幕上时，如何启动动画？ -> 在滚动时

我在 Codepen 上找到的这个 sn-p：DEMO

HTML：

    <div class="name">

  <div class="letter">e</div>
  <div class="letter">x</div>
  <div class="letter">a</div>
  <div class="letter">m</div>
  <div class="letter">p</div>
  <div class="letter">l</div>
  <div class="letter">e</div>

</div>

CS：

body {
  min-height:100%;
  height:auto;
    font-family:"Unica One";
    font-size: 4rem;
  color:#fff;
  background:#000;
  display:flex;
  .name {
    display:flex;
    margin:auto;
    padding:0 1rem 1rem;
    position: relative;

    .letter {
      display:inline-block;
      opacity:0;
      transform:scale(0.9);
    }
  }
}

JS：

var opac = anime({
  targets: '.letter',
    opacity:1,
  scale:1,
    easing:'easeInBounce',
    delay: function(el, index) {
      return index * 80;
    },
  direction: 'alternate',
  loop: true
});

非常感谢！！！

【问题讨论】：

标签： javascript animation text onscroll

【解决方案1】：

问题第 1 部分：

为了停止循环，您可以删除属性direction 和loop。

var opac = anime({
    targets: '.letter',
    opacity: 1,
    scale: 1,
    easing: 'easeInBounce',
    delay: function(el, index) {
        return index * 80;
    },
    // direction: 'alternate', // stop vanishing
    // loop: true              // prevent looping
});

html { height:100%; }
body { min-height:100%; height:auto; font-family:"Unica One"; font-size: 4rem; color:#fff; background:#000; display:flex; }
.name { display:flex; margin:auto; padding:0 1rem 1rem; position: relative; }
.letter { display:inline-block; opacity:0; transform:scale(0.9); }

<script src="https://cdnjs.cloudflare.com/ajax/libs/animejs/1.0.0/anime.min.js"></script>
<div class="name">
  <div class="letter">e</div>
  <div class="letter">x</div>
  <div class="letter">a</div>
  <div class="letter">m</div>
  <div class="letter">p</div>
  <div class="letter">l</div>
  <div class="letter">e</div>
</div>

【讨论】：