Re-running script using Barba.JS

[jakob zabala 19 Likes (Newbie)]

Apologies in advance for the question that is more related to Barba.js than GSAP but you guys always point me in the right direction.

I have researched different methods, but my JS knowledge is limited so I am not sure on what strategy to use.

I want to do a simple page transition between two pages with separate JS files that have many GSAP timelines and event listeners.

Ideally I would like to use the views / beforeEnter hook to re initialise my JS scripts, but I don't know how to do this. 

Or do I need to break up my JS files into functions and call them using hooks; I also have different JS files for mobile version so if it is possible to on page transition to load / run my JS files that would be ideal.  

 

barba.init({

  views:[
      {
        namespace: 'detail',
        beforeEnter(){
          
        }
      }  
  ],
  
  transitions: [
        {
          name: 'general-transition-opacityfade',
          once({next}){
            animationEnter(next.container)
          },
          leave: ({current}) => animationLeave(current.container),
          enter({next}){
            animationEnter(next.container);

          }
        }, {
          name: 'detail',
          to:{
            namespace:['detail']
          },
          once({next}){
            navigation1(next.container)
          },
          leave: ({current}) => animationLeave(current.container),
          enter({next}){
            navigation1(next.container);
            navin2(next.container);
            navin3(next.container);

          }

        }

  ]
})

 

[akapowl 4,623 Likes (Superhero)]

 

Hey @jakob zabala

 

It really depends on some things how to do what best with barba. If you navigation for example is not part of the content that is being exchanged by barba but appears on every other page you won't have to re-initialize it since it will stay in the DOM and will still be accessable by the functions you initialized on page load (or whenever in that realm).

 

 

Quote

Or do I need to break up my JS files into functions and call them using hooks

 

This sounds like the right apporoach to me for everything that needs to be re-initialized.

 

 

These forums really try to stay more focussed on GSAP related questions. But there are quite some threads in combination with barba and ScrollTrigger in these forums - maybe you can take some of those as inspiration (using the search in the upper right area of the page).

 

Here is one of those

 

 

 

 

I also remember one earlier thread where a user has posted his code as an example

 

 

 

 

 

One other recommendation would be the learning resources by @ihatetomatoes that he linked to himself in this thread here

 

https://ihatetomatoes.net/demos/barbajs/

 

 

 

 

Barba also has a really great and responsive slack-channel where you can find all sorts of help.

You can find an invite link on top of that page here:

 

https://barba.js.org/api/

 

Hope altogether this will help you get further with your barba-project(s) - it sure did help me  

 

 

 

[jakob zabala 19 Likes (Newbie)]

Thanks so much for these resources! Yes I am involved now in the slack channel. before i posted here I wasn't getting any answers. here you guys are great and I was just looking for good resources/ examples to get my stuff working. Thank you!