Barba: Request: Sample code and/or pens for the barba.js.org transitions

[olets]

The new website is beautiful. I'd love to see minimal code for the section-change full-page swipes, the between-features slideshow effect (https://codepen.io/thierrymichel/project/editor/XkkWWv is close, but this would include the CSS changes to the header and footer), and the docs partial-page swipe.

The result might be less about Barba specifically and more about writing animations generally —the docs do thoroughly cover the Barba-specific code— but it could help people who don't know anime.js or whatever's being used get up and running.

[olets]

Sounds like more examples are already in your plans https://github.com/barbajs/barba/pull/496#issuecomment-596526410 I do think lifting the curtain on these particular animations would be cool, but either way probably doesn't need to be discussed. Go ahead and close if you want 👍

[xavierfoucrier]

Hi @olets,

Thanks for your time and feedback about the barba website!

As you probably know, we are currently working on the next documentation #509. We will take time to add more examples of Barba transition/animation/stuff in the future, as the website have a dedicated section for that.

I am closing the issue :wink:

[gitgudcameron]

This would be great. I had a hard time figuring out how to get a simple page transition working with barba & gsap. This is my working example if anyone needs it in the meantime.

function leaveAnimation(e) {
  return new Promise(async resolve => {
    const elements = e.querySelectorAll("img, h1");
    await gsap
      .to(elements, {
        duration: 1,
        y: 100,
        opacity: 0,
        ease: "power2.inOut",
        stagger: 0.3
      })
      .then();
    resolve()
  });
}

function enterAnimation(e) {
  return new Promise(resolve => {
    const elements = e.querySelectorAll("img, h1");
    gsap
      .from(elements, {
        duration: 1,
        y: 100,
        opacity: 0,
        ease: "power2.inOut",
        stagger: 0.3
      })
      .then(resolve());

  });
}

barba.init({
  debug: true,
  transitions: [
    {
      sync: false,
      leave: ({ current }) =>
        leaveAnimation(current.container.querySelector("main")),
      once: ({ next }) => enterAnimation(next.container.querySelector("main")),
      enter: ({ next }) => enterAnimation(next.container.querySelector("main"))
    }
  ]
});

[Jonatan-r]

How about some nice basic css transitions tutorials / examples? Also.. for a non npm user who just includes Barba trough the cdn... eh.. how do you use the css plugin? :)

[Jonatan-r]

How about some nice basic css transitions tutorials / examples? Also.. for a non npm user who just includes Barba trough the cdn... eh.. how do you use the css plugin? :)

So.. nevermind!... :) Found the answer right here:

https://github.com/barbajs/barba/issues/492#issuecomment-593921057

🔽

Hi @xavierfoucrier
Thank you for replying to me! What I actually want to ask is how to use @barba/css without npm, because you only wrote the CDN link of @barba/core, which made me mistakenly think that @barba/css can be used after importing that.
Anyway, I realized that I only need to import <script src =" https://unpkg.com/@barba/css "> </ script> to use the new features!! I'm really stupid haha.
Thank you very much again, I have no other questions, and will continue to support barba.js :3

Anyways.. for us noobs / rookies / not-webpack-people it'd might be nice to add <script src =" https://unpkg.com/@barba/css "> </ script> to https://barba.js.org/docs/plugins/css/ ? 😄