Animating svg fill from bottom to top - css

Question

I have a simple layout:
split screen, one section is white, the other is black.
centered logo, half black and half white
when you hover the black section, it gets filled from bottom to top with white
Now, what I try to do:
Fill the logo from bottom to top with black when I hover the section on the right.
Fill the logo from top to bottom with white when I hover the section on the left
I tried many things... but I always failed.
I think the easiest solution would be to have a rectangle with a linear gradient as a background-image, add a mask and then move the background-position.
Here is a snippet:
$( document ).ready(function() {
$(".split-half").hover(function(){
var elem = $(this);
$(".split-half").each(function(){
$(this).removeClass('active');
setTimeout(function(){
elem.addClass('active');
}, 400);
});
});
});
body *, *:after, *:before {
box-sizing: border-box;
margin:0;
padding:0;
}
html, body {
height: 100%;
}
.split-half {
display: block;
width: 50%;
height: 100%;
position: absolute;
z-index: 1;
padding: 5%;
}
.split-half:nth-child(1) {
background: #fff;
left: 0;
}
.split-half:nth-child(1):after {
content: '';
width: 100%;
height: 0;
position: absolute;
top: 0;
left: 0;
background: #000;
transition: height .3s;
}
.split-half:nth-child(1).active:hover:after {
height: 100%;
z-index: -1;
}
.split-half:nth-child(2) {
background: #000;
right: 0;
}
.split-half:nth-child(2):after {
content: '';
width: 100%;
height: 0;
position: absolute;
bottom: 0;
left: 0;
background: #fff;
transition: height .3s;
}
.split-half:nth-child(2).active:hover:after {
height: 100%;
z-index: -1;
}
.split-half:nth-child(2).active:hover + #logo #rect {
background-position: 0% 100%;
}
#logo {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-39.8%, -50%);
max-width: 420px;
min-width: 120px;
width: 10%;
height: auto;
z-index: 10;
}
#logo #rect {
background-image: linear-gradient(to bottom, white 0%, white 50%, black 50%, black 100%);
background-position: 0% 0%;
background-size: 100% 200%;
height: 100%;
width: 100%;
transition: all .3s;
mask: url(#mhSvg);
position: absolute;
top: 0;
right: 0;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<section>
<div class="split-half"></div>
<div class="split-half">
</div>
<div id="logo">
<svg width="100%" height="100%" viewBox="0 0 187 174" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:1.41421;">
<defs>
<g id="hSvg">
<path d="M74.624,173.782l111.609,-55.886l-24.82,-12.41l-24.82,12.41l-24.82,-12.41l24.82,-12.41l-24.82,-12.41l-111.773,55.804l24.984,12.492l61.969,-31.066l24.82,12.41l-61.969,31.066" style="fill:#fff;"/>
</g>
<mask id="mhSvg" x="0" y="0" width="100%" height="100%">
<g id="hSvg">
<path d="M74.624,173.782l111.609,-55.886l-24.82,-12.41l-24.82,12.41l-24.82,-12.41l24.82,-12.41l-24.82,-12.41l-111.773,55.804l24.984,12.492l61.969,-31.066l24.82,12.41l-61.969,31.066" style="fill:#fff;"/>
</g>
</mask>
<g id="aSvg">
<path d="M0.082,0l74.542,37.271l0,136.511l-24.82,-12.41l0,-62.05l-24.902,-12.451l0,62.05l-24.82,-12.41l0,-136.511Zm24.902,62.091l0,-24.82l24.82,12.41l0,24.821l-24.82,-12.411Z"/>
</g>
</defs>
<g>
<use xlink:href="#hSvg" x="0" y="0" />
<use xlink:href="#aSvg" x="0" y="0" />
</g>
</svg>
<div id="rect">
</div>
</div>
</section>
For now, as you can see, I fail to position the mask.
Do you know how I can position the mask ?
Or do you think of a better method to achieve the effect ?
Thank you in advance !
Edit:
Well, I found a solution with masks... but it won't be a good solution as it's not cross browsers.
$( document ).ready(function() {
$(".split-half").hover(function(){
var elem = $(this);
$(".split-half").each(function(){
$(this).removeClass('active');
setTimeout(function(){
elem.addClass('active');
}, 400);
});
});
});
/* line 3, ../sass/style.scss */
body *, *:after, *:before {
box-sizing: border-box;
}
html, body {
height: 100%;
margin:0;
padding: 0;
}
.split-half {
display: block;
width: 50%;
height: 100%;
position: absolute;
z-index: 1;
padding: 5%;
}
.split-half:nth-child(1) {
background: #fff;
left: 0;
}
.split-half:nth-child(1):after {
content: '';
width: 100%;
height: 0;
position: absolute;
top: 0;
left: 0;
background: #000;
transition: height .3s;
}
.split-half:nth-child(1).active:hover:after {
height: 100%;
z-index: -1;
}
.split-half:nth-child(1).active:hover ~ #logo #A {
background-position: 0% 0%;
}
.split-half:nth-child(2) {
background: #000;
right: 0;
}
.split-half:nth-child(2):after {
content: '';
width: 100%;
height: 0;
position: absolute;
bottom: 0;
left: 0;
background: #fff;
transition: height .3s;
}
.split-half:nth-child(2).active:hover:after {
height: 100%;
z-index: -1;
}
/* line 58, ../sass/style.scss */
.split-half:nth-child(2).active:hover + #logo #H {
background-position: 0% 100%;
}
#logo {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-38.5%, -50%);
z-index: 10;
}
#logo #H {
background-image: linear-gradient(to bottom, white 0%, white 50%, black 50%, black 100%);
background-position: 0% 0%;
background-size: 100% 200%;
height: 100%;
width: 100%;
transition: all .3s;
mask: url(#mhSvg);
position: absolute;
top: 0;
right: 0;
}
#logo #A {
background-image: linear-gradient(to bottom, white 0%, white 50%, black 50%, black 100%);
background-position: 0% 100%;
background-size: 100% 200%;
height: 100%;
width: 100%;
transition: all .3s;
mask: url(#maSvg);
position: absolute;
top: 0;
right: 0;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<section>
<div class="split-half"></div>
<div class="split-half">
</div>
<div id="logo">
<svg width="194" height="181" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:1.41421;">
<defs>
<g id="hSvg">
<path d="M74.624,173.782l111.609,-55.886l-24.82,-12.41l-24.82,12.41l-24.82,-12.41l24.82,-12.41l-24.82,-12.41l-111.773,55.804l24.984,12.492l61.969,-31.066l24.82,12.41l-61.969,31.066" style="fill:#fff;"/>
</g>
<mask id="mhSvg" x="0" y="0" width="120" height="114">
<g id="hSvg">
<path d="M74.624,173.782l111.609,-55.886l-24.82,-12.41l-24.82,12.41l-24.82,-12.41l24.82,-12.41l-24.82,-12.41l-111.773,55.804l24.984,12.492l61.969,-31.066l24.82,12.41l-61.969,31.066" style="fill:#fff;"/>
</g>
</mask>
<mask id="maSvg" x="0" y="0" width="120" height="114">
<g id="aSvg">
<path d="M0.082,0l74.542,37.271l0,136.511l-24.82,-12.41l0,-62.05l-24.902,-12.451l0,62.05l-24.82,-12.41l0,-136.511Zm24.902,62.091l0,-24.82l24.82,12.41l0,24.821l-24.82,-12.411Z" style="fill:#fff"/>
</g>
</mask>
</defs>
<g>
</svg>
<div id="H">
</div>
<div id="A">
</div>
</div>
</section>
I may have to dig at the suggestion made by #RobertLongson that is to say animate the stops of a linear-gradient.
Edit 2:
I tried animating the linear-gradient position, thanks to kute.js.
It works in firefox, chrome, but not in IE/Edge or on the website, they do have an exemple working on IE/Edge.
Here is my pen, I'm still wondering why it doesn't work.
https://codepen.io/AmauryH/pen/brBgKo

Answer 1

Here's one way to do it. I'm using an animated CSS linear-gradient for the split-half <div> elements. And using mix-blend-mode: difference to ensure the logo contrasts with the animated background.
This should work on all browsers except IE/Edge.
body *, *:after, *:before {
box-sizing: border-box;
margin:0;
padding:0;
}
html, body {
height: 100%;
}
.split-half {
display: block;
width: 50%;
height: 100%;
position: absolute;
z-index: 1;
padding: 5%;
}
.split-half:nth-child(1) {
background: linear-gradient(to top, #ffffff 50%,#000000 50%);
background-size: 100% 200%;
background-position: 0 100%;
left: 0;
transition: background-position 0.5s;
}
.split-half:nth-child(1):hover {
background-position: 0 0;
}
.split-half:nth-child(2) {
background: linear-gradient(to top, #ffffff 50%,#000000 50%);
background-size: 100% 200%;
right: 0;
transition: background-position 0.5s;
}
.split-half:nth-child(2):hover {
background-position: 0 100%;
}
#logo {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-39.8%, -50%);
max-width: 420px;
min-width: 120px;
width: 10%;
height: auto;
z-index: 10;
mix-blend-mode: difference;
}
<section>
<div class="split-half"></div>
<div class="split-half"></div>
<div id="logo">
<svg width="100%" height="100%" viewBox="0 0 187 174" style="fill-rule:evenodd;">
<defs>
<linearGradient x1="0" y1="100%" x2="0" y2="0">
<stop offset="0" stop-color="white"/>
<stop offset="0" stop-color="black"/>
</linearGradient>
</defs>
<g>
<path id="hSvg" d="M74.624,173.782l111.609,-55.886l-24.82,-12.41l-24.82,12.41l-24.82,-12.41l24.82,-12.41l-24.82,-12.41l-111.773,55.804l24.984,12.492l61.969,-31.066l24.82,12.41l-61.969,31.066" style="fill:#fff;"/>
<path id="aSvg" d="M0.082,0l74.542,37.271l0,136.511l-24.82,-12.41l0,-62.05l-24.902,-12.451l0,62.05l-24.82,-12.41l0,-136.511Zm24.902,62.091l0,-24.82l24.82,12.41l0,24.821l-24.82,-12.411Z" style="fill:#fff;"/>
</g>
</svg>
</div>
</section>

Answer 2

I've finally decided to start from a blank page and went for a different approach.
A container with a linear-gradient background (half white/half black) and the logo as a svg background-image
Two more containers inside with height 0. One with a black background, the other with a white background
In each a fullscreen span with the logo as a background image. (one logo full black, the other full white)
Then, I just have to animate the height of the containers from 0 to 100% to get the transition I wanted.
To get the white background to fill the screen from bottom to top, I had to use a simple trick... I've rotated the container with the background from a 180deg angle, and I've rotated it's children with the same angle.
Here is a snippet:
var vHeight = $(window).height();
var vWidth = $(window).width();
var screen1 = $('#screen1');
var currentMousePos = { x: -1, y: -1 };
$(document).mousemove(function(event) {
currentMousePos.x = event.pageX;
currentMousePos.y = event.pageY;
if ( currentMousePos.y <= vHeight ){
if ( currentMousePos.x >= ((vWidth / 2) + (vWidth / 10)) ) {
$('.svgb-wrapper').css('height', '0');
$('.svgw-wrapper').css('height', '100%');
}
else if ( currentMousePos.x <= ((vWidth / 2) - (vWidth / 10)) ) {
$('.svgb-wrapper').css('height', '100%');
$('.svgw-wrapper').css('height', '0');
}
else {
$('.svgb-wrapper').css('height', '0');
$('.svgw-wrapper').css('height', '0');
}
};
});
* {
margin:0; padding:0; border:0;
}
body *, *:after, *:before {
box-sizing: border-box;
}
html, body {
height: 100%;
background: #000;
color: #fff;
}
#screen1 {
height: 100%;
background: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDAlIiB2aWV3Qm94PSIwIDAgMTg3IDE3NCIgdmVyc2lvbj0iMS4xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW\a 5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB4bWw6c3BhY2U9InByZXNlcnZlIiBzdHlsZT0iZmlsbC1ydWxlOmV2ZW5vZGQ7Y2xpcC1ydWxlOmV2ZW5vZGQ7c3Ryb2tlLWxpbmVqb2lu\aOnJvdW5kO3N0cm9rZS1taXRlcmxpbWl0OjEuNDE0MjE7Ij48cmVjdCBpZD0iUGxhbi1kZS10cmF2YWlsMSIgeD0iMCIgeT0iMCIgd2lkdGg9IjE4Ni4zNjgiIGhlaWdodD0iMTczLjc4MiIgc3R5bG\aU9ImZpbGw6bm9uZTsiLz48Y2xpcFBhdGggaWQ9Il9jbGlwMSI+PHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjE4Ni4zNjgiIGhlaWdodD0iMTczLjc4MiIvPjwvY2xpcFBhdGg+PGcgY2xpcC1wYXRo\aPSJ1cmwoI19jbGlwMSkiPjxwYXRoIGlkPSJoU3ZnIiBkPSJNNzQuNjI0LDE3My43ODJsMTExLjYwOSwtNTUuODg2bC0yNC44MiwtMTIuNDFsLTI0LjgyLDEyLjQxbC0yNC44MiwtMTIuNDFsMjQuOD\aIsLTEyLjQxbC0yNC44MiwtMTIuNDFsLTExMS43NzMsNTUuODA0bDI0Ljk4NCwxMi40OTJsNjEuOTY5LC0zMS4wNjZsMjQuODIsMTIuNDFsLTYxLjk2OSwzMS4wNjYiIHN0eWxlPSJmaWxsOiNmZmY7\aIi8+PHBhdGggaWQ9ImFTdmciIGQ9Ik0wLjA4MiwwbDc0LjU0MiwzNy4yNzFsMCwxMzYuNTExbC0yNC44MiwtMTIuNDFsMCwtNjIuMDVsLTI0LjkwMiwtMTIuNDUxbDAsNjIuMDVsLTI0LjgyLC0xMi\a 40MWwwLC0xMzYuNTExbDAsMFptMjQuOTAyLDYyLjA5MWwwLC0yNC44MmwyNC44MiwxMi40MWwwLDI0LjgyMWwtMjQuODIsLTEyLjQxMWwwLDBaIi8+PC9nPjwvc3ZnPg==") no-repeat left 55% center, linear-gradient(to right, #ffffff 0%, #ffffff 50%, #000000 50%, #000000 100%);
background-size: 33%, cover;
}
#screen1 .svgw-wrapper {
height: 0;
width: 100%;
overflow: hidden;
position: absolute;
top: 0;
-moz-transition: all 0.6s;
-o-transition: all 0.6s;
-webkit-transition: all 0.6s;
transition: all 0.6s;
background: #000;
}
#screen1 .svgw-wrapper .svgw {
position: absolute;
top: 0;
display: block;
height: 100vh;
width: 100%;
background: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8+PCF\a ET0NUWVBFIHN2ZyBQVUJMSUMgIi0vL1czQy8vRFREIFNWRyAxLjEvL0VOIiAiaHR0cDovL3d3dy\a 53My5vcmcvR3JhcGhpY3MvU1ZHLzEuMS9EVEQvc3ZnMTEuZHRkIj48c3ZnIHdpZHRoPSIxMDAlI\aiBoZWlnaHQ9IjEwMCUiIHZpZXdCb3g9IjAgMCAxODcgMTc0IiB2ZXJzaW9uPSIxLjEiIHhtbG5z\aPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzM\aub3JnLzE5OTkveGxpbmsiIHhtbDpzcGFjZT0icHJlc2VydmUiIHN0eWxlPSJmaWxsLXJ1bGU6ZX\aZlbm9kZDtjbGlwLXJ1bGU6ZXZlbm9kZDtzdHJva2UtbGluZWpvaW46cm91bmQ7c3Ryb2tlLW1pd\aGVybGltaXQ6MS40MTQyMTsiPjxyZWN0IGlkPSJQbGFuLWRlLXRyYXZhaWwxIiB4PSIwIiB5PSIw\aIiB3aWR0aD0iMTg2LjM2OCIgaGVpZ2h0PSIxNzMuNzgyIiBzdHlsZT0iZmlsbDpub25lOyIvPjx\ajbGlwUGF0aCBpZD0iX2NsaXAxIj48cmVjdCB4PSIwIiB5PSIwIiB3aWR0aD0iMTg2LjM2OCIgaG\aVpZ2h0PSIxNzMuNzgyIi8+PC9jbGlwUGF0aD48ZyBjbGlwLXBhdGg9InVybCgjX2NsaXAxKSI+P\aHBhdGggaWQ9ImhTdmciIGQ9Ik03NC42MjQsMTczLjc4MmwxMTEuNjA5LC01NS44ODZsLTI0Ljgy\aLC0xMi40MWwtMjQuODIsMTIuNDFsLTI0LjgyLC0xMi40MWwyNC44MiwtMTIuNDFsLTI0LjgyLC0\axMi40MWwtMTExLjc3Myw1NS44MDRsMjQuOTg0LDEyLjQ5Mmw2MS45NjksLTMxLjA2NmwyNC44Mi\awxMi40MWwtNjEuOTY5LDMxLjA2NiIgc3R5bGU9ImZpbGw6I2ZmZjsiLz48cGF0aCBpZD0iYVN2Z\ayIgZD0iTTAuMDgyLDBsNzQuNTQyLDM3LjI3MWwwLDEzNi41MTFsLTI0LjgyLC0xMi40MWwwLC02\aMi4wNWwtMjQuOTAyLC0xMi40NTFsMCw2Mi4wNWwtMjQuODIsLTEyLjQxbDAsLTEzNi41MTFsMCw\awWm0yNC45MDIsNjIuMDkxbDAsLTI0LjgybDI0LjgyLDEyLjQxbDAsMjQuODIxbC0yNC44MiwtMT\aIuNDExbDAsMFoiIHN0eWxlPSJmaWxsOiNmZmY7Ii8+PC9nPjwvc3ZnPg==") no-repeat left 55% center;
background-size: 33%;
}
#screen1 .svgb-wrapper {
height: 0;
width: 100%;
overflow: hidden;
position: absolute;
bottom: 0;
background: #fff;
-moz-transition: all 0.6s;
-o-transition: all 0.6s;
-webkit-transition: all 0.6s;
transition: all 0.6s;
-moz-transform: rotateX(180deg);
-ms-transform: rotateX(180deg);
-webkit-transform: rotateX(180deg);
transform: rotateX(180deg);
}
#screen1 .svgb-wrapper .svgb {
position: absolute;
top: 0;
display: block;
height: 100vh;
width: 100%;
background: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDAlIiB2aWV3Qm94PSIwIDAgMTg3IDE3NCIgdmV\ayc2lvbj0iMS4xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW\a 5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB4bWw6c3BhY2U9InByZXNlcnZlIiBzd\aHlsZT0iZmlsbC1ydWxlOmV2ZW5vZGQ7Y2xpcC1ydWxlOmV2ZW5vZGQ7c3Ryb2tlLWxpbmVqb2lu\aOnJvdW5kO3N0cm9rZS1taXRlcmxpbWl0OjEuNDE0MjE7Ij48cmVjdCBpZD0iUGxhbi1kZS10cmF\a 2YWlsMSIgeD0iMCIgeT0iMCIgd2lkdGg9IjE4Ni4zNjgiIGhlaWdodD0iMTczLjc4MiIgc3R5bG\aU9ImZpbGw6bm9uZTsiLz48Y2xpcFBhdGggaWQ9Il9jbGlwMSI+PHJlY3QgeD0iMCIgeT0iMCIgd\a 2lkdGg9IjE4Ni4zNjgiIGhlaWdodD0iMTczLjc4MiIvPjwvY2xpcFBhdGg+PGcgY2xpcC1wYXRo\aPSJ1cmwoI19jbGlwMSkiPjxwYXRoIGlkPSJoU3ZnIiBkPSJNNzQuNjI0LDE3My43ODJsMTExLjY\awOSwtNTUuODg2bC0yNC44MiwtMTIuNDFsLTI0LjgyLDEyLjQxbC0yNC44MiwtMTIuNDFsMjQuOD\aIsLTEyLjQxbC0yNC44MiwtMTIuNDFsLTExMS43NzMsNTUuODA0bDI0Ljk4NCwxMi40OTJsNjEuO\aTY5LC0zMS4wNjZsMjQuODIsMTIuNDFsLTYxLjk2OSwzMS4wNjYiLz48cGF0aCBpZD0iYVN2ZyIg\aZD0iTTAuMDgyLDBsNzQuNTQyLDM3LjI3MWwwLDEzNi41MTFsLTI0LjgyLC0xMi40MWwwLC02Mi4\awNWwtMjQuOTAyLC0xMi40NTFsMCw2Mi4wNWwtMjQuODIsLTEyLjQxbDAsLTEzNi41MTFsMCwwWm\a 0yNC45MDIsNjIuMDkxbDAsLTI0LjgybDI0LjgyLDEyLjQxbDAsMjQuODIxbC0yNC44MiwtMTIuN\a DExbDAsMFoiLz48L2c+PC9zdmc+") no-repeat left 55% center;
background-size: 33%;
-moz-transform: rotateX(180deg);
-ms-transform: rotateX(180deg);
-webkit-transform: rotateX(180deg);
transform: rotateX(180deg);
}
#screen2 {
-moz-transition: all 0.6s;
-o-transition: all 0.6s;
-webkit-transition: all 0.6s;
transition: all 0.6s;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/zepto/1.2.0/zepto.min.js"></script>
<section id="screen1">
<div class="svgw-wrapper">
<span class="svgw"></span>
</div>
<div class="svgb-wrapper">
<span class="svgb"></span>
</div>
</section>
It's a cross browser solution.
The only problem is the background-position and the background-size that are not working as expected in IE, but I'll probably live with that !