Problem barba.init in wordpress (oxygen builder)

[kardo95]

I am building the site with oxygen builder and wanted to experiment with barbajs. I'm following the documentation of barbajs and also some tutorials on youtube, but I'm getting an error on barba.init. I put this code on wordpress using the code snippet plugin.

`

<!-- load gsap animation library (minified version) -->
<script src="https://unpkg.com/gsap@latest/dist/gsap.min.js"></script>

<!-- init barba with a simple opacity transition -->
<script type="text/javascript">
    barba.use(barbaCss); 
    console.log('sono qui');
  // init Barba
    barba.init({
        transitions: [
            {
                name: 'home',
                beforeOnce(){
                    console.log('beforeOnce')
                },
                once(){
                    // with css plugin, this will not run
                    console.log('once')
                },
                afterOnce(){
                    console.log('afterOnce')
                }
            }, {
                name: 'fade',
                to: {
                    namespace: ['fade']
                },
                leave() {},
                enter() {},
            }
        ]
    } ); 

</script>`

And I have an error on the line of barba.init inspecting the console.

core:1 Uncaught Error: [@barba/core] No Barba wrapper found at t.e.init (core:1) at (index):40

Anyone can help me please? Thanks

P.S. I just tried barba.hooks.afterEnter( (data) ) => { // Js functions here } ); instead of beard.init and I have no errors but it doesn't seem to enter the function as the console.logs in there are not printed in the console

[xavierfoucrier]

Hello @kardo95,

No Barba wrapper found means that your HTML structure is missing the data-barba-wrapper around your page content. Read the docs again, carefully :wink:, see https://barba.js.org/docs/getstarted/markup/.

Closing the issue.

[kardo95]

I didn't include the HTML for the page I created because I didn't think it was needed. Clearly, I read the documentation and inserted everything that was needed. I look forward to your feedback. Thanks

Principle page

Home

Secondary page

Home

[xavierfoucrier]

@kardo95 there is just a missing </div> in your code, except that, it should work fine.

In addition, you should open an issue or ask the Oxygen community for help. Unfortunately, we are not able to cover all use case or all frameworks, and sometimes, there are incompatibilities.

[kardo95]

I'm already in facebook and telegram groups but no one has managed to integrate it yet, everyone is having problems. Oxygen is becoming very used, so if you can test it and succeed it would be great because your library is fantastic and it's really light. Thanks for the support Have a nice day