I have a div that has a gradient border. So I want to give this div an animation and as soon as it is scrolled to this div, I want border-gradient turn around itself. I have no idea how to do it that's why I am asking it direcly.
<div class="border-gradient">
</div>
.border-gradient {
height: 230px;
width: 100%;
border: 5px solid transparent;
border-image: linear-gradient(190deg, rgba(205, 0, 98,0) 10%, rgba(205, 0, 98,0.5));
border-image-slice: 1;
}
you can animate border as:
.border-gradient {
border: solid 5px #FC5185;
transition: border-width 0.6s linear;
}
.border-gradient:hover { border-width: 10px; }
I was unable to find a css solution for animating the border, it may be achievable using images.
Anyways, here is a javascript solution
var bored = document.getElementsByClassName("border-gradient")[0];
var anim = {'running':0,'deg':0,'time':0};
var animator;
var boredy = bored.getBoundingClientRect().top;//grab the y of the element relative to the top of the web page
checkscroll();//check if element onscreen initially
window.onscroll = checkscroll;//check if element is onscreen when the user scrolls
function checkscroll() {
if(!anim.running && window.scrollY + window.innerHeight >= boredy) {
anim.running = 1; anim.time = 0;//reset the animation, set running to 1 so the animation won't retrigger while already running
startanim();
}
}
function startanim() {
animator = setInterval(function() {
anim.deg += 1;
anim.time += 50;
bored.style = `border-image:linear-gradient(${anim.deg}deg, rgba(205, 0, 98,0) 10%, rgba(205, 0, 98,0.5)); border-image-slice: 1;`;
if(anim.time >= 10000){window.clearInterval(animator); anim.running = 0}
},50);//start a loop that continousouly updates the border
}
Css:
.border-gradient {
height: 230px;
width: 100%;
border: 5px solid transparent;
border-image: linear-gradient(0deg, rgba(205, 0, 98,0) 10%, rgba(205, 0, 98,0.5));
border-image-slice: 1;
margin-top:150vh;
}
Improvements can certainly be made. So play around with it and tweak it to your liking.