Barba: vanta.js (three.js) not working after page transition

[ollipaust]

Hello,

sorry I'm a beginner and have a question that bugs me much...

so I want to use Vanta.js, which is a script for animated backgrounds using three.js
https://vantajs.com

I want this script to be executed in another page than the index, lets call it work-page

if I go from index to work-page, the vanta background is not showing up

but when I refresh the work-page, its visible

the init for vanta.js is

VANTA.WAVES({ el: "#vanta-output", color: 0xb38218, shininess: 40.00, waveHeight: 10.50, waveSpeed: 0.85 });

how come?

[xavierfoucrier]

Hi @kumaaa,

You should init your library in the associated page using Barba views: https://barba.js.org/docs/v2/user/core.html#view-object.

import barba from '@barba/core';

barba.init({
  views: [{
    namespace: 'work-page',
    beforeEnter() {
      VANTA.WAVES({
        el: "#vanta-output",
        color: 0xb38218,
        shininess: 40.00,
        waveHeight: 10.50,
        waveSpeed: 0.85
      });
    }
  }]
});

Don't know what kind of transition you are doing, but be sure that your #vanta-output element is present before entering the next page.

Note that you can use another hook to init your library