在动画从侧面引入标题之前，我有一些标题。我该如何摆脱它？

Question

我正在建立一个网站来放置我所有的项目并恢复，我正在使用一些动画从加载的一侧引入标题元素，如下面的代码片段所示。但是当页面最初加载时，标题文本闪烁得非常快，然后 JavaScript 加载并将它们从侧面引入。这是预加载问题吗？它似乎没有解决它。

这与元素/JavaScript 的加载顺序有关吗？或者我是否在我的 JavaScript 中遗漏了一些阻止这种情况的行？

window.addEventListener('DOMContentLoaded', function () {

    /* Function to bring in navbar from top staggered */

    gsap.from(".btn",{duration:2,opacity:0,y:-300,stagger:0.25,});

    /* Function to bring h1 in from the left */

    gsap.from("h1",{duration:2.5,ease:"power2.out",x:-2000});

    /* Function to bring in h2 from right */

    gsap.from("h2",{duration:2.5,ease:"power2.out",x:2000});

    /* Function to register gsap scroll plugin */

    gsap.registerPlugin(ScrollToPlugin);

    /* Function to scroll to About me when button is clicked */

    document.getElementById('scroll').addEventListener('click', function clicked() {

    gsap.to(window, {duration: 0.8, scrollTo:'#red' });

    });

});

Answer 1

从文档：DOMContentLoaded 事件在初始 HTML 文档已完全加载和解析时触发，无需等待样式表、图像和子框架完成加载。这意味着您的网页将在执行回调之前呈现。

Answer 2

尝试将您移动<script src="main.js"></script>到 html 正文的最底部，以便其他所有内容首先运行。我刚刚向项目中添加了一些动画……我是这样做的：window.onload(animations());function animations(){&nbsp; &nbsp; const tl = gsap.timeline({defaults: {ease: "power1.out"}});&nbsp; &nbsp; tl.to(".intro", {y: "-100%", duration: 1, delay: 1});&nbsp; &nbsp; tl.fromTo(".intro", {opacity: 1}, {opacity: 0, duration: 1}, "-=1");&nbsp; &nbsp; tl.fromTo(".card", {y: "100%"}, {y: "0%", duration: 1, stagger: 0.25}, "-=1");&nbsp; &nbsp; tl.fromTo("#logo-blk", {y: "-400%", rotation: "-30"}, {y: "-100%", rotation: "0",&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; duration: 0.5}, "-=0.5");}