Share Posted March 13, 2018 Hi everyone, For my school's graduation showcase website, I have a DrawSVG element in which when completed, will perform an animation on other elements. You can view the code in main.js file here. The problem is on https://fmsstories.com, when loaded, there will be: 1. A slight blink of the original DrawSVG element 2. The elements that were supposed to be animated to view after DrawSVG element is completed drawing comes up first, and THEN disappearing and then appearing again after the animation is complete. This is especially apparent in mobile (i0S 11, Chrome, Safari). How do I fix the 2 problems? I have always thought it might be caching problem, but I have already tried to fix it using caching meta tags but the problem still persists. Is it a possibility on how I write the JS? (sorry, I'm still a newbie in JS!). Thanks, Alfian See the Pen by (@) on CodePen Link to post Share on other sites
Share Posted March 13, 2018 Nice work on the site. Looking good. We really can't investigate a standalone javascript file with 100+ lines of code. However, if you are seeing elements appear on page load before you want to animate them, most often what you can and should do is set their visibility to hidden in the css path { visibility:hidden; } and then in the js when it comes time animate them use TweenLite.set("path", {visibility:"visible"}); It sounds like your page is rendering before the js runs which is typical. So by setting the visibility to hidden via css, they will not be shown on the initial render of the page. 5 Link to post Share on other sites
Share Posted March 13, 2018 The best thing to do here for any kind of help would be to distill the problem down in a CodePen. We can then fork and recommend things to fix any issues you might encounter. But, at first glance ... the get rid of the initial flash of the SVG, you can simply use some inline CSS to not display it, add "opacity: 0;" (or visibility: hidden;") to its selector in a style sheet, or load it in with JS within $('document').ready. (I'm sure there are other options I'm forgetting right now). Edit: Dang it ... did it again. 6 1 Link to post Share on other sites
Share Posted March 13, 2018 You can search the forum/Google for FOUC (Flash Of Unstyled Content) Here's another post by Master Blake that shows his approach. Happy tweening. 4 Link to post Share on other sites
Share Posted March 13, 2018 You can also add a global handler something like this that will prevent the page from being visible until all assets are ready. In head: <style type="text/css"> .js {visibility: hidden;} </style> <script type="text/javascript"> document.getElementsByTagName('html')[0].className = 'js'; </script> Before closing body tag: <script> // assuming jQuery was loaded with assets window.onload = function() { $('html').removeClass('js');}; </script> Discussion on SO of various page load event handlers: https://stackoverflow.com/questions/807878/javascript-that-executes-after-page-load 4 Link to post Share on other sites
Share Posted March 13, 2018 Quote Dang it ... did it again. Now that you are moderator, you will have option to claim topic. Though don't trust it too much. Congrats on becoming moderator. 1 2 Link to post Share on other sites
Share Posted March 13, 2018 2 minutes ago, Sahil said: Now that you are moderator, you will have option to claim topic. Though don't trust it too much. Congrats on becoming moderator. Thanks Sahil! It was a completely unexpected surprise that turned around a ho-hum morning! 5 Link to post Share on other sites
Author Share Posted March 14, 2018 On 13/03/2018 at 10:41 PM, Carl said: Nice work on the site. Looking good. We really can't investigate a standalone javascript file with 100+ lines of code. However, if you are seeing elements appear on page load before you want to animate them, most often what you can and should do is set their visibility to hidden in the css path { visibility:hidden; } and then in the js when it comes time animate them use TweenLite.set("path", {visibility:"visible"}); It sounds like your page is rendering before the js runs which is typical. So by setting the visibility to hidden via css, they will not be shown on the initial render of the page. Hi Carl, This method doesn't work for me. I think it might be how I write the Javascript, which caused it to render like that. See https://cl.ly/qB3P You can see that if you open a new tab and go to the website, the site will render like that. However, once you refresh it, it will render normally. Is there any workarounds for this, so that on new tab and website visit, the website will render exactly how it renders when user refresh the website? Thanks, Alfian Link to post Share on other sites
Author Share Posted March 14, 2018 On 13/03/2018 at 10:42 PM, Shaun Gorneau said: The best thing to do here for any kind of help would be to distill the problem down in a CodePen. We can then fork and recommend things to fix any issues you might encounter. But, at first glance ... the get rid of the initial flash of the SVG, you can simply use some inline CSS to not display it, add "opacity: 0;" (or visibility: hidden;") to its selector in a style sheet, or load it in with JS within $('document').ready. (I'm sure there are other options I'm forgetting right now). Edit: Dang it ... did it again. I'll create a CodePen if the problem still persists, because I think it might possible be how I load the JS and CSS files and/or caching problems. Link to post Share on other sites
Author Share Posted March 14, 2018 23 hours ago, Visual-Q said: You can also add a global handler something like this that will prevent the page from being visible until all assets are ready. In head: <style type="text/css"> .js {visibility: hidden;} </style> <script type="text/javascript"> document.getElementsByTagName('html')[0].className = 'js'; </script> Before closing body tag: <script> // assuming jQuery was loaded with assets window.onload = function() { $('html').removeClass('js');}; </script> Discussion on SO of various page load event handlers: https://stackoverflow.com/questions/807878/javascript-that-executes-after-page-load So far, this works best. I think its due to that "window.onload" javascript. Can you explain what it does to the rendering of JS and the relevant CSS? But thank you for your answer! Link to post Share on other sites
Share Posted March 14, 2018 The way this works is first it adds a css style .js to the document(html) that hides it from view using visibility: hidden while all the assets are loading. window.onload is an event that fires when the assets are finished loading, it's similar to document.ready which you may have seen before but fires later in theory when everything is loaded, including images. On this event we remove the style from the document(html) that hides it and it regains normal visibility by default. As such if you have any javascript that immediately sets or affects visibility or any other style attributes of page elements when it runs, the styles should be in place when the page becomes visible and prevent flash of unstyled content. Some info about it on MDN https://developer.mozilla.org/en-US/docs/Web/API/GlobalEventHandlers/onload https://developer.mozilla.org/en-US/docs/Web/Events/load It's also common to see the jQuery load method used for this: $( window ).load(function() { // Run code }); https://api.jquery.com/load-event/ 1 Link to post Share on other sites
Author Share Posted March 15, 2018 20 hours ago, Visual-Q said: The way this works is first it adds a css style .js to the document(html) that hides it from view using visibility: hidden while all the assets are loading. window.onload is an event that fires when the assets are finished loading, it's similar to document.ready which you may have seen before but fires later in theory when everything is loaded, including images. On this event we remove the style from the document(html) that hides it and it regains normal visibility by default. As such if you have any javascript that immediately sets or affects visibility or any other style attributes of page elements when it runs, the styles should be in place when the page becomes visible and prevent flash of unstyled content. Some info about it on MDN https://developer.mozilla.org/en-US/docs/Web/API/GlobalEventHandlers/onload https://developer.mozilla.org/en-US/docs/Web/Events/load It's also common to see the jQuery load method used for this: $( window ).load(function() { // Run code }); https://api.jquery.com/load-event/ Thank you very much for the detailed explanation, I know understand the code much better. Thanks! 1 Link to post Share on other sites
Share Posted March 15, 2018 Just be careful about using the jQuery load() event method, that has been deprecated since version 1.3 and was removed from jQuery 3.0. https://api.jquery.com/load-event/ if using jQuery to check window load, please use $(window).bind("load") or $(window).on("load") instead 3 Link to post Share on other sites
Share Posted March 15, 2018 Quote Just be careful about using the jQuery load() event method, that has been deprecated since version 1.3 and was removed from jQuery 3.0. Thanks for the heads up Jonathan I didn't know it was deprecated. 1 Link to post Share on other sites
