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

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]

 

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

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

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

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

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

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

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

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👍

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

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 

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

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

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

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

 

 

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

@PointC @GreenSock thank you very much! 

On 5/29/2022 at 10:32 AM, GreenSock said:

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

I posted all the scripts between these tags and the site started to work smoothly, thank you!

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

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

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

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

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

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]

want to delete the question, because i found a solution

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

[Vertical infinite scroll]

12 hours ago, akapowl said:

Hello @Daniyarkz

 

It looks to me like you tried to re-write the horizontalLoop helper function from the docs to make it work vertically?

 

I'm not sure it would be as easy as that, as I saw @GreenSock craft another version of a helper function specifically for vertical looping in this thread.

 

 

 

Here is one way you could utilize it to fit the logic you were trying to implement in your example.

I'm not sure if this is the best way to do it, but it works. Maybe it will help. Happy tweening!

 

 

 

 

 

 

Edit:

 

And just now I saw the comment in the code, that the 'speed can be positive or negative (in pixels per second)'.

So this actually gets quite a bit easier in the end.

 

 

 

 

 

Thank you so much! You helped a lot!

[Vertical infinite scroll]

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

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

[Question of Infinite Text Animation]

Hello @Cassie,

This is a great solution! Thank you so much!

 

[Question of Infinite Text Animation]

4 hours ago, GreenSock said:

Sure, there's a helper function in the docs that shows how to make it draggable:

 

 

 

Please keep in mind, though, that these free forums aren't really meant to be a "here are my requirements - please show me how to build it all" but we'd be happy to answer any GSAP-specific questions. The helper functions are intended to be a convenience - I hope this helps. 👍

 

If you need more detailed assistance beyond GSAP-specific questions, you can also post in the "Jobs & Freelance" forum to see if you can hire someone to help with your project. 

 

Good luck!

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:

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

[Question of Infinite Text Animation]

On 11/11/2021 at 3:48 AM, GreenSock said:

@Aeryla I assume you wanted something like this?: 

 

 

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

[Invalid property drawSVG set to 0% Missing plugin? gsap.registerPlugin() or some other error causes a gsap conflict]

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.

[Invalid property drawSVG set to 0% Missing plugin? gsap.registerPlugin() or some other error causes a gsap conflict]

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

[Invalid property drawSVG set to 0% Missing plugin? gsap.registerPlugin() or some other error causes a gsap conflict]

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

[Invalid property drawSVG set to 0% Missing plugin? gsap.registerPlugin() or some other error causes a gsap conflict]

1 hour ago, Cassie said:

If you're missing the drawSVG plugin you need to include it - that's a club GSAP perk https://greensock.com/club/

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)

[Invalid property drawSVG set to 0% Missing plugin? gsap.registerPlugin() or some other error causes a gsap conflict]

When I connect to gsap, part of the animation stops working properly.

 

I posted part of the code with gsap (opens at the bottom)

And without gsap:
https://codepen.io/Daniyar01/pen/gOmWMwN

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

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

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

[Question of Infinite Text Animation]

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

[Question of Infinite Text Animation]

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