Jump to content
Search Community

Animation not waiting until page loaded

NickWoodward
Moderator Tag

Recommended Posts

NickWoodward
Posted
Quote

I've kind of solved it. It seems to be related to using Live Server from VSCode. If I open the page from Explorer there's no problem at all. If I load the html in LiveServer that's when the problem happens.

Does anyone know why?


Hello!

First time posting, and about second hour working on GSAP! Enjoying what little I've tried so far, but I'm struggling with the following animation if someone doesn't mind having a quick check please?

It's basically displaying about 10% of the animation, despite me trying to wait for the DOM and window to fully load, and to wait for the next animation frame. Perhaps I'm missing something obvious (the code works in the code pen)

Thanks!

Nick
 


function animateBoxes() {
    var tl = new TimelineMax(),
        box = document.querySelectorAll(".box");

    TweenMax.to(box, 1, {
        y: 200,
    });
}

document.addEventListener("DOMContentLoaded", function (event) {
    window.onload = function () {
        window.requestAnimationFrame(animateBoxes);
    };
});
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="style.css" />
    <title>Document</title>
  </head>
  <body>
    <div class="box-example">
      <div class="newbox"></div>
      <div class="box"></div>
      <div class="box"></div>
      <div class="box"></div>
      <div class="box"></div>
      <div class="box"></div>
    </div>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.4.0/gsap.min.js"></script>

    <script src="liveCode.js"></script>
  </body>
</html>
.box-example {
    position: relative;
    display: flex;
    justify-content: space-evenly;
    align-items: center;
    width: 100%;
    height: 20rem;
    padding: 0 10rem;
    background: teal;
}

.newbox {
    width: 5rem;
    height: 5rem;
    background: red;
}

.box {
    width: 5rem;
    height: 5rem;
    background: darkblue;
}

 

See the Pen WNrypyO by nwoodward (@nwoodward) on CodePen.

NickWoodward
Posted

I've kind of solved it. It seems to be related to using Live Server from VSCode. If I open the page from Explorer there's no problem at all. If I load the html in LiveServer that's when the problem happens.

Does anyone know why?

ZachSaucier
Posted

Hey Nick and welcome to the GreenSock forums!

 

1 minute ago, NickWoodward said:

If I load the html in LiveServer that's when the problem happens.

I'm not familiar with how LiveServer works. Maybe they change the rendering order somehow? Might be worth asking the creator/some forum focused on it.

 

Side notes:

  • If you're waiting for the load event on the window you don't also need to wait for the DOM content to load. In other words you can drop the DOMContentLoaded wrapping and it'd have the same functionality.
  • You're using the outdated GSAP syntax. We highly recommend using the new GSAP 3 syntax as it's sleeker and you can do more with it. I don't know where you're learning GSAP from, but the Getting Started article is the best place to start:If you just want to see the differences between the old and new you can look at this article:
NickWoodward
Posted

Yeah I had thought the code was a bit redundant, but I lifted it from an answer to a question similar to mine so had just blindly deferred to their knowledge - thanks for setting me straight though!

Currently learning from Sarah Drasner's FEM svg course, it must be a year or so old - things move fast ?. I might finish the course and then go through the links on the new syntax. Having to rewrite and understand will probably help me learn

Anyway, thanks again!

Nick

  • Like 1
ZachSaucier
Posted
6 minutes ago, NickWoodward said:

learning from Sarah Drasner's FEM svg course, it must be a year or so old - things move fast ?

Drasner is great! Ya, GSAP 3 came out November 2019. 

NickWoodward
Posted

Yeah she really is, her passion for it makes a big difference. Took a while to get to the live coding side of things - which she says she hates - but I think it's really good so far. To be fair FEM has been really good in general (short of one course), so I'm not surprised at all

  • Like 1

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...