I'm currently in the process of creating a personal website to showcase all my projects and resume. To add some visual appeal, I've incorporated animations to slide in the title elements from the sides upon loading. However, I've noticed that when the page first loads, there's a quick flash of the title text before the JavaScript kicks in to animate them. Could this be due to a preloading issue that I haven't been able to resolve?
Could it possibly be an ordering problem with how the elements/JavaScript are loaded? Or am I overlooking a specific line in my JavaScript code that could prevent this flashing effect?
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' });
});
});* {
box-sizing: border-box;
}
body {
background-color: #24305E;
height: 100vh;
}
h1 {
color: #A8D0E6;
font-display: fallback;
font-size: 15vh;
font-family: 'Noto Sans SC', sans-serif;
margin-left: 12vw;
text-shadow:
-1px 1px 1px rgba(0,0,0,1),
-2px 2px 1px rgba(0,0,0,0.6),
-4px 4px 1px rgba(0,0,0,0.4),
-6px 6px 1px rgba(0,0,0,0.2),
-8px 8px 1px rgba(0,0,0,0.18),
-10px 10px 1px rgba(0,0,0,0.16),
-12px 12px 1px rgba(0,0,0,0.15),
-14px 14px 1px rgba(0,0,0,0.14),
-16px 16px 1px rgba(0,0,0,0.13),
-18px 18px 1px rgba(0,0,0,0.12),
-20px 20px 1px rgba(0,0,0,0.11),
-22px 22px 1px rgba(0,0,0,0.1),
-24px 24px 1px rgba(0,0,0,0.09),
-26px 26px 1px rgba(0,0,0,0.08),
-28px 28px 1px rgba(0,0,0,0.07),
-30px 30px 1px rgba(0,0,0,0.06),
-32px 32px 1px rgba(0,0,0,0.05),
-34px 34px 1px rgba(0,0,0,0.04),
-36px 36px 1px rgba(0,0,0,0.03),
-38px 38px 1px rgba(0,0,0,0.02);
}
// remaining CSS properties removed for brevity
</body>
</html>