Introduction

So uptil this point in our effects unit we have effectively covered some fading and sliding effects in general and are now in good form to play a little bit with both of them.

In this chapter we will be considering an effect essentially combining fade-out together with sliding - known as fade-out slide-in.

So just like always let's first take sometime to go over its mechanism.

Mechanism

The current slide is faded out and at the same time the new one is slided in from the right. Hence the name fade-out slide in.

With this mechanism let's see whether you can answer some questions.

Which of the following properties will we have to use for the complete fade-out effect?
opacity and visibility
opacity only
visibility only
Will we need to consider z-index in this effect?

(Think of the stacking of the current and the new slide just like in the fade-out effect chapter)

Yes
No
How can we slide-in the new slide from the right?
Using transform
Using left
Using margin-left
Using all of the above
Which of the following will show the best performance as compared to the others in getting animated.
transform
left
margin-left

So how did you perform in this short test. If you aced it then you are pretty good to take this effect's code all on your own!

Anyways let's start with building the effect from the basics.

Building the effect

Fade out

Recalling from the mechanism above, we first have to fade out the current slide. This can be very easily done by giving it a class .fade-out which we are as of yet pretty familiar with.

.slides.fade-out {
    opacity: 0; 
    visibility: hidden;
    z-index: 1;
    transition: 1s linear;
    transition-property: visibility, opacity
}

Can you figure out why we've use z-index: 1 over here? It is given to stack the current slide at the backside of the new one - this is because the new slides comes in front of the current one. Simple thinking!

Here we have given a transition to .fade-out instead of to the class .slides because when we remove the class .fade-out we don't want any transitioning to happen - just an instant change.

Slide in

One thing done; now we have to give a slide-in effect to the new slide. Now here comes our thinking to the test again.

What will be better to give: a transition or an animation for the slide-in effect?. Think for a moment!

Well, it will be very easy for us to give an animation since then we won't have to worry about giving more classes to trigger the sliding from the right to the left. If you have a solid grip over CSS transitions and animations and worked with them for quite a while then you'll surely be able to understand this reasoning.

Therefore coming back to the topic, we'll construct a class .slide-in to account for animating the new slide from the right to the left.

.slides.slide-in {
    -webkit-animation: anim 1s ease-in-out 1;
    animation: slideIn 1s ease-in-out 1;
    animation-fill-mode: both;
    visibility: visible;
    z-index: 2;
}

The animation is of the name slideIn with a duration of 1s (you can choose whatever you want), timing function of ease-in-out and a single iteration. A single iteration is given since we only need to slide-in the slide once - not repeatedly.

animation-fill-mode: both serves to keep our slide in place once the animation ends. It simply keeps the element in its final state after the completion of the animation.

z-index: 2 as discussed earlier is given to stack the new slide on top of the current one.

And for the actual animation steps we have the following code:

@keyframes slideIn {
    from {transform: translateX(100%)}
    to {transform: translateX(0%)}
}

transform: translateX(100%) initially throws the new slide to the right side and then transform: translateX(0%) brings it into place.

JavaScript

So now that we've layed out the CSS classes perfectly for the effect we can move on to code some JavaScript to carry out the effect as desired. The working is very easy - same class toggles as in the previous chapters.

slides[prevCounter].classList.add("fade-out"); // fade out current slide
slides[prevCounter].classList.remove("slide-in"); // remove the class slide-in

slides[counter].classList.add("slide-in"); // slide the new slide in
slides[counter].classList.remove("fade-out"); // make the slide visible

To the current slide:

  1. We add the class .fade-out to simply fade it out
  2. Remove the class .slide-in so that when it becomes the new slide (for example when we go backwards after navigating to the second slide) the .slide-in class can be freshly given to it to cause a sliding animation.

And similarly to the new slide:

  1. We add the class .slide-in to simply slide it in
  2. Remove the class .fade-out to make it visible - remember .fade-out has visibility: hidden and opacity: 0 set on it and hence will hide the slide it is on.

Fade out Slide in Effect

And with this we finally finish another amazing effect!