I am trying to achieve a unique fade-in effect for an SVG image in my HTML. The challenge is to make the fade-in start from the top of the image and progress in a circular motion until it completes a full circle. An example of the effect I am aiming for is the clock transition in PowerPoint (link).
I attempted to use radial gradients as suggested here, but I could not achieve the desired result due to the transparency of the SVG image and the use of a background. The gradient approach only allows for a progressive circle from or to the center.
Below is the code I have tried so far. While it is not extensive, I am struggling to find a direction that could lead me to the desired outcome:
var isAnimProgressing = false;
$("#button1").click(function() {
var opa = "0";
if(!isAnimProgressing) {
isAnimProgressing = true;
if($(".test").css("opacity") == "1") {
opa = "0";
} else {
opa = "1";
}
$(".test").animate({opacity: opa}, 2000, "linear", function() {
isAnimProgressing = false;
});
}
});
$("#button2").click(function() {
if($(".test").hasClass("done")) {
$(".test").removeClass("done");
} else {
$(".test").addClass("done");
}
});body {
background-image : url(https://cdn.pixabay.com/photo/2016/04/15/04/02/water-1330252__340.jpg);
}
.test {
opacity: 0;
transition: all 2s ease;
}
.test.done {
opacity: 1;
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8>
<title>Document</title>
<link rel="stylesheet" type="text/css" href="styles/main.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>
<body>
<button id="button1">JS</button> OR
<button id="button2">CSS</button>
<div class="test loading">
<img src='https://s.cdpn.io/3/kiwi.svg' alt='loading-cat'>
</div>
</body>
</html>