Mattes Posted December 14, 2022 Share Posted December 14, 2022 Hello everyone, I want to start an animation as soon as the DOM is fully loaded. Otherwise the animation flickers. Is there a solution for this? Thanks for help Link to comment Share on other sites More sharing options...
Rodrigo Posted December 14, 2022 Share Posted December 14, 2022 Hi, You might want to use the DOM Content Loaded event for that and run your GSAP code in there: https://developer.mozilla.org/en-US/docs/Web/API/Window/DOMContentLoaded_event If you keep having issues, please include a minimal demo so we can get a better look at what could be the problem. Happy Tweening! 1 Link to comment Share on other sites More sharing options...
Mattes Posted December 14, 2022 Author Share Posted December 14, 2022 Thanks for your answer but I think that's the wrong one. My entire website contains a wide variety of animations on the page. Images that are loaded in the div as background are animated using classes in gsap. This all works wonderfully, only partially when the sources (images, CSS) are not yet loaded does it start to flicker. I need something where everything is loaded first and only then starts. Link to comment Share on other sites More sharing options...
Rodrigo Posted December 14, 2022 Share Posted December 14, 2022 Hi, Maybe take a look at this code for the images: https://imagesloaded.desandro.com/ As for the styles, most likely those will be loaded and applied once the images are ready. If you rely heavily on those type of elements, it would be better to create an overlay in your site that indicates that the content is loading so your users know that they'll have to wait a bit. Also take a look at this: https://javascript.info/onload-ondomcontentloaded Happy Tweening! Link to comment Share on other sites More sharing options...
Mattes Posted December 14, 2022 Author Share Posted December 14, 2022 OK thank you. That with an overlay sounds good, but how do I get that properly synchronized between my animations, images and CSS data? Do you have an example for me? Link to comment Share on other sites More sharing options...
Rodrigo Posted December 14, 2022 Share Posted December 14, 2022 Hi, I'm a bit confused about your last question. Normally what you need to watch for is for the images to be loaded, as I mentioned is highly probable that the styles are loaded and applied by then. Just create an element that sits on top of everything with some inline styles (no need for a stylesheet in this case). When all the images are loaded, run your GSAP code, could be a function or set of functions, or everything inside the loaded event handler, I leave that choice to you, and finally hide the overlay. As I mentioned before is better to have a minimal demo in place so we can take a look at what you've tried so far and how can we help. On top of that this is basically how you should structure websites/apps and not specifically a GSAP-related issue. Happy Tweening! Link to comment Share on other sites More sharing options...
Solution Cassie Posted December 15, 2022 Solution Share Posted December 15, 2022 Also maybe? Link to comment Share on other sites More sharing options...
Mattes Posted December 16, 2022 Author Share Posted December 16, 2022 Hi Cassie, hi Rodrigo, thank you for your feedback. I watched Cassie's video once and tried to implement it, unfortunately without success. Here's an example: function init() { gsap.from(".fond-home", {opacity: 0, duration: 1, autoAlpha:0}) window.addEventListener("load", function(event){ init(); }); Can't get the .fond-home class addressed. Do I have an error in the syntax? Link to comment Share on other sites More sharing options...
Rodrigo Posted December 16, 2022 Share Posted December 16, 2022 Hi, Is really hard to see anything without a minimal demo actually. In the code you posted the only thing I see is that there is a missing curly bracket for the init function (the closing one). Also there is no need to animate both opacity and autoAlpha, they both tween the opacity property value. The only difference is that autoAlpha also toggles the visibility property of the DOM element from visible to invisible. Happy Tweening! Link to comment Share on other sites More sharing options...
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