NickWoodward Posted July 10, 2020 Posted July 10, 2020 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 July 10, 2020 Author Posted July 10, 2020 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 July 10, 2020 Posted July 10, 2020 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 July 10, 2020 Author Posted July 10, 2020 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 1
ZachSaucier Posted July 10, 2020 Posted July 10, 2020 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 July 10, 2020 Author Posted July 10, 2020 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 1
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now