Anobiz Template: JS TypeError On Every Page Without A Hero Video (`main.js`, Scroll-animation Block) - Question | JoomShaper

is live, now with multi-currency selling.

Anobiz Template: JS TypeError On Every Page Without A Hero Video (`main.js`, Scroll-animation Block)

ONITdev, Lda.

ONITdev, Lda.

Template 3 weeks ago

Environment

Template Anobiz 1.0.0 (templates/anobiz/templateDetails.xml)
Framework Helix Ultimate 2.2.10
Joomla 6.1.3
PHP 8.3.33
Browser Chromium 1xx / Firefox — reproducible in both

File: templates/anobiz/js/main.js, around line 875–888 (the //Scroll Animation block).

Problem

The scroll-animation block queries #hero-video and .scroll-sequence unconditionally and then starts a requestAnimationFrame loop that dereferences video without a null check:

//Scroll Animation
const video = document.getElementById("hero-video");
const scrollSequence = document.querySelector(".scroll-sequence");
const VIDEO_DURATION = 4.04;

function update() {
  if (!video.seeking) {          // <-- line 881
    const rect = scrollSequence.getBoundingClientRect();
    ...
    video.currentTime = progress * VIDEO_DURATION;
  }
  requestAnimationFrame(update);
}
requestAnimationFrame(update);

On any page that does not contain a #hero-video element — which is every page of our site, and by default any page not built from the demo hero section — video is null and the first animation frame throws:

Uncaught TypeError: Cannot read properties of null (reading 'seeking')
    at update (main.js:881:14)

When it fires

On every page load, immediately after main.js runs, as soon as the first animation frame is requested. It is thrown once (the exception aborts the update() call before the requestAnimationFrame(update) re-schedule at the end of the function), so it does not loop, but it appears in the console of every single page.

Impact

Functionally harmless — nothing else in main.js depends on that block, and the rest of the file continues to run because the error is thrown asynchronously inside the rAF callback rather than during script evaluation. It is still undesirable:

  • it pollutes the browser console on every page, which masks real errors during development and QA;
  • it shows up as a JavaScript error in Lighthouse/monitoring and in client-side error trackers;
  • as a side effect, the requestAnimationFrame(update) loop is also started on pages that have no video, so an empty frame loop would keep running if the guard were added only inside the function.

Proposed fix

A null guard on both elements, and starting the loop only when they exist:

function update() {
  if (video && scrollSequence && !video.seeking) {
    ...
  }
  requestAnimationFrame(update);
}

if (video && scrollSequence) {
  requestAnimationFrame(update);
}

This keeps the behaviour identical on pages that do have the hero video, removes the console error everywhere else, and avoids an idle rAF loop on pages where the animation is not used.

Thanks for looking into it.

0
1 Answers
Mehtaz Afsana Borsha
Mehtaz Afsana Borsha
Accepted Answer
Support Agent 3 weeks ago #233390

Hi,

Thank you for the detailed report.

You are correct. The issue happens because the Anobiz template JavaScript assumes that the #hero-video and .scroll-sequence elements exist on every page. On pages without the hero video section, these elements return null, which causes the error:

Cannot read properties of null (reading 'seeking')

The fix is to add a check before initializing the scroll animation. The animation should only run when both elements are available.

You can update the scroll animation section in:

templates/anobiz/js/main.js

with a condition like:

const video = document.getElementById("hero-video");
const scrollSequence = document.querySelector(".scroll-sequence");

if (video && scrollSequence) {
    requestAnimationFrame(update);
}

This will keep the hero video animation working normally while preventing the script from running on pages where the required elements are not present.

For a production website, we recommend adding this as a custom JS override if possible, so the change is not lost during future template updates.

We will also forward this to the development team for consideration in a future Anobiz update.

Thanks for reporting this and thanks for your proposed solution.

-Regards.

0