Fixing transitioning errors using GSAP and BarbaJS

[Giovanny7]

I'm trying to fix many errors that I get in the console by gsap on the workpage.html. My logic is to have if statements that will fire up the gsap animations respectively if they're on the correct page

 

For example: 

function initHomeAnimations() {

    if (document.body.id === 'first-page') {
        //Page 2
        const tlH = gsap.timeline({
            scrollTrigger: {
                trigger: '.background',
                // markers: { startColor: 'blue', endColor: 'blue' },
                scrub: true,
                start: '-40%',
                end: '40%',
            },
        });
        tlH.fromTo('.highlight', { color: 'rgba(255, 255, 255, 0.4)' }, { color: 'rgba(255, 255, 255, 1)', stagger: 1 });

      .....
}

 

at first it works once I enter the first page but once I hit the workpage.html it continues to run which I don't want because it gives me a bunch of errors like gsap couldn't find the element which for some reason is running still.

 

Also, I have the following condition: But it doesn't work. I want this to only fire up when it is on the work page. However, if I change the condition to first-page or don't include the condition at all it works as expected which is weird. 

 

Another issue is if I refresh on the workpage.html everything breaks.

 

function initWorkAnimations() {
    if (document.body.id === 'work-page') {
        const container = document.querySelector('.scrollx');
        const sections = gsap.utils.toArray('.scrollx section');
        const texts = gsap.utils.toArray('anim');
        const mask = document.querySelector('.mask');

        // Preference
        const nav = document.querySelector('.nav');
        nav.classList.add('absolute-nav');
      
      // Animations
      .....
    }
 }

 

For some reason I'm trying to screenshots to this forum but it doesn't allow me since it exceeds kb. So here is the code sandbox  repo, try running it on visual studio using live server or fork it

 

One solution I'm going to give a try is to use Barba views and fire up the respective function to their corresponding namespace.

 

Link: https://codesandbox.io/p/github/officialgio/officialgio.github.io/draft/boring-khayyam?workspaceId=ee1f26f5-6074-4dc6-8c22-f5fbab809816&file=%2Fapp.js&selection=[{"endColumn"%3A1%2C"endLineNumber"%3A254%2C"startColumn"%3A1%2C"startLineNumber"%3A254}]

 

Repo: https://github.com/officialgio/officialgio.github.io

 

 

[Rodrigo]

Hi Giovanny, 

 

Is really hard for us to debug a live site plus I have zero experience with Barba. The errors/warnings are pretty clear in terms that they're telling you that those elements are not present in the DOM when those GSAP/ScrollTrigger instances are created.

 

@Ihatetomatoes made a series of videos for using Barba with GSAP:

On top of that you can use GSAP Context in your setup. While it was created thinking more in React and frameworks of that style I see no reason why it shouldn't be of any help in your case:

https://greensock.com/docs/v3/GSAP/gsap.context()

 

If Barba has some kind of callback when the transition of the previous page is completed, that is the page you're leaving, you can call the revert method in order to kill and revert all your GSAP/ScrollTrigger instances. The only requirement is that all your GSAP/ScrollTrigger instances must be created inside the context instance.

 

Sorry I can't be of more assistance.

Good luck with your project.

Happy Tweening!