Jump to content
Search Community

GSAP footer parallax effect spoil if barba.js apply

JayShukla test
Moderator Tag

Recommended Posts

Here is the link - https://cdpn.io/elsueno/project/editor/XmqJWg

Here I'm working on the footer parallax effect from this example - 

If I apply Barba.js and click navigation "Home", "about" & "Product" then the footer gsap parallax effect as per the link not working properly because Barba not reloading the page and content for the inner page is less compare to the home page. Barba hooks are not handy in this situation because the footer is not included in the Barba container. Can you guys help me? 

 

image.thumb.png.ba27ef4de33a0b3d491b8cf9c783160b.png

Link to comment
Share on other sites

Thank you @akapowl for your time.

I tried this but did not succeed. Some of the threads are suggesting to refresh ScrollTrigger like ScrollTrigger.refresh(true); with Barba.js function and some are suggested to add gsap into function and pass it to Barba. but I have gsap on the footer and Barba in the middle content both are not connected each other I'm still looking for a solution. 

Link to comment
Share on other sites

 

Sorry for the misunderstanding:

 

What I was referring to was the part of killing off the old ScrollTriggers before/when transitioning and having to create them from scratch when the content of the new page has loaded. Otherwise ScrollTrigger might not have the correct dimensions to work with.

 

"You will have to kill off the old ScrollTriggers in a barba hook when transitioning to another page, and create all neccessary ScrollTriggers for the next page from scratch after transitioning. You will find examples on how to do that and some more explanation on the why in the threads below."

 

Did you try that?

 

Actually It shouldn't make a difference wether or not your footer is also transitioning, because when the content (which is transitioning) above the footer  has different dimensions (meaning height) than it had before transitioning, the position of the footer on the page will be different, thus ScrollTrigger will have the wrong data to work with.

 

I forked your project and put together a quick and dirty example of that -  but I will have to delete it again.

So please take a look at it and let me know if this works for you, so I can go ahead and delete it again.

 

https://codepen.io/akapowl/project/editor/c60c063115038852cb22145bb95bbe1e

 

What I did here was

 

1) to put the creation of the ScrollTrigger into a function and call it immediately so it is working on page load.

 

function initScrollTriggers() {
  
  gsap.set('.footer-container', { yPercent: -50 })
  const uncover = gsap.timeline({ paused:true })
  uncover.to('.footer-container', { yPercent: 0, ease: 'none' });
  ScrollTrigger.create({  
    trigger: 'main',
    // markers: true,
    start: 'bottom bottom',
    end: '+=95%',
    animation: uncover,
    scrub: true,  
  })
  // uncover.restart();
  
  console.log('ST Initiated')
  
}
initScrollTriggers();

 

 

2) I added a barba.hook for afterLeave in which I kill off all ScrollTriggers

 

barba.hooks.afterLeave((data) => {
		let triggers = ScrollTrigger.getAll();
		triggers.forEach( trigger => {			
			trigger.kill();
		});
    console.log('ST Killed')
});

 

 

and 3) In an onComplete-callback of your fading in transition (the after) I call that function that creates the ScrollTrigger again - done here to make sure that all layout-shifting is finished before re-applying the ScrollTrigger.

 

barba.init({
    transitions: [{
        name: 'default-transition',
        leave(data) {
            return gsap.to(data.current.container, {
                duration: 0.5,
                y: 200,
                opacity: 0,
            });
        },
        after(data) {
            return gsap.from(data.next.container, {
                duration: 0.5,
                y: 200,
                opacity: 0,
                onComplete: function() {
                  initScrollTriggers();
                }
            });
        }
      
      ...

 

Please don't see this as an absolute solution - as mentioned this is quick and dirty and it is just to show how to kill and create again.

Depending on quite some other things, it might be better to e.g. call the function somewhere else. But it seems to work.

 

In the end to get it working properly is a matter of barba- and general-setup that you would have to tinker with to get it working 100% properly.

 

 

Let me know if this helps.

 

Cheers, 

Paul

 

  • Like 3
  • Thanks 1
Link to comment
Share on other sites

48 minutes ago, akapowl said:

"You will have to kill off the old ScrollTriggers in a barba hook when transitioning to another page, and create all neccessary ScrollTriggers for the next page from scratch after transitioning. You will find examples on how to do that and some more explanation on the why in the threads below."

Thanks @akapowl It's works fine now.

I don't understand 2and step. So I just try 1st step and then directly 3rd step before as you mention. Now I got it How and why I need to kill and re-initiate animation after barba trigger.  

Link to comment
Share on other sites

 

The second step mentioned gets all active ScrollTriggers and kills every single one of them in the global afterLeave-hook of barba - after leaving a page and thus before creating the new ScrollTriggers. Maybe it works for you without that step, but my advice is to add it if you want to prevent possible future conflicts possibly resulting in performance or logical issues.

  • Like 2
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...