Barba js + GSAP页面向上滑动过渡问题

Question

我是 Barba js 的新手，正在努力实现我想要构建的过渡。 这个想法是主页是其他页面的一长串按钮。单击其中一个按钮后，下一页就会从底部向上滑动。

此刻。当位于页面顶部时，过渡效果完美，但是当在主页上向下滚动时，过渡在 Y 轴上发生偏移，并且从页面上方开始太远，时间线变得非常快。如果我在主页上滚动得很远，则根本不会发生转换，页面只会跳转到下一页。

有谁知道我哪里错了？

这是我运行转换的 app.js 文件：

• 有两个过渡，向上滑动和向下滑动。向上滑动离开主页，然后向下滑动返回主页。 我还添加了一个“棒”过渡，以在下一页过渡到其顶部时保持主容器固定。

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); },

    },
  ],
});

这是我的向上滑动动画：

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

我自己也遇到过类似的问题，我建议在 Barba 启动之前声明 1 Gsap 时间轴，然后结合给定的 Barba“实例”“返回”您想要的动画的特定方面；即挂钩、视图和/或转换。

一个（简化的）示例，说明如何跨 1 个时间线，但跨任何/所有 Barba 的钩子、视图和/或过渡处理无缝过渡。

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
  // }, ">")
});