Hiding object off screen while page loads

Question

I have a slideout function that slides a "drawer" out from top/left/right/bottom depending on data parameters. The function looks and works exactly how I want it to, except during page loading the drawer is shown in its entirety then slides into place instead of being hidden until the user clicks a button to view the drawer.

I know deferring of the loading of the css is causing the issue, but I want to keep that but still solve the problem. Also in my example, I'm deferring the CSS but in my actual code it defers the stylesheet.

I have tried a bunch of different solutions like adding a class to html then only applying the CSS when the HTML has that class but then the functionality is affected, so I'm not 100% on how to go about solving the problem.

 var _slideout = new slideout({ blur: false, overlay: false }); document.querySelector(".open-sidebar").addEventListener("click",function(el){ _slideout.open(document.querySelector(".open-sidebar").getAttribute("data-id")); el.preventDefault(); }); function slideout(p){ var defaults = { "overlay" : true, "blur" : false, "activeId": "", "overlayElement": "", "activeElement": "" }; var config = Object.assign(defaults,p); var pageRootElement = document.querySelector('html'); var _this = this; this.init = function(){ if (config["overlay"]) { config["overlayElement"] = document.createElement('div'); config["overlayElement"].classList.add('slideout_overlay'); document.querySelector('body').appendChild(config["overlayElement"]); } if (config.blur) { var mainContent = document.querySelector('.slideout_main_content'); if (mainContent) { mainContent.classList.add('slideout_blur'); } } this.bindEvents(); }; this.bindEvents = function(){ var triggers = document.querySelectorAll('[data-slideout-target]'); var closers = document.querySelectorAll('[data-slideout-close]'); triggers.forEach(function(trigger){ trigger.addEventListener('click', function(e){ _this.handleOpenEvent(e); }); }); closers.forEach(function(closer){ closer.addEventListener('click', function(e){ _this.handleCloseEvent(e); }); }); if (config["overlayElement"] != "") { config["overlayElement"].addEventListener('click', function(e){ _this.handleCloseEvent(e); }); } document.addEventListener('keyup', function(e){ _this.handleCloseEvent(e); }); } this.create_event = function(_event){ var event = new CustomEvent(_event, { bubbles: true, detail: { element: config["activeElement"], id: config["activeId"] } }); config["activeElement"].dispatchEvent(event); } this.handleOpenEvent = function(e) { e.preventDefault(); var slideoutId = e.currentTarget.getAttribute('data-slideout-target'); this.open(slideoutId); } this.handleCloseEvent = function(e) { e.preventDefault(); this.close(); } this.handleKeyEvent = function(e) { if (e.keyCode === 27) this.close(); } this.open = function(slideoutId) { if (config["activeId"] === String(slideoutId) || !slideoutId) return; if (config["activeId"] && config["activeId"] !== String(slideoutId)) this.close(); config["activeId"] = slideoutId; config["activeElement"] = document.querySelector('[data-slideout-id="' + config["activeId"] + '"]'); if (!config["activeElement"]) return; this.create_event('slideout_opening'); config["activeElement"].classList.add('opened'); pageRootElement.classList.add('slideout_locked'); pageRootElement.setAttribute('slideout', slideoutId); } this.close = function() { if (!config["activeId"]) return; this.create_event('slideout_closing'); config["activeElement"].classList.remove('opened'); pageRootElement.classList.remove('slideout_locked'); pageRootElement.removeAttribute('slideout'); config["activeId"] = null; config["activeElement"] = null; } this.init(); return this; } var loadDeferredStyles = function() { var addStylesNode = document.getElementById("deferred-styles"); var replacement = document.createElement("div"); replacement.innerHTML = addStylesNode.textContent; document.body.appendChild(replacement) addStylesNode.parentElement.removeChild(addStylesNode); }; var raf = requestAnimationFrame || mozRequestAnimationFrame || webkitRequestAnimationFrame || msRequestAnimationFrame; if (raf) raf(function() { window.setTimeout(loadDeferredStyles, 0);}); else loadDeferredStyles();

 <noscript id="deferred-styles"> <style> /*@media screen and (max-width: 550px) {*/ html.slideout_locked { overflow: hidden; -ms-touch-action: none; touch-action: none; } .slideout_locked .slideout_main_content.slideout_blur { filter: blur(15px); } .slideout_overlay { z-index: -999; position: fixed; width: 100%; height: 100%; top: 0; left: 0; will-change: opacity; transition: opacity 0.5s ease; opacity: 0; background: #3c3442; } html.slideout_locked .slideout_overlay { opacity: 0.8; z-index: 999; } [data-slideout-id]{ position: fixed; overflow-y: auto; will-change: transform; transition: transform 0.5s ease; background: #fff; z-index: 2000; } [data-slideout-direction="left"][data-slideout-id], [data-slideout-direction="right"][data-slideout-id] { top: 0; width: 100%; max-width: 100%; height: 100%; } [data-slideout-direction="top"][data-slideout-id], [data-slideout-direction="bottom"][data-slideout-id] { left: 0; width: 100%; min-height: 150px; } [data-slideout-direction="left"][data-slideout-id] { left: 0; transform: translateZ(0) translateX(-100%); } [data-slideout-direction="right"][data-slideout-id] { right: 0; transform: translateZ(0) translateX(100%); } [data-slideout-direction="top"][data-slideout-id] { top: 0; transform: translateZ(0) translateY(-100%); } [data-slideout-direction="bottom"][data-slideout-id] { bottom: 0; transform: translateZ(0) translateY(100%); } [data-slideout-id].opened { display: block; transform: translateX(0px) translateY(0px); } [data-slideout-id] .close { width: 30px; height: 31px; position: relative; display: inline-block; vertical-align: text-bottom; text-align: center; cursor: pointer; } [data-slideout-id] .close:before, [data-slideout-id] .close:after { position: absolute; left: 10px; content: ' '; height: 31px; width: 3px; background-color: #000; } [data-slideout-id] .close:before { transform: rotate(45deg); } [data-slideout-id] .close:after { transform: rotate(-45deg); } .slidebar{ border-right:1px solid #000000; } /*}*/ </style> </noscript> <button data-id="sidebar" class="open-sidebar btn" type="button">&#9776;SERVICES</button> <div class="slidebar" data-slideout-id="sidebar" data-slideout-direction="left"> <div class="visible-xs title"><span data-slideout-close class="pull-right close"></span> OUR SERVICES</div> sidebar sidebar sidebar sidebar sidebar sidebar sidebar sidebar sidebar sidebar sidebar sidebar sidebar sidebar sidebar sidebar sidebar sidebar sidebar sidebar sidebar sidebar sidebar sidebar sidebar sidebar sidebar sidebar sidebar sidebar sidebar sidebar sidebar sidebar sidebar sidebar sidebar sidebar sidebar sidebar sidebar sidebar sidebar sidebar sidebar sidebar sidebar sidebar sidebar sidebar sidebar sidebar sidebar sidebar sidebar sidebar sidebar sidebar sidebar sidebar sidebar sidebar sidebar sidebar sidebar sidebar sidebar sidebar sidebar sidebar sidebar sidebar sidebar sidebar sidebar sidebar sidebar sidebar sidebar sidebar sidebar sidebar sidebar sidebar sidebar sidebar sidebar sidebar sidebar sidebar sidebar sidebar sidebar sidebar sidebar sidebar sidebar sidebar sidebar sidebar sidebar sidebar sidebar sidebar sidebar sidebar sidebar sidebar sidebar </div>

Answer 1

As I mentioned in comments, set inline css to hide the element then in js you can remove the inline styles so it runs smoothly

 var _slideout = new slideout({ blur: false, overlay: false }); document.querySelector(".open-sidebar").addEventListener("click", function(el) { _slideout.open(document.querySelector(".open-sidebar").getAttribute("data-id")); el.preventDefault(); }); function slideout(p) { var defaults = { "overlay": true, "blur": false, "activeId": "", "overlayElement": "", "activeElement": "" }; var config = Object.assign(defaults, p); var pageRootElement = document.querySelector('html'); var _this = this; this.init = function() { if (config["overlay"]) { config["overlayElement"] = document.createElement('div'); config["overlayElement"].classList.add('slideout_overlay'); document.querySelector('body').appendChild(config["overlayElement"]); } if (config.blur) { var mainContent = document.querySelector('.slideout_main_content'); if (mainContent) { mainContent.classList.add('slideout_blur'); } } this.bindEvents(); }; this.bindEvents = function() { var triggers = document.querySelectorAll('[data-slideout-target]'); var closers = document.querySelectorAll('[data-slideout-close]'); triggers.forEach(function(trigger) { trigger.addEventListener('click', function(e) { _this.handleOpenEvent(e); }); }); closers.forEach(function(closer) { closer.addEventListener('click', function(e) { _this.handleCloseEvent(e); }); }); if (config["overlayElement"] != "") { config["overlayElement"].addEventListener('click', function(e) { _this.handleCloseEvent(e); }); } document.addEventListener('keyup', function(e) { _this.handleCloseEvent(e); }); } this.create_event = function(_event) { var event = new CustomEvent(_event, { bubbles: true, detail: { element: config["activeElement"], id: config["activeId"] } }); config["activeElement"].dispatchEvent(event); } this.handleOpenEvent = function(e) { e.preventDefault(); var slideoutId = e.currentTarget.getAttribute('data-slideout-target'); this.open(slideoutId); } this.handleCloseEvent = function(e) { e.preventDefault(); this.close(); } this.handleKeyEvent = function(e) { if (e.keyCode === 27) this.close(); } this.open = function(slideoutId) { if (config["activeId"] === String(slideoutId) || !slideoutId) return; if (config["activeId"] && config["activeId"] !== String(slideoutId)) this.close(); config["activeId"] = slideoutId; config["activeElement"] = document.querySelector('[data-slideout-id="' + config["activeId"] + '"]'); if (!config["activeElement"]) return; this.create_event('slideout_opening'); config["activeElement"].classList.add('opened'); pageRootElement.classList.add('slideout_locked'); pageRootElement.setAttribute('slideout', slideoutId); } this.close = function() { if (!config["activeId"]) return; this.create_event('slideout_closing'); config["activeElement"].classList.remove('opened'); pageRootElement.classList.remove('slideout_locked'); pageRootElement.removeAttribute('slideout'); config["activeId"] = null; config["activeElement"] = null; } this.init(); return this; } var loadDeferredStyles = function() { var addStylesNode = document.getElementById("deferred-styles"); var replacement = document.createElement("div"); replacement.innerHTML = addStylesNode.textContent; document.body.appendChild(replacement) addStylesNode.parentElement.removeChild(addStylesNode); // remove inline styles document.querySelector(".slidebar").style = ""; }; var raf = requestAnimationFrame || mozRequestAnimationFrame || webkitRequestAnimationFrame || msRequestAnimationFrame; if (raf) raf(function() { window.setTimeout(loadDeferredStyles, 0); }); else loadDeferredStyles();

 <noscript id="deferred-styles"> <style> /*@media screen and (max-width: 550px) {*/ html.slideout_locked { overflow: hidden; -ms-touch-action: none; touch-action: none; } .slideout_locked .slideout_main_content.slideout_blur { filter: blur(15px); } .slideout_overlay { z-index: -999; position: fixed; width: 100%; height: 100%; top: 0; left: 0; will-change: opacity; transition: opacity 0.5s ease; opacity: 0; background: #3c3442; } html.slideout_locked .slideout_overlay { opacity: 0.8; z-index: 999; } [data-slideout-id]{ position: fixed; overflow-y: auto; will-change: transform; transition: transform 0.5s ease; background: #fff; z-index: 2000; } [data-slideout-direction="left"][data-slideout-id], [data-slideout-direction="right"][data-slideout-id] { top: 0; width: 100%; max-width: 100%; height: 100%; } [data-slideout-direction="top"][data-slideout-id], [data-slideout-direction="bottom"][data-slideout-id] { left: 0; width: 100%; min-height: 150px; } [data-slideout-direction="left"][data-slideout-id] { left: 0; transform: translateZ(0) translateX(-100%); } [data-slideout-direction="right"][data-slideout-id] { right: 0; transform: translateZ(0) translateX(100%); } [data-slideout-direction="top"][data-slideout-id] { top: 0; transform: translateZ(0) translateY(-100%); } [data-slideout-direction="bottom"][data-slideout-id] { bottom: 0; transform: translateZ(0) translateY(100%); } [data-slideout-id].opened { display: block; transform: translateX(0px) translateY(0px); } [data-slideout-id] .close { width: 30px; height: 31px; position: relative; display: inline-block; vertical-align: text-bottom; text-align: center; cursor: pointer; } [data-slideout-id] .close:before, [data-slideout-id] .close:after { position: absolute; left: 10px; content: ' '; height: 31px; width: 3px; background-color: #000; } [data-slideout-id] .close:before { transform: rotate(45deg); } [data-slideout-id] .close:after { transform: rotate(-45deg); } .slidebar{ border-right:1px solid #000000; } /*}*/ </style> </noscript> <button data-id="sidebar" class="open-sidebar btn" type="button">&#9776;SERVICES</button> <!-- added inline styles here --> <div class="slidebar" data-slideout-id="sidebar" data-slideout-direction="left" style="transform: translateZ(0) translateX(-100%);"> <div class="visible-xs title"><span data-slideout-close class="pull-right close"></span> OUR SERVICES</div> sidebar sidebar sidebar sidebar sidebar sidebar sidebar sidebar sidebar sidebar sidebar sidebar sidebar sidebar sidebar sidebar sidebar sidebar sidebar sidebar sidebar sidebar sidebar sidebar sidebar sidebar sidebar sidebar sidebar sidebar sidebar sidebar sidebar sidebar sidebar sidebar sidebar sidebar sidebar sidebar sidebar sidebar sidebar sidebar sidebar sidebar sidebar sidebar sidebar sidebar sidebar sidebar sidebar sidebar sidebar sidebar sidebar sidebar sidebar sidebar sidebar sidebar sidebar sidebar sidebar sidebar sidebar sidebar sidebar sidebar sidebar sidebar sidebar sidebar sidebar sidebar sidebar sidebar sidebar sidebar sidebar sidebar sidebar sidebar sidebar sidebar sidebar sidebar sidebar sidebar sidebar sidebar sidebar sidebar sidebar sidebar sidebar sidebar sidebar sidebar sidebar sidebar sidebar sidebar sidebar sidebar sidebar sidebar sidebar </div>

Answer 2

Hide it via an inline stylesheet ( display: none or opacity: 0 ) and have your real stylesheet override those rules to reveal it. This way it's hidden until your stylesheet loads.