The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS How can I eliminate the white screen “pause” between these animations?

  • This topic is empty.
Viewing 1 post (of 1 total)
  • Author
  • #274894

    I have just discovered Barba.js and find it very useful. It provides smooth transitions between URLs of the same website.

    On this website, if you click on “Studiu de caz”, you will be taken to an inner page, with an animated, non-abrupt transition. The script:

        var transEffect = Barba.BaseTransition.extend({
        start: function() {
          this.newContainerLoading.then(val => this.fadeInNewcontent($(this.newContainer)));
        fadeInNewcontent: function(nc) {
          var _this = this;
          nc.css('visibility', 'visible');
 => {
            if (!isMobile.any()) {
              $('html, body').delay(100).animate({
                scrollTop: 200
      Barba.Pjax.getTransition = function() {
        return transEffect;

    The problem with this animations is that there is a white screen interval between them. How could i eliminate this interval, to make the transition smoother? By “smoother” I mean similar to the one here.

    The issue was (still is) discussed on Stackoverflow and there is valuable info there.

Viewing 1 post (of 1 total)
  • The forum ‘CSS’ is closed to new topics and replies.