Jump to content
Search Community

Animation is interrupted the first time the page is loaded (gsap + tweenmax)

Daniyarkz test
Moderator Tag

Recommended Posts

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>

Link to comment
Share on other sites

Kinda sounds like the animated elements may not be loaded and ready. Are you loading your scripts at the bottom of the page? If not, are you using a load and/or DOMContentLoaded event listener? Make sure custom JS is being loaded after the GSAP scripts. Check the console for errors.

 

You mentioned TweenMax, but you are using the latest versions of GSAP and all plugins, correct? 

 

That's about all I can think of without seeing the actual problem. 

 

Good luck.

  • Like 1
Link to comment
Share on other sites

hmmm.. looks like you edited your post to include a list of scripts.

 

27 minutes ago, Daniyarkz said:

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

 

Yeah - definitely remove those TweenMax files and make sure to use the latest GSAP (3.10.4). I'd also suggest using ScrollTrigger instead of ScrollMagic. I'm not sure why you're loading both.

  • Like 2
Link to comment
Share on other sites

1 hour ago, PointC said:

hmmm.. looks like you edited your post to include a list of scripts.

 

 

Yeah - definitely remove those TweenMax files and make sure to use the latest GSAP (3.10.4). I'd also suggest using ScrollTrigger instead of ScrollMagic. I'm not sure why you're loading both.

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 

See the Pen pogQKwR by cameronknight (@cameronknight) on CodePen

) It's work correctly, but brakes when loading the page

Link to comment
Share on other sites

4 hours ago, PointC said:

I'm not seeing any problems with the demo. If you're loading those images dynamically on your site, you may need to call refresh after they load.

 

https://greensock.com/docs/v3/Plugins/ScrollTrigger/static.refresh()

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

Link to comment
Share on other sites

Hi @Daniyarkz

 

We really can't troubleshoot if we cannot see the issue. Please provide a minimal demo that clearly shows the problem and we'd be happy to take a peek. 

 

I would suggest that you set up all your code to run in a "load" event, sorta like:

window.addEventListener("load", () => {
  // all your code here!
});

That way, you're sure that everything is loaded before you fire off any GSAP stuff. 

  • Like 2
Link to comment
Share on other sites

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

 

 

Link to comment
Share on other sites

Your live site has about 4000 lines of code plus it's loading 25 external libraries. That's way beyond the scope of help we can provide free here in these forums (please read the forum guidelines). 

 

2 hours ago, Daniyarkz said:

Can you tell me how you can make scripts load when loading the page?

Wouldn't it be as simple as putting them in <script> tags? I'm probably misunderstanding your question. 

 

Maybe you're struggling because you're loading a LOT of files and it's taking a while, but your animation code is waiting for the "load" event to fire? You can switch to a "DOMContentLoaded" event instead if you want to fire it as soon as all the HTML markup (only) is loaded (instead of waiting for all the external assets to load too). 

 

Good luck!

Link to comment
Share on other sites

@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?

Link to comment
Share on other sites

Yes, that's exactly what should happen. GSAP doesn't wait at all. If you have things set to execute in a DOMContentLoaded, that should happen right away. If not, there's something else going on in your site that's breaking things. If you can isolate the issue in a minimal demo like a CodePen (NOT your whole live site) and you think it's GSAP-related, we'd be happy to take a look. Otherwise, you're welcome to post in the "Jobs & Freelance" forum for paid assistance. 

 

I'd encourage you to make sure the GSAP-related files are loaded in a <script> tag before all the rest.

Link to comment
Share on other sites

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 

Link to comment
Share on other sites

GSAP "turns on" as soon as it's loaded. 

 

But of course your GSAP-related code must execute in order for anything to animate. 

 

13 minutes ago, Daniyarkz said:

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?

