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;

Barba js + GSAP page slide up transition problem

0 Answers0