Barba: Barba.js with Anime.Js

[xcrap]

I'm having basic problems integrating Barba with Anime.js.
Does anyone have an online example of this integration working ?
I can't figure it out how to integrate anime.js animation with Promises in the Barba Transitions.

Help ? :)

[obelmont]

I've been using anime.js for a website I am building at the moment and am having no issue integrating it. That being said i'm still quite new to promises so my code could definitely be improved on.

Here is an example method that I use in my extended Barba.BaseTransition object
The delayPromise function returns a new promise that is resolved once time parameter is met.

LoadingOut: function() {

    var _this = this;
    var oldHeight = this.oldContainer.offsetHeight;


    //Animation timeline
    return new Promise((resolve, reject) => {
        resolve();
      })
      .then(() => {
        _this.newContainer.style.visibility = 'visible';
        _this.newContainer.style.opacity = '1';
      })
      .then(delayPromise(100))
      .then(() => {
        anime({
          targets: _this.oldContainer,
          translateX: '-100%',
          opacity: '0',
          easing: 'easeOutExpo',
          duration: 900,
        });
      })
      .then(delayPromise(1200))
      .then(() => {
        anime({
          targets: _this.newContainer,
          translateX: 0,
          translateY: '-' + oldHeight + 'px',
          easing: 'easeOutExpo',
          duration: 1300,
        });
      })
      .then(delayPromise(1350))
      .then(() => {
        _this.newContainer.style.transform = '';
        enableScroll();
        _this.done();
      })
  }

[xcrap]

Thanks, I'll be checking this tomorrow. I've also checked a anime.js wrapper at https://github.com/exah/promise-anime so I'll check that together also :) Thanks for sharing this inside, I'll just see if it's possible to use that wrapper to optimize the code, this delayPromise makes me uncomfortable :D

[obelmont]

That wrapper looks very useful, thanks for the link!

I was just having another look at my code and a better alternative (in comparison to my previous code) could be to return a promise in your chain that resolves on the anime.js complete callback.

http://animejs.com/documentation/#complete

.then(() => {
  return new Promise((resolve, reject) => {
    anime({
      targets: _this.oldContainer,
      translateX: "-100%",
      opacity: "0",
      easing: "linear",
      duration: 900,
      complete: () => {
        resolve();
      }
    });
  });
})

[xcrap]

It's working like a charm.

I've the Beta page I'm developing online at
https://www.waka.pt/clients/boscana/

I'm just tweaking some final details and refinements but it's looking great.
Now I just have to check now to disable those hard loads when loading the same page.

Thanks a lot.
This is how my final code for the transitions looks like.

// Barba Init
var FadeTransition = Barba.BaseTransition.extend({
    start: function() {
        Promise
        .all([this.newContainerLoading, this.fadeOut()])
        .then(this.fadeIn.bind(this));
    },
    fadeOut: function() {
        return new Promise((resolve, reject) => {
        slider = undefined;
        anime({ targets: '.slideshow', translateY: [0,10], opacity: "0", easing: "easeInOutQuint", duration: 250 });
        anime({ targets: '.vanim', translateY: [0,10], opacity: "0", easing: "easeInOutQuint", duration: 250, delay: function(el, index) { return index * 50; }, complete: () => { resolve(); } });
        });
    },
    fadeIn: function() {
        // Scroll to Top
         anime({targets: [document.documentElement, document.body], scrollTop: 0, duration: 200,easing: 'easeInOutQuad'});
        // Junk Dealing and Animation Start
        var _this = this;
        $(this.newContainer).css({ visibility : 'visible' });
        $(this.oldContainer).hide();
        $('.vanim').css({ opacity : 0 });
        anime.remove('.vanim');
        anime({ targets: '.vanim', translateY: [-10,0], opacity: "1", easing: "easeInOutQuint", duration: 250, delay: function(el, index) { return index * 50; }, complete: () => { _this.done(); $('.vanim').css({'transform' : ''}); } });
        }
});

Barba.Pjax.getTransition = function() { return FadeTransition; };

[mudlabs]

@xcrap

Is this what you need? https://github.com/juliangarnier/anime/issues/87#issuecomment-371370533

[xcrap]

Well, this was so long ago, I've switched to GSAP meanwhile, but it would be probably something like that ;)