Daniyarkz

I write that the interruption when the site is first loaded, that is, in order to see it, you need to refresh the page. I recorded the screen to demonstrate the delay, pay attention to 5 second and 10 second. You will be able to see microloads in GSAP (not css or other) animations. Can you tell me what this may be connected with? I hope you will not pay attention to the quality of the recording, since I have reduced the resolution, because there is a limit of up to 500 kilobytes here [per user's request, video deleted]

Thank you very much for the recommendations. I made all the edits, but it didn't really help. I posted a full page for demonstration in order to demonstrate the interruption, all the code does not need to be studied, since I tried to remove blocks and scripts not related to animation, but it did not help in any way Therefore, I do not ask to estimate 4000 lines of html code, I do not know how to simulate the interruption when the page is first opened and therefore loaded the code in this way. But the js in charge of animation singled out separately. To be honest, I did not even think that you would watch html code, as it seems to me a problem in the correct use of scripts I do not speak English well enough, but I have only 2 questions: 1. Why might animation interrupted when you open a page for the first time? (the problem is exactly animation, since by removing the rest of the scripts and so on, the animation continues to interrupted) 2. Why the menu in the mobile version opens with a interruption (initially the menu opened with a delay in the desktop version, but when I deleted the extra scripts, the menu began to work correctly) I removed unnecessary scripts and styles so that you can watch the delay in the animation and make sure that the problem is not in other scripts. I also singled out a script in "JS" that slows down when first loaded with the tags //This script break on page load START and //This script break on page load END tags. There are only 112 lines of code, can you please see if there may be an error somewhere in them or if this code needs to be put somehow correctly? One script is responsible for the appearance of images (marked as //Image reveal animation), and the other script for the appearance of text (marked as //Text animation) Please ignore html. And if suddenly you do not notice the delay, please look at the mobile version to notice the delay https://codepen.io/Daniyar01/pen/yLvReXm

Initially, I wrote about the fact that my scripts were loaded with a delay, but after I deleted the extra ones, the problem went away. However, now, this problem is repeated in the mobile version, despite the fact that it is the same site I have one burger menu in the desktop and mobile versions, it works correctly and without delay in the desktop version, and when I open the menu on mobile version (on phone or desktop with change Dimensions using DevTools), it starts broke when I first open The site is the same, adaptability is achieved through css, but the menu slows down in the mobile version as well as when it slowed down in the desktop Can you tell me what it can be with? In the desktop version, the menu opens correctly and without delay

This is not like FOUC, because there is no flash when loading, and the animation simply does not turn on until the entire page loads I added a page to CodePen and am now trying to gradually delete scripts. I noticed that when deleting scripts and styles that are not related to animation, it does not stop slowing down, so I tend to believe that the error in the code with animations Most of all, this is noticeable in the mobile version, you can try to remove scripts and styles in html, animation will not stop slowing down from this You can see live here: https://codepen.io/Daniyar01/pen/yLvReXm

I got it. Anyway, thank you very much! You have the best support, community and cool solutions, I am glad that there are such communities and technologies?

Does GSAP turn on the first time content appears? And you went to my site, what do you think the delay may be associated with before the animation and can you please advise on what the problem may be? Maybe there were similar requests or there is some kind of universal solution? And then I even have concepts about what this is happening. I tried to compose and change scripts, for a week I have been trying to understand the reason for the delay in animation and to no avail Just now I added all animation scripts in the start of head and no saw any changes

@GreenSock Yes, of course I understand that. But I thought there was some kind of one-size-fits-all solution, or maybe a way of properly placing scripts so that they work when the first content becomes visible. I sent my website only to describe the problem more clearly. You may have noticed that the animation does not turn on immediately, but later and I want to fix it I tried to place the script in the code <script> document.addEventListener("DOMContentLoaded", function(event) { }); </script> But there was no difference Maybe there is some solution so that the animation starts immediately when rendering the content, and not after loading all the scripts?

Can you tell me how you can make scripts load when loading the page? Now my scripts work correctly, but those that are responsible for animation are turned on at the last moment of loading the page, because of this, an empty page opens first and only after a while the animation turns on. I would like to make the animation turn on immediately, try to install async, but because of this, the scripts stop working

@PointC @GreenSock thank you very much! I posted all the scripts between these tags and the site started to work smoothly, thank you!

Yes, this is an example of animation that I use. It works correctly, but brake when the page is first opened. It turns out that the animation turns on, stops for a moment and continues to work. I thought that some script is loaded and because of this, the animation slows down at the beginning

Wow! Its so simple, and great work! Thank you so much! I spent 3 days to resolve this issue, I have already rewritten all the scripts) Thank you! Animation with tweenmax start worked correctly But animation with gsap or scrolltrigger is interrupted when page is loaded. The animation turns on when the page loads, then stops and continues to work after a while. How can I make it work without interruptions? I have a reveal animation whith scrolltrigger (like this https://codepen.io/cameronknight/pen/pogQKwR) It's work correctly, but brakes when loading the page

Hello! On my website, I connected tweenmax and gsap and have brake in animations when I first load the page. If you wait a little, the animations work correctly and there are no broken when you turn it back on (but if I refresh page, animation is broken again). Please tell me what are the common reasons for broke in animations? Maybe I posted the scripts incorrectly, but I tried to change positions and animations either stopped working, or worked differently, but did not stop broken I have a lot of code, so I don't know how to put it in codepen, maybe there are some basic tips and tricks on how to properly connect scripts or maybe solutions that fix the problem with animation delay? I understand that the question is very abstract, but I do not know how to visually demonstrate and could not find a suitable answer on the Internet This is all scripts which I connected: <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/2.0.2/TweenMax.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.4.2/gsap.min.js"></script> <script src="https://unpkg.com/gsap@3/dist/ScrollTrigger.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.5/plugins/animation.gsap.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.18.0/TweenMax.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.5/ScrollMagic.js"></script>

want to delete the question, because i found a solution

Thank you so much! You helped a lot!

Hello! Please tell me what needs to be done to keep the blocks moving indefinitely vertically? I tried to adjust the vertical change of blocks, but they update when they reach the height of one word, and not the height of the block

Hello @Cassie, This is a great solution! Thank you so much!

Thank you so much! But I have a last question, how can I paused this marquee on hover? I refined the code a little, as a result it stops when pointing, but stopped changing direction when scrolling. You can see the code on link: https://codepen.io/Daniyar01/pen/oNGxgBL

Hello! Great solution! Please tell me how to make it possible to dragging? And how to make him stop when pointing?

Even if I connect DrawSVG and in principle all GSAP plugins, then the error remains. I really can't figure out how to fix the bug if it only appears when gsap is connected. Try removing < script type = "text/javascript" src = "js/gsap.js" > </script > everything will work. Except for text animation.

How can I turn off DrawSVG? I don't use it Maybe the code references, but I don't even know how to check and delete it

Can you tell me what might be the reasons why some features stop working when GSAP is connected?

I do not use the DrawSVG and do not even refer to it, but for some reason I get a mistake. What can help eliminate the conflict with animation? Or how to identify the reason why some features stop working when gsap connects? P.S. GSAP I use for smooth animation of infinite text motion (second block)

When I connect to gsap, part of the animation stops working properly. I posted part of the code with gsap (opens at the bottom) https://codepen.io/Daniyar01/pen/PopmzzM And without gsap: https://codepen.io/Daniyar01/pen/gOmWMwN https://codepen.io/Daniyar01/pen/gOmWMwN Note that the menu when gsap is turned on does not close, in fact there are many more errors, this is only one of the points. There was a GSAP target error [object Object] not found. I eliminated it by nullTargetWarn: false Therefore, he uploaded gsap to his server, because he thought it was because of it that there was a conflict with the animation. Now I assume it's because of Invalid property drawSVG set to 0% Missing plugin? gsap.registerPlugin() But I have no idea how to eliminate it, I don't even use these plugins, maybe I mishandled something? P.S. for convenience, all the code I translated html, and css connected remotely (I doubt that it will be needed, but connected for demonstration) Gsap connected via < script > below

Thank you so much for your quick response and excellent solution! You helped me!

Wow! Thank you so much! I'm still trying to understand the code, and you've already done, thank you so much! The only thing you can explain, please, is how to make sure that the direction does not change with hover? And then, after hover at the bottom line, it begins to move in a different direction