0

The below code (Barba/gsap) works as expected in WordPress, but in Craft 3 only the 'once' (i.e. not the 'leave' and 'enter') hooks fire.

There are no errors or anything unusual in the Barba debug console output.

I'm using Laravel Valet, browserSync (gulp) for both WordPress and Craft local environments.

I follow the DOM structure outlined in the Barba.js docs here: https://barba.js.org/docs/getstarted/markup/

Any ideas on why Barba may not play nicely with Craft (as opposed to WordPress) and/or my local dev setup, or any known workarounds etc., would be much appreciated.

import barba from '@barba/core';
import gsap from 'gsap';

const animationEnter = (container) => {
  return gsap.from(container, { autoAlpha: 0, duration: 2, clearProps: 'all', ease: 'none' });
}

const animationLeave = (container) => {
  return gsap.to(container, { autoAlpha: 0, duration: 2, clearProps: 'all', ease: 'none' });
}

barba.init({
  debug: true,
  transitions: [
    {
      once({next}) {
        animationEnter(next.container);
      },
      leave: ({current}) => animationLeave(current.container),
      enter({next}) {
        animationEnter(next.container);
      }
    }
  ]
})
1
  • 2
    I’m voting to close this question because it's not about Craft. Craft is completely unopinionated in regards to front end code, so any problem you're having here is not related to Craft. (Great name, by the way ;-)) – James Smith Mar 3 at 11:08

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Browse other questions tagged or ask your own question.