Tgs/svg animation not displaying on webpage

I am learning to develop a website that I like.

For that I am following a project of one team.

I used github repo and successfully deployed using netlify.

However, I am facing one issue that tgs/svg animation is not getting displayed.

I am attaching herewith the screenshot in which it is visible that there is a place holder for svg but there is nothing getting displayed.

It is not problem in the original code as it is perfectly deployed by the original developers in cloudflare.

I am completely newbie and trying to learn. I am not sure where I am wrong so please help me.

@BhargavRajGuru Check the errors that are visible in the developer console, e.g

Uncaught TypeError: player.load is not a function

A wild guess, (because it’s extremely hard to debug from a partial screenshot alone), is that’s the code that implements the <tgs-player> and it’s not loading correctly.

1 Like

That’s the only error on developer console, there are total 9 error but all are related to player.load, and you are correct, I think it is the <tgs-player> which is not loading correctly.

I can provide you the more information, can you help me out to solve this?

@BhargavRajGuru You can provide more details, but it’s likely to be outside the Scope of Support.

If I can spot a quick fix based on what you provide then I’d let you know, otherwise you’ll probably need to seek assistance elsewhere as this forum is specifically for support with Netlify’s systems, (not for general web development or coding help).

Site works well with its original developers on Cloudflare so I think I am missing something while configuring it for netlify. hope, this may help you to get some idea.

It does not, not even in the slightest.

I don’t know what you’ve actually done, or even your skill level, I have zero visibility, from my perspective absolutely anything could be different between any two versions of something that someone else claims is “the same thing”.

If you can provide, at the least, a link to the site, then I can take a look.
If that’s not enough then it’d be best if you could provide a link to a public repository.

Sure, I can provide the links.

@BhargavRajGuru So this is absolutely out of scope and has nothing to do with Netlify.

The error is precisely as it says, you have code that is trying to execute methods on player and it is undefined.

The offending code is throughout your HTML file.
It is triggered when an event 'wcThemeChange' is broadcast by code in wowchemy.min.7e2d5311a27ca3dd5ea3d30b628ccfa8.js:

It’s not that some code is just loading slow either, since it remains permanently undefined:

So we know whatever code should be there to run it, simply isn’t there at all.
The problem can thus be summed up as “your site is missing a dependency”.

Googling the tgs-player I believe it is this dependency:

I can see references to lottie files in your repository:

Checking the documentation it provides several standard ways of installing it:
https://github.com/LottieFiles/lottie-player?tab=readme-ov-file#installation

Checking your codebase I can see references to:

<script src="https://unpkg.com/@lottiefiles/lottie-player@latest/dist/tgs-player.js"></script>

For example:

So that seems to be how your site loads it directly from the CDN.

However if you search the HTML source of your homepage, you will find that file is not included in there anywhere, which also evidenced by:

image

^ Nothing is loaded from unpkg.com

Obviously it won’t work, if it isn’t loaded.

You will need to edit your site to ensure that the dependency it requires is actually referenced on pages that try to utilize it.

All that said, I don’t work with Hugo and have no knowledge of the “theme” that you’re using.
If you believe the “front end issue” is being caused by a “build issue on Netlify” then you should check your build log and see if you can spot anything.

You should also run precisely the same build locally and look at the output there.

1 Like

Thanks a lot, you have taught me a lot.

Your teachings will help me a lot.

Sorry, If I gave you some trouble.