@Jonathan
Thanks for chiming in.
Unfortunately, I haven't found a working solution. It might be a bigger issue with my messy JS File.
Might be better if I share the actual code for debugging..
HTML
<!DOCTYPE html>
<html id="top" lang="en">
<!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]> <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]> <html class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js"> <!--<![endif]-->
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Uniqlo, Work</title>
<meta name="description" content="">
<meta name="keywords" content="">
<!-- Favicon -->
<link href="img/favicon/apple-touch-icon-57x57.png" rel="apple-touch-icon" sizes="57x57">
<link href="img/favicon/apple-touch-icon-60x60.png" rel="apple-touch-icon" sizes="60x60">
<link href="img/favicon/apple-touch-icon-72x72.png" rel="apple-touch-icon" sizes="72x72">
<link href="img/favicon/apple-touch-icon-76x76.png" rel="apple-touch-icon" sizes="76x76">
<link href="img/favicon/apple-touch-icon-114x114.png" rel="apple-touch-icon" sizes="114x114">
<link href="img/favicon/apple-touch-icon-120x120.png" rel="apple-touch-icon" sizes="120x120">
<link href="img/favicon/apple-touch-icon-144x144.png" rel="apple-touch-icon" sizes="144x144">
<link href="img/favicon/apple-touch-icon-152x152.png" rel="apple-touch-icon" sizes="152x152">
<link href="img/favicon/apple-touch-icon-180x180.png" rel="apple-touch-icon" sizes="180x180">
<link href="img/favicon/favicon-32x32.png" rel="icon" sizes="32x32" type="image/png">
<link href="img/favicon/android-chrome-192x192.png" rel="icon" sizes="192x192" type="image/png">
<link href="img/favicon/favicon-96x96.png" rel="icon" sizes="96x96" type="image/png">
<link href="img/favicon/favicon-16x16.png" rel="icon" sizes="16x16" type="image/png">
<link href="img/favicon/manifest.json" rel="manifest">
<link href="img/favicon/safari-pinned-tab.svg" rel="mask-icon">
<meta content="Brian Lam" name="apple-mobile-web-app-title">
<meta content="Brian Lam" name="application-name">
<meta content="#da532c" name="msapplication-TileColor">
<meta content="img/favicon/mstile-144x144.png" name="msapplication-TileImage">
<meta content="#ffffff" name="theme-color">
<!-- Opengraph Facebook -->
<meta property="og:type" content="website">
<meta property="og:url" content="https://brnlm.co">
<meta property="og:title" content="Brian Lam, Digital Experience Designer">
<meta property="og:description" content="A digital experience designer who believes in tackling problems through empathy and rigorous research. I aspire to hone my abilities to empower people and improve communities.">
<meta property="og:image" content="">
<!-- GSAP -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/2.1.3/TweenLite.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/2.1.3/TimelineMax.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/2.1.3/easing/EasePack.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/2.1.3/plugins/CSSPlugin.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/2.1.3/plugins/ScrollToPlugin.min.js"></script>
<!-- CSS Stylesheet -->
<link rel="stylesheet" href="css/aos.css" type="text/css">
<link rel="stylesheet" href="css/main.css" type="text/css">
</head>
<body>
<div class="top_loader"></div>
<!-- Scroll Container -->
<div class="scroll__container">
<!--[if lt IE 7]>
<p class="browsehappy">You are using an <strong>outdated</strong> browser. Please <a href="#">upgrade your browser</a> to improve your experience.</p>
<![endif]-->
<div id="loader" class="enter"></div>
<header class="site_header" data-aos="fade-up" data-aos-delay="200" data-aos-offset="50" data-aos-duration="1000" data-aos-easing="ease-out-quad">
<div class="frost"></div>
<div class="row">
<div class="logo">
<a href="brnlm.co" class="back__link page__back link-line">
<span class="back-icon icon-arrow-left"></span><span>back</span></a>
</div>
<!-- Navigation -->
<nav class="site_nav">
<ul class="nav_list">
<li class="link-line">
<a href="http://brnlm.co">Work</a>
</li>
<li class="link-line">
<a href="info.html">Info</a>
</li>
<li class="link-line">
<a href="https://drive.google.com/file/d/1pFyKAT_ahpku2JMRVd9iQSHTrVszsG6A/view?usp=sharing">Resume</a>
</li>
</ul>
</nav>
<!-- End of Navigation -->
</div>
</header>
<a class="mobile_menu" href="#"> <?xml version="1.0" encoding="utf-8"?><svg version="1.1" class="burg" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="48px" height="48px" viewBox="14 -14 48 48" style="enable-background:new 14 -14 48 48;" xml:space="preserve"> <style type="text/css"> .st0{fill: #FFFFFF;}</style> <g> <circle id="Oval-2" class="st0" cx="38" cy="10" r="24"/> <g> <rect x="31" y="5" width="14" height="2"/> <rect x="31" y="9" width="14" height="2"/> <rect x="31" y="13" width="14" height="2"/> </g> </g> </svg> <?xml version="1.0" encoding="utf-8"?><svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="48px" height="48px" viewBox="14 -14 48 48" style="enable-background:new 14 -14 48 48;" xml:space="preserve"> <style type="text/css"> .st0{fill: #FFFFFF;}</style> <g> <path d="M276,440h80v80h-80V440z"/> </g> <g> <path d="M302.4,484.6l17.7-17.7l8.5,8.5l-17.7,17.7L302.4,484.6z"/> </g> <g> <g> <path d="M302.4,475.4l8.5-8.5l17.7,17.7l-8.5,8.5L302.4,475.4z"/> </g> </g> <g> <g> <path d="M276,440h80v80h-80V440z"/> </g> </g> <g> <g> <path d="M302.4,484.6l17.7-17.7l8.5,8.5l-17.7,17.7L302.4,484.6z"/> </g> </g> <g> <g> <path d="M302.4,475.4l8.5-8.5l17.7,17.7l-8.5,8.5L302.4,475.4z"/> </g> </g> <g> <circle id="Oval-2" class="st0" cx="38" cy="10" r="24"/> <g> <rect x="31" y="9" transform="matrix(0.7071 0.7071 -0.7071 0.7071 18.2015 -23.9413)" width="14" height="2"/> <rect x="31" y="9" transform="matrix(0.7071 -0.7071 0.7071 0.7071 4.0593 29.7992)" width="14" height="2"/> </g> </g> </svg> </a>
<!-- Project Section -->
<section class="project__section">
<div class="project__container">
<div class="project__labels">
<span class="category">UX/UI</span>
<span class="divider"></span>
<span class="year">2019</span>
</div>
<div class="project__title">Uniqlo</div>
</div>
</section>
<!-- End of project section -->
<!-- Project Cover -->
<section class="project__cover">
<img class="mb-5 mb-sm-5 mb-md-5 mb-lg-66" src="img/full_width image_100.jpg" alt="Uniqlo Cover">
</section>
<!-- End of project cover -->
<!-- Project Info -->
<section class="project__info">
<div class="row">
<div class="col-sm-5 mb-5 mb-sm-5 mb-md-5 mb-lg-66">
<div class="project__scope">
<ul class="scope__list">
<div class="project__small__text">Scope<span class="icon icon-arrow-down"></span></div>
<li>Content Strategy</li>
<li>Launch Strategy</li>
<li>Technical Strategy</li>
<li>UX Strategy</li>
<li>Experience Mapping</li>
<li>Research</li>
</ul>
</div>
</div>
<div class="col-md-7 mb-5 mb-sm-5 mb-md-5 mb-lg-66">
<div class="project__scope">
<ul class="scope__list">
<div class="project__small__text">Overview<span class="icon icon-arrow-down"></span></div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Habitant morbi tristique senectus et. Amet porttitor eget dolor morbi non arcu. Tellus cras adipiscing enim eu turpis egestas pretium. Dolor magna eget est lorem ipsum dolor sit amet. Sem nulla pharetra diam sit amet nisl suscipit. Ut diam quam nulla porttitor. Donec massa sapien faucibus et molestie ac feugiat sed lectus.</p>
</ul>
</div>
</div>
</div>
</section>
<!-- End of project info -->
<!-- Project Case Study -->
<section class="case__study__section">
<div class="case__study__inner">
<div class="row">
<div class="mb-5 mb-sm-5 mb-md-5 mb-lg-66">
<figure class="mb-5 mb-sm-5 mb-md-5 mb-lg-66">
<img src="img/full_width image_100.jpg" alt="">
<figcaption>Lorem sed risus ultricies tristique nulla aliquet enim. Purus faucibus ornare suspendisse sed nisi.</figcaption>
</figure>
<div class="case__study__desc">
<div class="col-md-12 mb-5 mb-sm-5 mb-md-5 mb-lg-66">
<div class="case__study__small__text">Project Label</div>
<div class="case__study__large__text">Large Heading</div>
<p class="case__study__text">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Habitant morbi tristique senectus et. Amet porttitor eget dolor morbi non arcu. Tellus cras adipiscing enim eu turpis egestas pretium. Dolor magna eget est lorem ipsum dolor sit amet. Sem nulla pharetra diam sit amet nisl suscipit.</p>
<p class="case__study__text">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Habitant morbi tristique senectus et. Amet porttitor eget dolor morbi non arcu. Tellus cras adipiscing enim eu turpis egestas pretium. Dolor magna eget est lorem ipsum dolor sit amet. Sem nulla pharetra diam sit amet nisl suscipit.</p>
</div>
</div>
<figure class="mb-5 mb-sm-5 mb-md-5 mb-lg-66">
<img src="img/full_width image_100.jpg" alt="">
<figcaption>Lorem sed risus ultricies tristique nulla aliquet enim. Purus faucibus ornare suspendisse sed nisi.</figcaption>
</figure>
<div class="case__study__desc">
<div class="col-md-12 mb-5 mb-sm-5 mb-md-5 mb-lg-66">
<div class="case__study__small__text">Project Label</div>
<div class="case__study__large__text">Large Heading</div>
<p class="case__study__text">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Habitant morbi tristique senectus et. Amet porttitor eget dolor morbi non arcu. Tellus cras adipiscing enim eu turpis egestas pretium. Dolor magna eget est lorem ipsum dolor sit amet. Sem nulla pharetra diam sit amet nisl suscipit.</p>
<p class="case__study__text">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Habitant morbi tristique senectus et. Amet porttitor eget dolor morbi non arcu. Tellus cras adipiscing enim eu turpis egestas pretium. Dolor magna eget est lorem ipsum dolor sit amet. Sem nulla pharetra diam sit amet nisl suscipit.</p>
<p class="case__study__text">
<ol class="numbered__list">
<li>Lorem donec massa sapien faucibus. Massa id neque aliquam vestibulum morbi. Tortor posuere ac ut consequat semper viverra ac placerat.</li>
<li>Lorem donec massa sapien faucibus. Massa id neque aliquam vestibulum morbi. Tortor posuere ac ut consequat semper viverra ac placerat.</li>
<li>Lorem donec massa sapien faucibus. Massa id neque aliquam vestibulum morbi. Tortor posuere ac ut consequat semper viverra ac placerat.</li>
<li>Lorem donec massa sapien faucibus. Massa id neque aliquam vestibulum morbi. Tortor posuere ac ut consequat semper viverra ac placerat.</li>
</ol>
</p>
</div>
</div>
<figure class="mb-5 mb-sm-5 mb-md-5 mb-lg-66">
<img src="img/full_width image_100.jpg" alt="">
<figcaption>Lorem sed risus ultricies tristique nulla aliquet enim. Purus faucibus ornare suspendisse sed nisi.</figcaption>
</figure>
<div class="case__study__desc">
<div class="col-md-12 mb-5 mb-sm-5 mb-md-5 mb-lg-66">
<div class="case__study__small__text">Project Label</div>
<div class="case__study__large__text">Large Heading</div>
<p class="case__study__text">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Habitant morbi tristique senectus et. Amet porttitor eget dolor morbi non arcu. Tellus cras adipiscing enim eu turpis egestas pretium. Dolor magna eget est lorem ipsum dolor sit amet. Sem nulla pharetra diam sit amet nisl suscipit.</p>
<p class="case__study__text">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Habitant morbi tristique senectus et. Amet porttitor eget dolor morbi non arcu. Tellus cras adipiscing enim eu turpis egestas pretium. Dolor magna eget est lorem ipsum dolor sit amet. Sem nulla pharetra diam sit amet nisl suscipit.</p>
<p class="case__study__text">
<ul class="bullet__list">
<li>Id velit ut tortor pretium viverra suspendisse potenti. Tristique magna sit amet purus gravida quis blandit turpis cursus. In metus vulputate eu scelerisque felis imperdiet. Habitasse platea dictumst vestibulum rhoncus est pellentesque. Sit amet nisl suscipit adipiscing bibendum est ultricies integer.</li>
<li>Id velit ut tortor pretium viverra suspendisse potenti. Tristique magna sit amet purus gravida quis blandit turpis cursus. In metus vulputate eu scelerisque felis imperdiet. Habitasse platea dictumst vestibulum rhoncus est pellentesque. Sit amet nisl suscipit adipiscing bibendum est ultricies integer.</li>
<li>Id velit ut tortor pretium viverra suspendisse potenti. Tristique magna sit amet purus gravida quis blandit turpis cursus. In metus vulputate eu scelerisque felis imperdiet. Habitasse platea dictumst vestibulum rhoncus est pellentesque. Sit amet nisl suscipit adipiscing bibendum est ultricies integer.</li>
</ul>
</p>
</div>
</div>
<figure class="mb-5 mb-sm-5 mb-md-5 mb-lg-66">
<img src="img/full_width image_100.jpg" alt="">
<figcaption>Lorem sed risus ultricies tristique nulla aliquet enim. Purus faucibus ornare suspendisse sed nisi.</figcaption>
</figure>
<div class="case__study__desc">
<div class="col-md-12 mb-5 mb-sm-5 mb-md-5 mb-lg-66">
<div class="case__study__small__text">Project Label</div>
<div class="case__study__large__text">Large Heading</div>
<p class="case__study__text">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Habitant morbi tristique senectus et. Amet porttitor eget dolor morbi non arcu. Tellus cras adipiscing enim eu turpis egestas pretium. Dolor magna eget est lorem ipsum dolor sit amet. Sem nulla pharetra diam sit amet nisl suscipit.</p>
<p class="case__study__text">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Habitant morbi tristique senectus et. Amet porttitor eget dolor morbi non arcu. Tellus cras adipiscing enim eu turpis egestas pretium. Dolor magna eget est lorem ipsum dolor sit amet. Sem nulla pharetra diam sit amet nisl suscipit.</p>
<p class="case__study__text">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Habitant morbi tristique senectus et. Amet porttitor eget dolor morbi non arcu. Tellus cras adipiscing enim eu turpis egestas pretium. Dolor magna eget est lorem ipsum dolor sit amet. Sem nulla pharetra diam sit amet nisl suscipit.</p>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- End of project case study -->
<!-- Pre Footer -->
<div class="pre__footer">
<div id="back_to_top"><img src="img/top.svg" width="36" height="39"></div>
<p class="pre__footer__small__text">Next Project<span class="icon icon-arrow-down"></span></p>
<p class="pre__footer__text">
<a class="footer__link" href="/brainmate">
<span class="footer__link__text">Brainmate</span>
<span class="footer__link__mask" aria-hidden="true">
<span class="footer__link__mask__text">Brainmate</span>
</span>
</a>
</p>
</div>
<!-- End of pre footer -->
<!-- Footer -->
<footer class="footer">
<div class="footer-container">
<a class="link-line" href="" target="_blank">Email</a>
<a class="link-line" href="" target="_blank">Are.na</a>
<a class="link-line" href="" target="_blank">Dribbble</a>
<a class="link-line" href="" target="_blank">LinkedIn</a>
<a class="link-line" href="" target="_blank">Twitter</a>
</div>
</footer>
<!-- End of footer -->
</div>
<!-- End of scroll container -->
<!-- JS -->
<script src="js/aos.js"></script>
<script src="js/nav.js"></script>
<script src="js/jquery-3.4.1.min.js"></script>
<script src="js/main.js"></script>
</body>
</html>
JS
// Refresh page to top
$(window).on('beforeunload', function() {
$('body').hide();
$(window).scrollTop(0);
});
// AOS
$(function() {
AOS.init();
});
$(window).on('load', function() {
AOS.refresh();
});
// Top Loader
var h = document.documentElement,
b = document.body,
st = 'scrollTop',
sh = 'scrollHeight',
progress = document.querySelector('.top_loader'),
scroll;
document.addEventListener('scroll', function() {
scroll = (h[st]||b[st]) / ((h[sh]||b[sh]) - h.clientHeight) * 100;
progress.style.setProperty('--scroll', scroll + '%');
});
// Smooth Scrolling
$(function() {
var html = document.documentElement;
var body = document.body;
var scroller = {
target: document.querySelector(".scroll__container"),
ease: 0.05, // <= scroll speed
endY: 0,
y: 0,
resizeRequest: 1,
scrollRequest: 0,
};
var requestId = null;
TweenLite.set(scroller.target, {
rotation: 0.01,
force3D: true
});
window.addEventListener("load", onLoad);
function onLoad() {
updateScroller();
window.focus();
window.addEventListener("resize", onResize);
document.addEventListener("scroll", onScroll);
}
function updateScroller() {
var resized = scroller.resizeRequest > 0;
if (resized) {
var height = scroller.target.clientHeight;
body.style.height = height + "px";
scroller.resizeRequest = 0;
}
var scrollY = window.pageYOffset || html.scrollTop || body.scrollTop || 0;
scroller.endY = scrollY;
scroller.y += (scrollY - scroller.y) * scroller.ease;
if (Math.abs(scrollY - scroller.y) < 0.05 || resized) {
scroller.y = scrollY;
scroller.scrollRequest = 0;
}
TweenLite.set(scroller.target, {
y: -scroller.y
});
requestId = scroller.scrollRequest > 0 ? requestAnimationFrame(updateScroller) : null;
}
function onScroll() {
scroller.scrollRequest++;
if (!requestId) {
requestId = requestAnimationFrame(updateScroller);
}
}
function onResize() {
scroller.resizeRequest++;
if (!requestId) {
requestId = requestAnimationFrame(updateScroller);
}
}
});
// Back to Top
$('#back_to_top').on('click', function(e) {
e.preventDefault();
TweenMax.to(window, 2, {scrollTo:"#top"});
});
