Search jQuery

jQuery Forum

Eliminate white screen between animations

in Using jQuery • 4 years ago

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.

$(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.getTransition = function() {
return transEffect;
}
Barba.Pjax.start();
});

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 this one (wait 2, 3 seconds, then click "view case"). I mean, an "invisible transition".

Replies(6)

watusiware

Re: Eliminate white screen between animations

4 years ago

What would you like to replace the white screen with? A red screen? A blue screen?

You can change the background color if you like.

But you fade out, and then fade in. OF COURSE there is going to be a moment when only the background is seen. And humans will perceive it as more than just "a moment", since nothing more than the background will be perceived at low values of opacity.

Maybe you wanted a different effect. Do you want to do a cross-fade?

I wouldn't use .fadeOut() .fadeIn(), in any case, or any other jQuery transition. They are a blast from the past, before CSS3.

Use CSS transitions and/or animations instead.

There is a ton of information on the net.

Razvan Za..

Re: Eliminate white screen between animations

4 years ago

Can you show some code illustrating what you would do?

watusiware

Re: Eliminate white screen between animations

4 years ago

Maybe you wanted a different effect. Do you want to do a cross-fade?

So, do you want a cross-fade? You haven't said what you actually want. It's impossible to have a sequential fade out/fade in, and not see white (or whatever the background is), so you must want something else! I GUESS you want a cross-fade.

You could do it .fadeIn() .fadeOut() if you insist. You would have to start them at the SAME TIME, instead of fade in after the fade out is done.

But it would be better in any case to use CSS transitions. They would be more smooth, because the browser does the transition with native code, instead of jQuery using timer callbacks to "tween" the opacity values.

You would typically add some CSS class and have some CSS for the desired transition. Or add the transition CSS directly to each div.

https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Transitions/Using_CSS_transitions

Razvan Za..

Re: Eliminate white screen between animations

4 years ago

A cross-fade, like a classic slider.

watusiware

Re: Eliminate white screen between animations

4 years ago

I gave you an answer.

A cross-fade starts both fade-in and fade-out at the same time - not fade-in after fade-out is complete. It is simply a logic error.

The user STILL might perceive a white screen at the mid-point, though. It depends on the content being cross-faded. Cross-fades work best for photographs, and at that, those that do not have large areas of light colors.

Using CSS3 transitions instead of .fadeIn()/.fadeOut() is optional homework! ;) And has nothing to do with jQuery. I urge everybody creating web pages or pages for hybrid mobile apps to learn CSS3 transitions. They are the modern way to do this sort of thing. There are zillions of resources on the net to help you learn. I'd start with MDN and CSS-Tricks. You will have to dig into the CSS-Tricks archive, since CSS3 transitions have been around for quite some time now.

Razvan Za..

Re: Eliminate white screen between animations

4 years ago

I need some sample code to understand exactly what you mean.

Top Reply

Response title

Attachments

jQuery Forum

Eliminate white screen between animations

Replies(6)

Re: Eliminate white screen between animations

Re: Eliminate white screen between animations

Re: Eliminate white screen between animations

Re: Eliminate white screen between animations

Re: Eliminate white screen between animations

Re: Eliminate white screen between animations

Statistics

Tags

Actions