Barba js + GSAP page slide up transition problem

Question

I'm new to Barba js and am struggling with a transition that I want to build. The idea is that the home page is a long list of buttons to other pages. On clicking on one of those buttons, that next page then slides up from the bottom.

At the moment. When at the top of the page, the transition works perfectly, however when scrolled down on the home page, the transition gets offset on the Y axis and starts too far up the page, with the timeline becoming super quick. If I've scrolled quite far down the home page, the transition doesn't occur at all, and the page just jumps to the next page.

Does anyone know where I'm going wrong here?

This is my app.js file that runs my transitions:

• there's two transitions, a slide up and slide down. Slide up to leave the home page and then slide down to go back to home. I've also included a "stick" transition, to keep the home container fixed as the next page transitions on top of it.

import barba from '@barba/core';
import { slideup, slideup_end, slidedown, stick, } from './animations';


barba.hooks.after(() => {
  scroll.update();
});

barba.init({
  debug: true,
  transitions: [

    {
      sync: true,
      name: 'home',
      to: {
        namespace: ['home']
      },
      once: ({ next }) => { stick(next.container); smooth(); },
      leave: ({ current }) => slidedown(current.container),
      enter: ({ next }) => { stick(next.container); },

    },



    {
      sync: true,
      name: 'architecture',
      to: {
        namespace: ['architecture']
      },
      once: ({ next }) => { slideup(next.container); smooth(); },
      leave: ({ current }) => stick(current.container),
      enter: ({ next }) => { slideup(next.container); },

    },
  ],
});

And this is my slide up animation:

import gsap from 'gsap';

const slideup = (container) => {
  gsap.set(container, { y: window.innerHeight, opacity: 1, autoAlpha: 1 });
  const timeline = gsap.timeline();
  const bgColor = container.dataset.bgColor || '#ffffff'; // Set a default background color if not specified
  container.style.backgroundColor = bgColor; // Set the initial background color

  timeline
    .fromTo(container, { y: window.innerHeight }, { y: 0, duration: 2 })
    .eventCallback('onStart', () => {
      container.classList.add('transition-active');
    })
    .eventCallback('onComplete', () => {
      container.classList.remove('transition-active');
    });

  return timeline;
};

export default slideup;

Answer 1

Having come across similar issues myself, I would suggest to declare 1 Gsap Timeline before the initiation of Barba, and then 'return' specific aspects of your desired animation in conjunction with a given Barba "instance"; i.e hook, views, and/or transition.

A (reduced) example of how you can handle seamless Gsap animations, on 1 timeline, yet across any/all of Barba's hooks, views, and/or transitions.

var tlBarba = new gsap.timeline();

barba.init({
  debug: true,
  transitions: [{
    name: 'home-to-page',
    sync: false,
    beforeEnter(data) {
      return tlBarba.to(data.current.container, {
          // do some animations on the current container before we enter the next namespace
        }, ">")
        .to(data.next.container, {
          // do some animations on the next container before we enter the next namespace
        }, ">")
    },
    afterEnter(data) {
      return tlBarba.to(data.current.container, {
        // do some animations on the current container after we enter the next namespace
      }, ">").to(data.next.container, {
        // do some animations on the next container after we enter the next namespace
      }, ">")
    },
    from: {
      namespace: 'home'
    },
    to: {
      namespace: 'page'
    }
  }],
  views: [{
    namespace: 'home',
    beforeEnter(data) {
      // do some stuff before we enter the home namespace (regardless of transition or previous namespace)
      // inc more animations
      // return tlBarba.to(data.current.container, {
      //   // do some animations on the current container before we enter this namespace
      // }, ">").to(data.next.container, {
      // // do some animations on the next container after we enter this namespace
      // }, ">")
    },
    afterEnter(data) {
      // do some other stuff after we've entered the home namespace
    }
  }, {
    namespace: 'page',
    beforeEnter(data) {
      // do some stuff before we enter the page namespace
    },
    afterEnter(data) {
      // do some other stuff after we've entered the page namespace
    }

  }]

});

barba.hooks.afterLeave((data) => {
  // return tlBarba.to(data.current.container, {
  //   // do some animations on the current container after we Leave any namespace
  // }, ">").to(data.next.container, {
  // // do some animations on the next container after we Leave any namespace
  // }, ">")
});