Javascript (GSAP animations) not working on Hugo

support
1

Hi,

My JS files are in directory /themename/static/js/name.js

They are linked in the footer fine, however js scripts from files does not work.

I also have HTML template of the page and it works fine there. It doesn’t work on Hugo theme. Hugo ste deployment does not show any errors.

snipper of the first file e.g. :

gsap.registerPlugin(ScrollTrigger);
gsap.registerPlugin(Flip);

// --------------------------------------------- //
// Lenis Scroll Plugin Start
// --------------------------------------------- //
const lenis = new Lenis();
lenis.on('scroll', ScrollTrigger.update);
gsap.ticker.add((time) => {
  lenis.raf(time * 1000)
});
gsap.ticker.lagSmoothing(0);
// --------------------------------------------- //
// Lenis Scroll Plugin End
// --------------------------------------------- //

$(window).on("load", function() {
   
  "use strict";
.
.
.

Snippet of another file:

/*!

 * jQuery JavaScript Library v3.7.1

 * https://jquery.com/

 *

 * Copyright OpenJS Foundation and other contributors

 * Released under the MIT license

 * 


 *

 * Date: 2023-08-28T13:37Z

 */

!function(e,t){"use strict";"object"==typeof module&&"object"= ……….

/*!

 * Modernizr v2.8.3

 * www.modernizr.com

 *

 * Copyright (c) Faruk Ates, Paul Irish, Alex Sexton

 * Available under the BSD and MIT licenses: 


 */

window.Modernizr=function
2

You are more likely to receive a prompt and accurate response if you post a link to your project’s Git repository.

See Requesting Help.

Let us see your code

Include a link to the source code repository of your project, because we really need the context of seeing your templates and partials to be able to help you. It is trivial to do a quick git clone on your repo, then run hugo server in your project, to help you out. On the other hand, recreating your code from screenshots, or sort of guessing at it, is not.

If you can’t share your repository for whatever reason, consider creating a dummy repo that you can share, which reproduces the problem you’re experiencing.

3

I am not able to publish repo.

BTW, javascript uses GSAP animations which not working on Hugo.

4

:backhand_index_pointing_up:

5

Hugo has nothing to do with JavaScript. And “not working” is not a helpful description of a problem.
I suggest you take a look at your site in your preferred browser’s developer tools. Its console should tell you more about JS files not found, errors while running JS etc.

6

I have no errors. Hugo does not support server side rendering for GSAP.

7

How is Hugo even remotely related to anything “server side”? From what I could gather on the GSAP website, it’s just a JS framework that runs in the browser.

I may, of course, be wrong. But as long as you don’t provide enough information for people to help you here, you’ll probably be out of luck. Create a simplified test case and I’m sure someone will figure it out.

8

I have finally found the issue. It is all about fonts. Some fonts (not all) are not loaded. Links are correct, all css fonts code works fine on pure HTML theme, have not idea why some fonts are not loaded on Hugo. No error in console.

all fonts are under /static/fonts

@font-face {
  font-family: 'Funnel Display';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/fonts/FunnelDisplay/FunnelDisplay-Bold.woff2) format('woff2');
}
9

Again – we can only help you if you provide useful information. A snippet of your CSS is not useful as such.

Hugo never loads fonts. It’s all about your setup. About which you don’t tell us anything. The least you could do is verify what path the font is (not) loaded from in your developer tools.

1 Like
10

Fixed. I have two CSS files and changed their order, the 2nd one should be first.

11

This topic was automatically closed 2 days after the last reply. New replies are no longer allowed.