That's what I've been trying to tell you - we cannot troubleshoot live sites with 4000 lines of code and 25 external libraries. No, this is not a common question at all. There's no "universal solution". You need to figure out what the problem is to begin with, like what exactly is happening in your site's loading, the order of things, why there's a delay occurring, etc. Maybe try to use console.log() in an embedded <script> at the end of your page and then another one where your GSAP code executes and see how much time elapses and then dig into what's happening inbetween. This isn't a GSAP-related question, sorry - this looks like an issue with the rest of your site. If you can reproduce the issue in a minimal demo on CodePen, we'd be glad to take a look. But continuing to ask us to troubleshoot your live site isn't going to result in a better answer :)

Link to comment
Share on other sites

15 hours ago, Daniyarkz said:

Just now I added all animation scripts in the start of head and no saw any changes 

This sounds like a bad plan FYI - If it's just the library files that's ok, but your animation code will likely need to be run after the DOM is loaded so it's best to put it after the footer.

I can't actually load your site but maybe you're talking about FOUC instead of loading?

 

Take a look at this...
 


 

Link to comment
Share on other sites

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: 

See the Pen yLvReXm by Daniyar01 (@Daniyar01) on CodePen

Link to comment
Share on other sites

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

Link to comment
Share on other sites

Sorry, @Daniyarkz, but you still seem to be trying to find ways for us to troubleshoot loading issues on your whole site. A "minimal demo" doesn't mean copying/pasting almost 4,000 lines of HTML from your live site into CodePen :)

 

I don't have time to weed through all that code, but I will mention a few things I noticed from a quick glance: 

  • You seem to be wrapping many, many blocks of code in window.addEventListener("load", function() {...}) which is very wasteful. Just use ONE and put all your code in there. 
  • You're using invalid eases, like ease: Power2.out. I assume you meant ease: "power2.out". 
  • You set repeatDelay values on animations that don't have any repeat, so that won't do anything.
  • There are a bunch of warnings in the console about targets not existing, so you must have code that's trying to animate elements that don't exist.
  • You're using values like y: "-20%" instead of yPercent: -20. I'd strongly suggest using the dedicated yPercent/xPercent shortcuts.
  • You are using invalid start values on ScrollTriggers like start: "+=10%". There's no such thing. A start value should contain two values (or be numeric) - please read the docs.
  • You appear to have some CSS animations or transitions. Be VERY careful about that - never animate the same thing with GSAP and CSS transitions/animations. Use one or the other. If you combine them, you'll kill performance and things won't work properly. 

If you need help with a GSAP-specific question, please provide a very minimal demo and a very clear question. Otherwise, for general troubleshooting of your site and loading issues, you are welcome to post in the "Jobs & Freelance" forum to see if you can hire someone to help but please stop posting here about those things that violate the forum guidelines otherwise we'll need to ban your account. 

 

Good luck!

  • Like 2
Link to comment
Share on other sites

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

See the Pen yLvReXm by Daniyar01 (@Daniyar01) on CodePen

Link to comment
Share on other sites

Hi there.

I can't see any delay on mobile or desktop - as you can see in the video attached.

As Jack has explained multiple times - these forums are not for questions relating to web performance.

GSAP tweens will run immediately that they are loaded. If they are delayed there are likely issues with your overall site performance. This is not something that we can help with.

If you need help with perf - may I suggest reading Harry Roberts blog, there's some incredibly useful stuff there.
https://csswizardry.com/

In closing - This is not a GSAP issue, there are no GSAP errors - we can not help you any further with this. If you have any questions about GSAP we are happy to answer but if you continue asking for performance audits we are going to have to close this thread.

 

 

[per user's request, video deleted]

 

  • Like 2
Link to comment
Share on other sites

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]

 

Link to comment
Share on other sites

Sorry, I think we need to lock this thread. We've reiterated 6 times now that this is NOT a GSAP issue and what you're asking violates the forum guidelines. Performance audits take a lot of time and involve many, many factors. We continue to be open to answering any GSAP-specific questions you may have but you'll need to open a new thread. You are welcome to contact us about paid support if you'd like to pursue that further. 

 

Good luck with the project! 👍

  • Like 2
Link to comment
Share on other sites

Guest
This topic is now closed to further replies.
  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...