Jump to content
Search Community

Creating a fade-in for a page

cptain test
Moderator Tag

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

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

Link to comment
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
Link to comment
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
Link to comment
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.
×
×
  • Create New...