Animation plays first on website load

[alfianridwan 10 Likes (Newbie)]

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

[Carl 10,995 Likes (Superhero)]

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.

[Shaun Gorneau 2,021 Likes (Superhero)]

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.

[PointC 14,082 Likes (Superhero)]

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.

 

[Visual-Q 978 Likes (Leader)]

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

 

[Sahil 2,652 Likes (Superhero)]

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.

[Shaun Gorneau 2,021 Likes (Superhero)]

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!

[alfianridwan 10 Likes (Newbie)]

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

[alfianridwan 10 Likes (Newbie)]

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.

[alfianridwan 10 Likes (Newbie)]

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!

[Visual-Q 978 Likes (Leader)]

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/

 

 

 

[alfianridwan 10 Likes (Newbie)]

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!

[Jonathan 5,384 Likes (Superhero)]

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

 

[Visual-Q 978 Likes (Leader)]

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.