I'm currently working on a website that utilizes barba.js. Within the "slider" page, there is a three.js scene integrated. Initially, when I open the page everything functions as expected. However, if I navigate from the slider page to the home page and then return back to the slider page, an error occurs:
Uncaught (in promise) TypeError: _this.settings is not a function
The script responsible for controlling the slider page is Sketch.js.
import * as THREE from 'three';
import TextTexture from 'three.texttexture';
import TextSprite from '@seregpie/three.text-sprite';
import gsap from 'gsap';
import { Power2 } from 'gsap';
import layout from './Layout'
import { TimelineMax } from "gsap/all";
// Code snippet continues...
// The error originates at:
this.initiate( ()=> {
this.setupResize();
this.settings();
this.addObjects();
this.resize();
this.clickEvent();
this.play();
})
// This error is within line 193:
Promise.all(promises).then(() => {
cb();
});
The Router.js script handles the routing functionality in Barba.js:
import barba from '@barba/core'
import barbaPrefetch from '@barba/prefetch'
// Code snippet for the Router.js script...
Additionally, the Application.js script includes the following code:
import Router from './Router'
import * as THREE from './three.js';
import TextTexture from 'three.texttexture';
import TextSprite from '@seregpie/three.text-sprite';
import Sketch from './Sketch';
import layout from './Layout'
import iman from './InstanceManager'
import cursor from './Cursor'
import initiaLoader from './InitialLoader'
// More code within Application.js...
If you need further assistance or clarification, feel free to ask. Thank you!