Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
alfianridwan

Animation plays first on website load

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts

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

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.

  • Like 5
Link to post
Share on other sites

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.

  • Like 6
  • Haha 1
Link to post
Share on other sites

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.

:)

 

  • Like 4
Link to post
Share on other sites

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

 

  • Like 4
Link to post
Share on other sites
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. :D

 

Congrats on becoming moderator.

  • Like 1
  • Haha 2
Link to post
Share on other sites
2 minutes ago, Sahil said:

 

Now that you are moderator, you will have option to claim topic. Though don't trust it too much. :D

 

Congrats on becoming moderator.

 

Thanks Sahil! It was a completely unexpected surprise that turned around a ho-hum morning!

  • Like 5
Link to post
Share on other sites
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
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
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

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/

 

 

 

  • Like 1
Link to post
Share on other sites
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!

  • Like 1
Link to post
Share on other sites
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. 

  • Like 1
Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    No registered users viewing this page.

×