Jump to content
GreenSock

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

Creating a fade-in for a page

Recommended Posts

Hello everyone! I just started using the GSAP library a few days ago and I am having an absolute blast! However, I have been struggling to achieve this fade-in effect for a page I am building (check it out here). The idea (just like in the codepen that I linked and the actual page) is to have the page fade-in from above when the DOM is loaded.

 

Initially, I just added a fromTo Tween, then I added the window.onload function and inserted the code in there. Both "solutions" failed, as the content appears and then the animation procs. I wanted the animation to proc as soon as the DOM is ready.

 

I am assuming the solution is simple, though, I only have a basic understanding of JavaScript and the GSAP library so I cannot seem to solve this. Any input?

See the Pen yqBLyz by Cptain (@Cptain) on CodePen

Share this post


Link to post
Share on other sites

Are you sure waiting for the page to completely load is a good idea? It looks like you have a bunch of images, and on a slow network the user might be staring at a blank screen for a while.

 

Anyways, here's a pattern I sometimes use. I hide stuff until the DOM is ready by putting an "unresolved" attribute on elements to prevent FOUC. The unresolved name is arbitrary, so you can use whatever name you want.

 

<html>
<head>
<style>
  [unresolved] {
    display: none;
  }
</style>
</head>

<body unresolved>
  ...
</body>
</html>

 

 

From there I check the readyState of the document to determine when to initialize the app. Notice the difference between the "DOMContentLoaded" and "load" events. I'm usually only interested in when the DOM is interactive, so I don't worry about all the images being loaded.

https://developer.mozilla.org/en-US/docs/Web/API/Document/readyState

https://developer.mozilla.org/en-US/docs/Web/Events/DOMContentLoaded

https://developer.mozilla.org/en-US/docs/Web/Events/load

 

 

if (document.readyState === "interactive" || document.readyState === "complete") {
  resolve();
} else {
  window.addEventListener("DOMContentLoaded", resolve);
}

// Initialize your app
function resolve() {
  
  document.body.removeAttribute("unresolved");
  
  TweenMax.from("#content", 1, {
    opacity: 0,
    y: 50
  });
}

 

 

 

See the Pen BPaEbr by osublake (@osublake) on CodePen

 

 

  • Like 6
  • Thanks 1

Share this post


Link to post
Share on other sites

To wait for everything to be loaded, like images, that snippet would look like this.

 

if (document.readyState === "complete") {
  resolve();
} else {
  window.addEventListener("load", resolve);
}

 

  • Like 4
  • Thanks 1

Share this post


Link to post
Share on other sites

Thanks for the replies OSUblake, I appreciate them. Thanks for the comment "Are you sure waiting for the page to completely load is a good idea?", not sure why I didn't think about this thoroughly. It does sound like a bad idea actually since there is likely the will be staring at a blank page as you pointed out. I'll probably take another approach with this—like having just the panels fade-in or something—, or drop it entirely.

  • Like 1

Share this post


Link to post
Share on other sites

What I typically do is load up a shell of the page first, like the header, navigation, footer, etc, and then animate page content in and out. Here's an example of that using a basic router. 

 

See the Pen OwPJbL by osublake (@osublake) on CodePen

 

 

 

 

  • Like 5

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...

  • Recently Browsing   0 members

    No registered users viewing this page.

×