scrollProxy does not work

[Olga__Kondr]

Hi, everyone! I am new to gsap. 
I am trying to get my scrollTrigger animation to work with gsap.
Take a look at my demo: https://codepen.io/Ollymolly/project/editor/AOxzmn
I have everything working fine except one. As you will see in the code, I am trying to put a scale animation on the headline. I put it all right, but nothing works. And I got the idea that I didn't connect scrollProxy correctly.
Any ideas how to fix it? I have a great barba js with smoothScroll. But somehow scrollTrigger.... does not work with them. 

 

See the Pen AOxzmn by Ollymolly (@Ollymolly) on CodePen

[akapowl]

Hey @OlgaKondr - welcome to the forums.

 

There is a whole lot of things to keep in mind, when combining all of these libraries together.

 

None of what you are experiencing is actually related to GSAP or ScrollTrigger itself -

just to the way things need to be set up with smooth-scrollbar or barba.

 

First off, you should iniate your Smooth-Scrollbar, before setting up your ScrollTriggers.

Second, I would recommend putting your #viewport for your smooth-scrollbar inside of your data-barba="container" because

Third, you will have to re-initialize every script you want to run (flawlessly) on a certain page, after barba has transitioned.

 

Thus, before the transition you will have to kill of your old ScrollTriggers and/or GSAP-Animations, and re-initiate them after the transition for the new page (ideally the same applies for your smooth-scrollbar, too, if you want it to work flawlessly).

 

That is because barba removes everything inside the old container and puts the contents of the new container in the old's place, so ScrollTrigger needs to calculate things for the new page layout.

 

 

On a further note, it is best to initiate your smooth-scrollbar like this

 

  scrollBar = document.getElementById('viewport');
  
  bodyScrollBar = Scrollbar.init(scrollBar, { damping: 0.07 });

 

 

 

 

See this example of your demo for the use of smooth-scrollbar together with ScrollTrigger

 

See the Pen 079a512ae9e9030aceb7388d007ee5f2 by akapowl (@akapowl) on CodePen

 

 

 

 

Before using libraries like these, especially when it is several together, I highly recommend thoroughly inspecting the documentations of those, and trying to understand, how things work. Otherwise you will run into a whle lot of problems further down the road.

 

Hope this helps a bit.

Paul

 

 

 

[Olga__Kondr]

thank you for the answer.
But unfortunately in your demo version, there is no barba shell. I thought I did the right thing. I have been reading the barba js forum for a long time and I understand how it works. I saw that I had to delete the scripts and initialize them, that's what I did with smoothScrollbar. In my version I re-run smoothScrollbar when I go from one page to another. And I thought to do it by analogy with scrollTrigger.... maybe I did not initialize it correctly. 
It's just strange, I couldn't find the code to reinitialize on the official barba.js website in the documentation... I'll look more closely

 

[Olga__Kondr]

I went the other way. I created a function for my animation and initialized it in afterEnter and everything works....
I wonder if this is the right way? or is there a shorter way? what do you think?  

[akapowl]

 

This way you would only be creating new instances over and over again, whenever you transition between pages - because you never kill or destroy the old instances - the same goes for the smooth-scrollbar in your initial demo.

 

For killing off old ScrollTriggers  you could use a function that contains this

 

let triggers = ScrollTrigger.getAll();
triggers.forEach( trigger => {			
	trigger.kill();
});

 

preferably in a global hook of barba.

 

A way to destroy the old smooth-scrollbar could be to use

 

Scrollbar.destroy(scrollBar);

 

alongside my example of how to set it up in the first place.

 

 

I personally use the beforeEnter global-hook to destroy old instances (because in the following enter-hook I remove the current.container of barba)

and the afterEnter global hook to initiate new instances

 

barba.hooks.beforeEnter(({ current, next }) => {
  
  var beforeEnterPromiseAll = new Promise(function (resolve) {
    
    killOldScrollTriggers();
    destroySmoothScrollbar();
    
    resolve();
    
  });

  return beforeEnterPromiseAll;

});


barba.hooks.enter(({ current, next }) => {   
  
  var enterPromiseAll = new Promise(function (resolve) {
    
    current.container.remove();		
    
    resolve();
    
  });

  return enterPromiseAll;

});


barba.hooks.afterEnter(({ current, next }) => {
  
  
  var afterEnterPromiseAll = new Promise(function (resolve) {
    
    initSmoothScrollbar();
    initScrollTriggers();
    
    resolve();
    
  });

  return afterEnterPromiseAll;

});

 

 

 

Depending on your set-up and how exactly you want things to work, you'd have to find a way of your own for this.

There is no real one-type-fits-all solution. If you search the forum for 'barba' you will find quite a few other recent threads on that topic.

 

[Olga__Kondr]

Got it. I will try, thank you!