I am building a website to put all my projects and resume on and I am using some animation to bring in the title elements in from the side on load as you can see in the snippet below. But when the page initially loads the title text flashes really quickly then the JavaScript loads and brings them in from the sides. Is this a preloading issue? It hasn't seemed to fix it.
Is it a matter of which order the elements/JavaScript is loaded? Or am I missing some line in my JavaScript that prevents this?
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);
}
h2 {
font-family: 'Noto Sans SC', sans-serif;
font-display: fallback;
color: #F8e9a1;
font-size: 15vh;
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);
}
h3 {
font-family: 'Courier Prime', monospace;
color: #f99f9f;
font-size: 3vh;
margin-left: 13vw;
margin-top: 10vh;
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);
}
h4 {
font-family: 'Courier Prime', monospace;
color: #f99f9f;
font-size: 3vh;
margin-left: 13vw;
margin-top: 5vh;
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);
}
h5 {
font-size: 5vh;
font-family: 'Noto Sans SC', sans-serif;
color: #f8e9a1;
padding: 20px;
margin: 5vw;
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);
}
h5:after {
background-color: #F8E9A1;
content: "";
display: inline-block;
height: 2px;
position: relative;
vertical-align: middle;
width: 50%;
margin-left: 20px;
box-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);
}
#red {
color: #f99f9f;
display: inline-block;
}
.box {
margin-top: 20vh;
width: 66vw;
height: 15vh;
margin-left: 12vw;
}
.content {
display: flex;
}
.column {
flex: 50%;
padding: 75px;
}
p {
color : #A8D0E6;
font-size: 2.75vh;
font-family: 'Courier Prime', monospace;
margin-left: 8vw;
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);
}
hr {
height: 1vh;
background-color: #A8D0E6;
border: none;
margin-left: 6vw;
margin-right: 6vw;
}
img {
float: left;
width: 25vw;
height: auto;
border-radius: 30px;
box-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);
}
.imageContainer {
display: inline-block;
position: relative;
}
.imageContainer:before {
position: absolute;
top: 6%;
left: 10%;
width: 100%;
height: 100%;
border: 7px solid #F8E9A1;
content: '';
z-index: -2;
border-radius: 30px;
box-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);
}
.btn {
font-family: 'Courier Prime', monospace;
color: #F8E9A1;
transition: transform .2s;
}
.btn:hover {
background-color: #F8E9A1;
color: #24305E;
transform: scale(1.2);
box-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.14),
-14px 14px 1px rgba(0,0,0,0.12),
-16px 16px 1px rgba(0,0,0,0.10),
-18px 18px 1px rgba(0,0,0,0.09),
-20px 20px 1px rgba(0,0,0,0.08),
-22px 22px 1px rgba(0,0,0,0.07),
-24px 24px 1px rgba(0,0,0,0.06),
-26px 26px 1px rgba(0,0,0,0.05),
-28px 28px 1px rgba(0,0,0,0.04),
-30px 30px 1px rgba(0,0,0,0.03),
-32px 32px 1px rgba(0,0,0,0.02),
-34px 34px 1px rgba(0,0,0,0.01);
}
.zoom {
transition: transform .2s;
}
.zoom:hover {
transform: scale(1.2);
}
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<link rel="preload" href="https://fonts.googleapis.com/css2?family=Courier+Prime&family=Noto+Sans+SC:wght#700&display=swap" as="font">
<script src="main.js"></script>
<link rel="stylesheet" href="styles.css">
<title>Matthew Salem | Software Engineer</title>
</head>
<body>
<div class="container-fluid">
<nav class="navbar navbar-dark" style="background-color: #24305e;">
<a class="navbar-brand" href="http://www.matthewsalem.com"> Matt Salem Logo </a>
<form class="form-inline">
<div class="zoom">
<div class="btn-group mr-5" role="group" aria-label="First group"><button class="btn btn-outline-primary btn-lg" id="scroll" type="button">01. About Me</button></div>
</div>
<div class="zoom">
<div class="btn-group mr-5" role="group" aria-label="Second Group"> <button class="btn btn-outline-primary btn-lg" type="button">02. Portfolio</button></div>
</div>
<div class="zoom">
<div class="btn-group mr-5" role="group" aria-label="Third Group"> <button class="btn btn-outline-primary btn-lg" type="button">03. Resume</button></div>
</div>
</form>
</nav>
</div>
<h3>Hello! My name is</h3>
<div id="animate">
<h1>Matthew Salem.</h1>
</div>
<h4>I am a</h4>
<h2>Software Engineer</h2>
<h4>experienced in front end website architecture and back end application development.</h4>
<div class="box">
<h5><div id="red">01.</div> About Me</h5>
</div>
<div class="content">
<div class= "column">
<p>Hi! My name is Matt Salem. I am a software engineer based out of
New Haven, CT. Currently I am a student at the Holberton School.
I love buliding awesome software, especially any projects in the field
of web development. My goal is to build products that give the user
not only functional service or tool, but an experience that they will
remember. When I am not working on a project, you can find me
with friends out to eat, playing chess and drinking coffee downtown,
or enjoying a live show at Toad's Place or any other local venues.
</p>
</div>
<div class="column">
<div class="imageContainer">
<img src="IMG_3152 (1).jpg" alt="Headshot">
</div>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.5.1/gsap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.5.1/ScrollToPlugin.min.js"></script>
</body>
</html>
From the docs:
The DOMContentLoaded event fires when the initial HTML document has been completely loaded and parsed, without waiting for stylesheets, images, and subframes to finish loading.
It means your webpage will render before the callback is executed.
I would suggest to use gsap.to (https://greensock.com/docs/v3/GSAP/gsap.to()) instead. You could add your initial position in your CSS, which can then be reset by with gsap.to.
Try moving your <script src="main.js"></script> to the very bottom of the html body so that everything else runs first. I just finished adding some animations to a project...here is how I did it:
window.onload(animations());
function animations(){
const tl = gsap.timeline({defaults: {ease: "power1.out"}});
tl.to(".intro", {y: "-100%", duration: 1, delay: 1});
tl.fromTo(".intro", {opacity: 1}, {opacity: 0, duration: 1}, "-=1");
tl.fromTo(".card", {y: "100%"}, {y: "0%", duration: 1, stagger: 0.25}, "-=1");
tl.fromTo("#logo-blk", {y: "-400%", rotation: "-30"}, {y: "-100%", rotation: "0",
duration: 0.5}, "-=0.5");
}
I'm having a lot of trouble getting this to work properly. I just want to make .accordion-content stay upon unhover. I've tried several approaches to this and now I'm pretty much at a total loss. Here is the code I'm working with:
HTML
<ul class="accordion-thing">
<li>
<a>How do I setup my Chem+Nect Drum?<span>Learn More</span></a>
<ul class="accordion-content">
<li><em>01</em></li>
</ul>
</li>
CSS
.accordion-thing,
.accordion-thing ul,
.accordion-thing li,
.accordion-thing a,
.accordion-thing span {
margin: 0;
padding: 0;
border: none;
outline: none;
}
.accordion-thing li {
list-style: none !important;
}
.accordion-thing li > a {
display: block;
position: relative;
min-width: 910px;
min-height: 46px;
padding: 0 10px 0 40px;
vertical-align: middle !important;
color: #fdfdfd;
font: bold 16px/42px Arial, sans-serif !important;
text-decoration: none;
text-shadow: 0px 1px 0px rgba(0,0,0, .35) !important;
background: #6c6e74;
background: -moz-linear-gradient(top, #6c6e74 0%, #4b4d51 100%) !important;
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#6c6e74), color-stop(100%,#4b4d51)) !important;
background: -webkit-linear-gradient(top, #6c6e74 0%, #4b4d51 100%) !important;
background: -o-linear-gradient(top, #6c6e74 0%, #4b4d51 100%) !important;
background: -ms-linear-gradient(top, #6c6e74 0%, #4b4d51 100%) !important;
background: linear-gradient(top, #6c6e74 0%, #4b4d51 100%) !important;
-webkit-box-shadow: inset 0px 1px 0px 0px rgba(255,255,255, .1), 0px 1px 0px 0px rgba(0,0,0, .1);
-moz-box-shadow: inset 0px 1px 0px 0px rgba(255,255,255, .1), 0px 1px 0px 0px rgba(0,0,0, .1);
box-shadow: inset 0px 1px 0px 0px rgba(255,255,255, .1), 0px 1px 0px 0px rgba(0,0,0, .1);
}
.accordion-thing li > a span {
display: block;
position: absolute;
top: 12px;
right: 0px;
padding: 0 10px;
margin-right: 10px;
font: normal bold 14px/18px Arial, sans-serif !important;
background: #404247;
-webkit-border-radius: 15px;
-moz-border-radius: 15px;
border-radius: 15px;
-webkit-box-shadow: inset 1px 1px 1px rgba(0,0,0, .2), 1px 1px 1px rgba(255,255,255, .1);
-moz-box-shadow: inset 1px 1px 1px rgba(0,0,0, .2), 1px 1px 1px rgba(255,255,255, .1);
box-shadow: inset 1px 1px 1px rgba(0,0,0, .2), 1px 1px 1px rgba(255,255,255, .1);
}
.accordion-content li a {
color: #797979;
text-shadow: 1px 1px 0px rgba(255,255,255, .2);
background: #e5e5e5;
border-bottom: 1px solid #c9c9c9;
-webkit-box-shadow: inset 0px 1px 0px 0px rgba(255,255,255, .1), 0px 1px 0px 0px rgba(0,0,0, .1);
-moz-box-shadow: inset 0px 1px 0px 0px rgba(255,255,255, .1), 0px 1px 0px 0px rgba(0,0,0, .1);
box-shadow: inset 0px 1px 0px 0px rgba(255,255,255, .1), 0px 1px 0px 0px rgba(0,0,0, .1);
}
.accordion-content li:last-child a { border: none; }
.accordion-content li > a span {
color: #797979;
text-shadow: 1px 1px 0px rgba(255,255,255, .2);
background: transparent;
border: 1px solid #c9c9c9;
-webkit-box-shadow: none;
-moz-box-shadow: none;
box-shadow: none;
}
.accordion-content {
position: absolute;
top: o;
left: 0
margin-left: 14px;
color: #a6a6a6;
font: normal 10px/32px Arial, sans-serif !important;
}
.accordion-thing > li:hover > a,
.accordion-thing > li:target > a {
color: #00334c;
text-shadow: 1px 1px 1px rgba(255,255,255, .2);
background: #0679b9 !important;
background: -moz-linear-gradient(top, #0679b9 0%, #3b59e2 100%) !important;
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#0679b9), color-stop(100%,#3b59e2)) !important;
background: -webkit-linear-gradient(top, #0679b9 0%,#3b59e2 100%) !important;
background: -o-linear-gradient(top #0679b9 0%,#3b59e2 100%) !important;
background: -ms-linear-gradient(top #0679b9 0%,#3b59e2 100%) !important;
background: linear-gradient(top #0679b9 0%,#3b59e2 100%) !important;
}
.accordion-thing > li:hover > a span,
.accordion-thing > li:target > a span {
color: #fdfdfd !important;
text-shadow: 0px 1px 0px rgba(0,0,0, .35);
background: #00334c;
}
.accordion-content li:hover a { background: #efefef; }
.accordion-thing li > .accordion-content {
height: 0;
overflow: hidden;
-webkit-transition: all .2s ease-in-out;
-moz-transition: all .2s ease-in-out;
-o-transition: all .2s ease-in-out;
-ms-transition: all 2s ease-in-out;
transition: all .2s ease-in-out;
}
.accordion-thing li:hover > .accordion-content {
height: 98px;
}
Is there some Javascript I can add to make this work properly?
If you want to have the hover style applied permanently after the first hover until the page refreshes, you will have to use javascript:
var accordion = document.getElementsByClassName('accordion-thing')[0];
accordion.addEventListener('mouseenter', function () {
this.classList.add('hovered');
});
then in your css, anywhere that you have .accordion-thing li:hover {}, you can change that to .accordion-thing.hovered li {}
Here is a simple example to show this concept.