- 原文地址：Making Stagger Reveal Animations for Text
- 原文作者：Mary Lou
Thibaud Allie 制作了这个精彩的动画，您能够在 Dani Morales 的网站在线观看。单击“对于”（而后单击“敞开”）会产生这种动画成果。最近在许多设计中都应用了这种在印刷元素上的显示、暗藏动画成果。在 Codrops，咱们将其称为“展现”动画。
我很观赏这种文字动画成果，并想应用 GSAP 和 Splitting.js 从新实现它。因而，我做了一个相似的基于版式的布局，并通过交织字母动画来挪动文本。
简化的标记如下所示：
<section class="content__item content__item--home content__item--current"> <p class="content__paragraph" data-splitting>Something</p> <p class="content__paragraph" data-splitting>More</p> ...</section><section class="content__item content__item--about"> <p class="content__paragraph" data-splitting>Something</p> <p class="content__paragraph" data-splitting>Else</p> ...</section>请留神，content__paragraph 元素的必要款式是 overflow: hidden 显示/显示动画能够应用的款式。
所有具备“数据拆分”属性的元素，将被拆分为多个局部，而后咱们能够别离对其进行动画解决。接下来，让咱们看一下 JavaScript 代码：
首先，咱们须要导入一些库和款式：
import "splitting/dist/splitting.css";import "splitting/dist/splitting-cells.css";import Splitting from "splitting";import { gsap} from 'gsap';import { preloadFonts} from './utils';import Cursor from "./cursor";我在这里应用了一些Adobe字体 (Freight Big Pro 和 Tenon)，让咱们预加载它们：
preloadFonts('lwc3axy').then(() => document.body.classList.remove('loading'));而后把所有文本拆分为多个跨度：
Splitting();该设计具备一个自定义游标，咱们将其示意如下：
new Cursor(document.querySelector('.cursor'))让咱们获取所有相干的 DOM 元素：
let DOM = { content: { home: { section: document.querySelector('.content__item--home'), get chars() { return this.section.querySelectorAll('.content__paragraph .word > .char, .whitespace'); }, isVisible: true }, about: { section: document.querySelector('.content__item--about'), get chars() { return this.section.querySelectorAll('.content__paragraph .word > .char, .whitespace') }, get picture() { return this.section.querySelector('.content__figure'); }, isVisible: false } }, links: { about: { anchor: document.querySelector('a.frame__about'), get stateElement() { return this.anchor.children; } }, home: document.querySelector('a.frame__home') }};当初让咱们看看 GSAP 时间轴，其中产生了不堪设想的事件（还有一些默认设置）：
const timelineSettings = { staggerValue: 0.014, charsDuration: 0.5};const timeline = gsap.timeline({ paused: true }) .addLabel('start') // 错开首页局部字符的动画 .staggerTo(DOM.content.home.chars, timelineSettings.charsDuration, { ease: 'Power3.easeIn', y: '-100%', opacity: 0 }, timelineSettings.staggerValue, 'start') // 在这里，咱们进行切换 // 咱们须要为内容局部切换以后类 .addLabel('switchtime') .add(() => { DOM.content.home.section.classList.toggle('content__item--current'); DOM.content.about.section.classList.toggle('content__item--current'); }) // 更改主体的背景色 .to(document.body, { duration: 0.8, ease: 'Power1.easeInOut', backgroundColor: '#c3b996' }, 'switchtime-=timelineSettings.charsDuration/4') // 将在其中设置动画的 about 局部元素的起始值 .set(DOM.content.about.chars, { y: '100%' }, 'switchtime') .set(DOM.content.about.picture, { y: '40%', rotation: -4, opacity: 0 }, 'switchtime') // 错开 about 局部字符的动画 .staggerTo(DOM.content.about.chars, timelineSettings.charsDuration, { ease: 'Power3.easeOut', y: '0%' }, timelineSettings.staggerValue, 'switchtime') // 最初，对图片进行动画解决 .to(DOM.content.about.picture, 0.8, { ease: 'Power3.easeOut', y: '0%', opacity: 1, rotation: 0 }, 'switchtime+=0.6');当咱们单击“对于”或徽标、主页链接时，咱们想通过播放和倒转工夫线来切换以后内容。咱们还心愿切换“对于”和“敞开”链接的以后状态：
const switchContent = () => { DOM.links.about.stateElement[0].classList[DOM.content.about.isVisible ? 'add' : 'remove']('frame__about-item--current'); DOM.links.about.stateElement[1].classList[DOM.content.about.isVisible ? 'remove' : 'add']('frame__about-item--current'); timeline[DOM.content.about.isVisible ? 'reverse' : 'play'](); DOM.content.about.isVisible = !DOM.content.about.isVisible; DOM.content.home.isVisible = !DOM.content.about.isVisible;};DOM.links.about.anchor.addEventListener('click', () => switchContent());DOM.links.home.addEventListener('click', () => { if ( DOM.content.home.isVisible ) return; switchContent();});这就是所有的内容！它并不太简单，您能够应用这种字母动画来制作很多不错的成果。
感谢您的浏览，心愿这对您有所帮忙????
如果您有任何疑难或倡议，请与我分割 @codrops 或 @crnacura。
在 Github 上找到这个我的项目。