Fade in/out in between fades

Question

so here is the thing. I saw this website: http://laneandassociates.co/english-mustard-scottish-oats and I absolutely can't figure out how they do their fades.

The great thing about their fade effect is, that it can be "stopped" in the middle of the fading process by clicking.

For a better understanding: Let's assume the fadeIn duration is 1000. If I click when the fadeIn is at (for example) 700, the fadeIn immediately stops at 700 and begins to fade back out to 0. Then the fadeIn of the next image starts from 0. It just looks really smooth.

Problem is, I can't even find the code for the fades. Can someone show me how they made it, so I can take a look at it and learn it?

Thank you in advance.

Answer 1

That site is using a cubic-bezier CSS animation.

This is achieved with some CSS like the following:

.element.animated {
    opacity: 0;
    transition: opacity 0.8s cubic-bezier(0.645, 0.045, 0.355, 1),transform 0.8s cubic-bezier(0.645, 0.045, 0.355, 1),visibility 0.8s cubic-bezier(0.645, 0.045, 0.355, 1);
    visibility: hidden;
}

The hard part can be calculating the correct parameters for the type of animation you want. You can use this site to do that .

Here is a demo of another animation .

---

For removing animation on hover:

.element.animated:hover {
    opacity: 1;
    transition: none;
}

Answer 2

So one way you can do fading with jQuery: https://api.jquery.com/category/effects/fading/ . You can use the fadeIn method to fade in an element and the fadeOut method to fade out an element. To make the element stop fading on a click you could do something like this:

$('mySelector').on('click', function() {
    myElement.stop(); // This stops the fade from continuing
});

By using the stop method you can pause an animation or complete it early. For more details on stop animation check out the docs here: https://api.jquery.com/stop/ .