关于前端:译为文本制作交错显示动画

4次阅读

共计 3640 个字符，预计需要花费 10 分钟才能阅读完成。

原文地址：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 上找到这个我的项目。

正文完