I've been trying to add a smooth transition in a toggle between a corner tab and the entire div.
The transition works with a background color (it changes slowly over 0.5s) but for some reason it won't work with the clip-path (I've tried clip-path and clipPath but neither works).
I'm guessing the problem goes deeper than my simple understanding of javascript so I'm turning to you pros for help. I want the tab to open/close slowly for 0.5s.
EDIT: I changed the value of the clip-path from none to ellipse(200% 200% at 100% 0) as suggested in an answer below. Unfortunately that didn't solve the problem because now I can't toggle the tab and entire div. Only press it once.
For some reason it won't run the value through my else statement when the clip-path is a value. It works for other styles; like background-color - but not for clip-path... I've tried for hours and I can't figure it out. Anybody out there who knows what is causing the problem?
/*vlog toggle*/
function toggleStyle(el, vlog, value) {
if (el.style[vlog] !== value) {
el.style[vlog] = value;
} else {
el.style[vlog] = '';
}
}
var btn = document.querySelector("#vlog")
var div = document.querySelector("#vlog")
btn.addEventListener("click", function () {
toggleStyle(div, "clipPath", "ellipse(200% 200% at 100% 0)")
});#vlog {
width:300px;
height:300px;
background-color:#0a1227;
background-image:url('bg2.jpg');
background-size:100%;
background-repeat:no-repeat;
clip-path: ellipse(150px 150px at 100% 0);
position:absolute;
cursor:pointer;
top:0;
right:0;
z-index:999;
transition: background 1s, clip-path 0.5s;
}<div id='vlog'></div>Help is much appreciated!
Fred
You cannot transition to none
You can try adding a big shape like
ellipse(200% 200% at 100% 0)
EDIT : I advise you to toggle a class instead of toggling style
var btn = document.querySelector("#vlog")
var div = document.querySelector("#vlog")
btn.addEventListener("click", function() {
div.classList.toggle("full-size");
});#vlog {
width: 300px;
height: 300px;
background-color: #0a1227;
background-image: url('bg2.jpg');
background-size: 100%;
background-repeat: no-repeat;
clip-path: ellipse(150px 150px at 100% 0);
position: absolute;
cursor: pointer;
top: 0;
right: 0;
transition:background 1s, clip-path 0.5s;
z-index: 999;
}
#vlog.full-size {
clip-path: ellipse(200% 200% at 100% 0);
background: blue;
}<div id='vlog'></div>