Re-running script using Barba.JS

[jakob zabala]

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]

 

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]

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!

[Rigoc]

Hello there, as OP mentioned, I understand this is a gsap forum but I can't seem to get an answer to this barba js problem. For context, Currently I have a base transition with gsap nothing too fancy and in the contact page a script to load a multistep form. I can't get barba to reload that script in that specific namespace 'contacto'. Anyone with any updated solutions? I've tried using views and hooks but nothing seems to be working. 

TLDR: init script everytime barba transitions to a this specific page. 

[GSAP Helper]

Without a minimal demo, it's very difficult to troubleshoot; the issue could be caused by CSS, markup, a third party library, a 3rd party script, etc. Would you please provide a very simple CodePen or Stackblitz that illustrates the issue? 

 

Please don't include your whole project. Just some colored <div> elements and the GSAP code is best. See if you can recreate the issue with as few dependencies as possible. Start minimal and then incrementally add code bit by bit until it breaks. Usually people solve their own issues during this process! If not, at least we have a reduced test case which greatly increases your chances of getting a relevant answer.

 

See the Pen aYYOdN by GreenSock (@GreenSock) on CodePen

that loads all the plugins. Just click "fork" at the bottom right and make your minimal demo: 

 

Using a framework/library like React, Vue, Next, etc.? 

CodePen isn't always ideal for these tools, so here are some Stackblitz starter templates that you can fork and import the gsap-trial NPM package for using any of the bonus plugins: 

• React (please read this article!)
• Next
• Svelte
• Sveltekit
• Vue
• Nuxt

 

Please share the StackBlitz link directly to the file in question (where you've put the GSAP code) so we don't need to hunt through all the files. 

 

Once we see an isolated demo, we'll do our best to jump in and help with your GSAP-specific questions. ✅