Scrollmagic: Barba.js and ScrollMagic conflicts

[nexnetpl]

Hi, it is a simple page using both plugins, somehow ScrollMagic stop working during the navigation process
Is it a known issue?

Example http://serwer1853007.home.pl/www/index.html

Thank you

[dngraphisme]

Hello, i have a similar problem. Have you solved your problem?

Thanks

[geanfrancovolpe]

Have you solved the problem?

[dngraphisme]

@janpaepke Please help us for this...

With ajax scrollmagic dont work :(

Thanks for your help !

[geanfrancovolpe]

@janpaepke Please help us for this...

With ajax scrollmagic dont work :(

Thanks for your help !

@dngraphisme It does work, make a fresh npm install of scrollmagic, and import this libs (i'm assuming that you're using BarbaJs V2):

import barba from '@barba/core'; //BarbaJs v2
import ScrollMagic from "scrollmagic"; //Scrollmagic
import "scrollmagic/scrollmagic/uncompressed/plugins/debug.addIndicators"; //for indicators
import "scrollmagic/scrollmagic/uncompressed/plugins/animation.gsap"; //if you want to use GSAP

[geanfrancovolpe]

Hi, it is a simple page using both plugins, somehow ScrollMagic stop working during the navigation process
Is it a known issue?

Example http://serwer1853007.home.pl/www/index.html

Thank you

@nexnetpl You need to initScrollMagic.scene in every module, one for home and one for about because, it doesn't assign the scene to the entire namespaces divs. In the barba.init() function declare views to init every module beforeAppear, or beforeEnter the namespace. Checkout Barba V2 Views for more information.

[dngraphisme]

Hi, it is a simple page using both plugins, somehow ScrollMagic stop working during the navigation process
Is it a known issue?
Example http://serwer1853007.home.pl/www/index.html
Thank you

@nexnetpl You need to initScrollMagic.scene in every module, one for home and one for about because, it doesn't assign the scene to the entire namespaces divs. In the barba.init() function declare views to init every module beforeAppear, or beforeEnter the namespace. Checkout Barba V2 Views for more information.

Hello @geanfrancovolpe, thanks for your reply.

In fact you put your init in each pages (seen in barbajs) but you do not destroy anything when you leave the current page or when you come back?

You could link me an example that I'm trying to see what you did. I'm also on the V2, the V1 is a little outdated.

I'm back with SM and I'll let you know.

Thank you very much for your return, it helps a lot.

[geanfrancovolpe]

@dngraphisme No, i'm declaring barba.init() once in a main.ts. And creating homepage or aboutpage init module apart and importing it to main module. See this simple example (maybe not a best practice but it works):

In main.ts i've declared:

import barba from '@barba/core';
import { initAboutPage , destroyAboutPage } from './about'; //call the about module functions or create an export class, whatever you want.

let transitions = [ //Whatever transitions you'll want to make. e.g. a transition from `home` to `about`.  
    { 
      name: 'loaderTransition',
      sync: false,
      from: { namespace: ['home'] },
      to: { namespace: ['about'] },
      beforeLeave() { //here return a promise before leave home. }, 
      afterEnter() { //here declare functons after enter transition on about namespace. }
     }, 
     {  } //You can declare more than one transition the same way we declare it before, e.g. this time from `about` to `contact`, etc. 
] 

let views = [ 
    { 
       namespace: 'about'
       afterEnter( data ) { 
            initAboutPage(); //for example.
       }, 
       beforeLeave( data ) {
          destroyAboutPage(); //for example
      },
    } //you can create more than one view too.
]

barba.init({ //barba init.
    transitions : transitions,
    views : views
});

Then in the about.ts page module you should export these two functions initAboutPage with the SM scene or the SM scenes inside and destroyAboutPage destroying all those scenes, it works for me.

[dngraphisme]

afterEnter( data ) {
initAboutPage(); //for example.
},
beforeLeave( data ) {
destroyAboutPage(); //for example
},

Hello dude @geanfrancovolpe, thanks a lot for your help.

I explain to you what I did:

In my components.js (that's where I put all my functions) I created 2 functions:

`function animateADD() {

var ctrl = new ScrollMagic.Controller();

$('.animate').each(function () {

    var tl = new TimelineMax();

    TweenMax.set('.pr-bg', {
        left: "0"
    });

    tl.to('.pr-bg', 0.8, {
        force3D: true,
        left: "100%",
        ease: Power2.easeOut
    });

    var scene = new ScrollMagic.Scene({
        triggerElement: this,
        reverse: true,
    })
        .setTween(tl)
        .addIndicators()
        .addTo(ctrl);

});

};`

and one for destroy it >

`function destroyAnimateADD() {

var ctrl = new ScrollMagic.Controller();

ctrl.destroy(true);
ctrl = null;

};`

After this on my transition.js ( where there is barbaJS2) i put this on my views :

namespace: 'homepage', beforeEnter(data) { homePage(); parallaxADD(); //console.log('charging HP'); }, afterEnter( data ) { animateADD(); //for example. }, beforeLeave( data ) { destroyAnimateADD(); //for example },

According to you it's ok ? Thanks a lot mate

[geanfrancovolpe]

@dngraphisme a kind of, it does work to you? you can init the controller outside the functions, make it global in your module components.js. In that way when you call destroyAnimateADD(), it should destroy that global component.js controller. The beforeEnter() barba views hook, in my app isn't triggering when a page transition (barba transition) starts and end in that namespace, but when the page is loaded directly from the browser, it does work. The others view hooks works well ( afterEnter() and beforeLeave() ) in every case (page load, or page transition). Let me know if your code works.

[dngraphisme]

@dngraphisme a kind of, it does work to you? you can init the controller outside the functions, make it global in your module components.js. In that way when you call destroyAnimateADD(), it should destroy that global component.js controller. The beforeEnter() barba views hook, in my app isn't triggering when a page transition (barba transition) starts and end in that namespace, but when the page is loaded directly from the browser, it does work. The others view hooks works well ( afterEnter() and beforeLeave() ) in every case (page load, or page transition). Let me know if your code works.

Hello @geanfrancovolpe ,

Thanks again.

---

He gave a good tip.

For summary >

You have to put in the page views the functions that trigger your scenes, then when you leave the current page, destroy scrollmagic.

It works well on a customer's site.

[clmsftsw]

Hello,

It does not work for me. It seems like I am not able to reinit ScrollMagic after I destroyed it. Can somebody help?