Posts

Showing posts with the label cross-fade

jQuery: eliminate white screen “pause” between animations

Image
Clash Royale CLAN TAG #URR8PPP jQuery: eliminate white screen “pause” between animations I have just discovered Barba.js and find it very useful. It provides smooth transitions between URLs of the same website. I have put together a Plunker consisting of two pages (index.html and about.html) that are loaded smoothly, with the help of jQuery’s fadeIn() and fadeOut() methods. fadeIn() fadeOut() $(document).ready(function() { var transEffect = Barba.BaseTransition.extend({ start: function() { this.newContainerLoading.then(val => this.fadeInNewcontent($(this.newContainer))); }, fadeInNewcontent: function(nc) { nc.hide(); var _this = this; $(this.oldContainer).fadeOut(1000).promise().done(() => { nc.css('visibility', 'visible'); nc.fadeIn(1000, function() { _this.done(); }); $('html, body').animate({ scrollTop: 300 },1000); }); } }); Barba.Pjax.ge...