Inline SVG css animation not working on Safari - javascript

I'm using the latest version of these:
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-
DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous">
</script>
<script src="https://cdn.jsdelivr.net/npm/popper.js#1.16.1/dist/umd/popper.min.js"
integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN"
crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#4.6.0/dist/js/bootstrap.min.js"
integrity="sha384-+YQ4JLhjyBLPDQt//I+STsc9iw4uQqACwlvpslubQzn4u2UU2UFM80nGisd026JF"
crossorigin="anonymous"></script>
This is the CSS I am using to achieve the desired CSS animation effects across literally all browsers except Safari.
.tt-divider {
border-style: outset;
border-color: LawnGreen;
border-radius: 3px;
margin-bottom: 2.5vh;
margin-top: 2.5vh;
background: gold;
border-width: 2px;
animation: grow-divider 2s forwards linear;
margin: auto;
}
#-webkit-keyframes grow-divider{
from {width:0%; }
to {width:100%; }
}
#keyframes grow-divider{
from {width:0%; }
to {width:100%; }
}
#landing-logo {
display: inline-block;
max-width: 350px;
min-width: 150px;
width: 50vw;
margin-top: 5vh;
margin-bottom: 1vh;
}
#navigation{
padding-left: 7.5vh;
padding-right: 7.5vh;
text-align:center;
}
#btm-right-nav{
max-width: 55px;
position: fixed;
right: 25px;
bottom: 10px;
}
.btm-right-ico {
display: block;
color: lawngreen;
margin:auto;
margin-bottom: 5vh;
font-size: 16px;
text-rendering: optimizeLegibility;
}
.fontawesome-i2svg-active .btm-right-ico {
animation-name: grow-buttons;
animation-duration: 2s;
animation-timing-function: linear;
animation-play-state: running;
animation-fill-mode: forwards;
animation-iteration-count: 1;
animation-direction: normal;
}
#-webkit-keyframes grow-buttons{
from {font-size:16px; }
to {font-size: 45px; }
}
#keyframes grow-buttons{
from {font-size:16px}
to {font-size:45px;}
}
The grow-divider animation works perfectly, and another irrelevant one works perfectly as well on a different page. The only one I cannot get to work only on Safari is the grow-buttons animation. Yes Safari in general I've back-tested every version made in the past 5 years it does exactly the same thing..
Initially I thought it was a CSS naming problem... no I've tried multiple implementations of CSS for compatibility to no avail. I then thought it was just Safari, it could be, but why are my other CSS animations working then? I even put my CSS on the newly generated element via JS and it doesn't work. I even used async programming in JQuery to make sure the CSS wasn't applied before the <i> was changed to <svg>
It's worth mentioning that the CSS classes on the original <i> element are injected into the new <svg> from font-awesome... so the CSS animation is inherited.. this logic works on all browsers except Safari...
I have absolutely no idea what is causing it, anyway here's the html for the entire page:
<!--Display none is changed to block when the page is done loading-->
<div id="landing" style="display:none">
<div id="navigation">
<img id="landing-logo" src="example.gif" alt="example">
<div class="tt-divider"></div>
<div id="page">
</div>
<div id="btm-right-nav">
<i class="fas fa-bars btm-right-ico" data-fa-mask="fas fa-circle" data-fa-
transform="shrink-7"></i>
<i class="fas fa-phone btm-right-ico" data-fa-mask="fas fa-circle" data-fa-
transform="shrink-7"></i>
</div>
</div>
</div>
I think I could get it to work if I just yanked my own svg and put it neatly in an <img> and didn't do some masking magic on my buttons.. I don't want to do that because that'll cut off a ton of features of fontawesome and take more time... so in the meantime I have the animation turned off for Safari users and it's sad because I want this animation it's incredibly satisfying and I really don't want to have to bake my own masked SVGs and put them in a <img> just so I can run CSS animations over SVGs... I mean.. is that what I have to do?
Can I inject inline SVG into a src?
Here's the baked SVG data from fontawesome after the page loads (I took out the data:)
<div id="btm-right-nav">
<svg class="svg-inline--fa fa-bars fa-w-16 btm-right-ico" data-
fa-mask="fas fa-circle" data-fa-transform="shrink-7" aria-
hidden="true" focusable="false" data-prefix="fas" data-icon="bars"
role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"
data-fa-i2svg=""><defs><clipPath id="clip-hzzHNtGIZRrn"><path
fill="currentColor" d=""></path></clipPath><mask x="0" y="0"
width="100%" height="100%" id="mask-jyjnVEKbKq5c"
maskUnits="userSpaceOnUse" maskContentUnits="userSpaceOnUse"><rect
x="0"
y="0" width="100%" height="100%" fill="white"></rect><g
transform="translate(256 256)"><g transform="translate(0, 0)
scale(0.5625, 0.5625) rotate(0 0 0)"><path fill="black" d=""
transform="translate(-224 -256)"></path></g></g></mask></defs><rect
fill="currentColor" clip-path="url(#clip-hzzHNtGIZRrn)"
mask="url(#mask-
jyjnVEKbKq5c)" x="0" y="0" width="100%" height="100%"></rect></svg>
<!--<i class="fas fa-bars btm-right-ico" data-fa-mask="fas fa-
circle"
data-
fa-transform="shrink-7"></i> Font Awesome fontawesome.com -->
<svg class="svg-inline--fa fa-phone fa-w-16 btm-right-ico" data-
fa-mask="fas fa-circle" data-fa-transform="shrink-7" aria-hidden="true"
focusable="false" data-prefix="fas" data-icon="phone" role="img"
xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" data-fa-
i2svg=""><defs><clipPath id="clip-YDDPIJZX3DpE"><path
fill="currentColor" d=""></path></clipPath><mask x="0" y="0"
width="100%" height="100%" id="mask-eJs29EAdXlZv"
maskUnits="userSpaceOnUse" maskContentUnits="userSpaceOnUse"><rect
x="0" y="0" width="100%" height="100%" fill="white"></rect><g
transform="translate(256 256)"><g transform="translate(0, 0)
scale(0.5625, 0.5625) rotate(0 0 0)"><path fill="black" d=""
transform="translate(-256 -256)"></path></g></g></mask></defs><rect
fill="currentColor" clip-path="url(#clip-YDDPIJZX3DpE)"
mask="url(#mask-
eJs29EAdXlZv)" x="0" y="0" width="100%" height="100%">
</rect></svg>
<!--<i class="fas fa-phone btm-right-ico" data-fa-
mask="fas
fa-circle" data-fa-transform="shrink-7"></i> Font Awesome
fontawesome.com-->
</div>

Wow..... really hope this helps someone...
To fix the problem you use regular old css to transform scale it in the animation.
Font-size can be used to scale up inline SVGs on all browsers except Safari
#-webkit-keyframes grow-buttons{
from { -webkit-transform: scale(1); transform: scale(1);}
to { -webkit-transform: scale(3); transform: scale(3);}
}
#keyframes grow-buttons{
from { -webkit-transform: scale(1); transform: scale(1);}
to { -webkit-transform: scale(3); transform: scale(3);}
}
Bottom line:
Use transform: scale() instead of font-size: ()px on SVG CSS animations to maximize compatibility.

Related

IE & Firefox rendering incorrectly but not in Chrome, Safari & Chromium browsers

All,
There is a double walled circle and a text. Ideally the text should be rendered within the circle but in IE & Firefox , the circle is coming down and the text on the top. The issue can be seen using the below code.
Any help or advice on how to get it fixed in IE & firefox is much appreciated.
<div class="col-xs-4 col-sm-2">
<div style="margin-top: 20px; position: relative; display: inline-block; max-width: 116px; max-height: 116px;">
<svg width="100%" height="100%" viewBox="0 0 418 418" tabindex="-1">
<g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g transform="translate(-31.000000, -31.000000)" stroke="#9B9B9B" stroke-width="2" fill="#FFFFFF">
<g transform="translate(32, 32)">
<path d="M208,416 C322.875228,416 416,322.875228 416,208 C416,93.124772 322.875228,0 208,0 C93.124772,0 -9.09494702e-13,93.124772 -9.09494702e-13,208 C-9.09494702e-13,322.875228 93.124772,416 208,416 Z"></path>
<path d="M208,398.666667 C313.302292,398.666667 398.666667,313.302292 398.666667,208 C398.666667,102.697708 313.302292,17.3333333 208,17.3333333 C102.697708,17.3333333 17.3333333,102.697708 17.3333333,208 C17.3333333,313.302292 102.697708,398.666667 208,398.666667 Z"></path>
</g></g></g>
</svg>
<span style="font-size: 24px; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);">400</span>
</div>
</div>
The styling you have added to the divs pushes the number outside of the SVG.
I would just avoid the problem in the first place by using an SVG <text> element that you can position inside the svg.
You might have to fiddle with the x and y values a bit.
ps: There's also a <circle> element you could use instead of a <path>.
<svg width="100%" height="100%" viewBox="0 0 418 418" tabindex="-1">
<g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g transform="translate(-31.000000, -31.000000)" stroke="#9B9B9B" stroke-width="2" fill="#FFFFFF">
<g transform="translate(32, 32)">
<path d="M208,416 C322.875228,416 416,322.875228 416,208 C416,93.124772 322.875228,0 208,0 C93.124772,0 -9.09494702e-13,93.124772 -9.09494702e-13,208 C-9.09494702e-13,322.875228 93.124772,416 208,416 Z"></path>
<path d="M208,398.666667 C313.302292,398.666667 398.666667,313.302292 398.666667,208 C398.666667,102.697708 313.302292,17.3333333 208,17.3333333 C102.697708,17.3333333 17.3333333,102.697708 17.3333333,208 C17.3333333,313.302292 102.697708,398.666667 208,398.666667 Z"></path>
</g>
</g>
</g>
<text x="47%" y="49%" style="font-size: 32px;">400</text>
</svg>
I don't know what are your constraints, but to render these circles in particular I'd play with border-radius: 50% and display: flex:
.circle {
border: 2px solid #888;
border-radius: 50%; /* make the border a circle */
display: flex; /* align the content vertically and horizontally */
align-items: center; /* same */
justify-content: space-around; /* same */
}
<div class="circle" style="width: 100px; height: 100px;">
<div class="circle" style="width: 90px; height: 90px;">
400
</div>
</div>

WordPress - Onclick functions not working in <a> tag

I am creating a sliding sidebar menu for my WordPress site using only HTML/CSS/JavaScript. This is from a tutorial from YouTube and followed everything exactly. The issue is that when I click on the buttons, the error reads "Uncaught ReferenceError: openSlideMenu is not defined
at HTMLAnchorElement.onclick". I get the same error for the other button. See code below.
HTML (blog.php)
<nav class="navbar">
<div class="side-menu">
<span class="open-slide">
<a href="#" onclick="openSlideMenu()">
<svg width="30" height="30">
<path d="M0,5 30,5" stroke="#000" stroke-width="5" />
<path d="M0,14 30,14" stroke="#000" stroke-width="5" />
<path d="M0,23 30,23" stroke="#000" stroke-width="5" />
</svg>
</a>
</span>
</div>
</nav>
<div id="side-menu" class="side-nav">
×
<?php get_sidebar() ?>
</div>
<script type="text/javascript">
jQuery(document).ready(function(){
function openSlideMenu() {
document.getElementById('side-menu').style.width = '250px';
}
function closeSlideMenu() {
document.getElementById('side-menu').style.width = '0';
}
});
</script>
CSS
.side-nav {
height: 100%;
width: 0;
position: fixed;
z-index: 1;
top:0;
left:0;
background-color: #111;
opacity: 0.9;
overflow-x: hidden;
padding-top: 60px;
transition: 0.5s;
}
.side-nav a {
padding: 10px 10px 10px 30px;
text-decoration: none;
font-size:22px;
color: #ccc;
display: block;
transition: 0.3s;
}
.side-nav a:hover {
color: #fff;
}
.side-nav .btn-close {
position: absolute;
top: 0;
right: 22px;
font-size: 36px;
margin-left: 50px;
}
The tutorial seemed easy and simple, it should have worked without issues. I wonder could it be something WordPress related? I did all I could.
Since you are using jQuery, why don't you utilize it completely?
For more information on what could be the issue, I suggest you take a look at MarsAndBlack's comment
Meanwhile, I made some changes to your code to make use of jQuery fully.
Here I have added ids to both buttons. (Not necessary, but used for easy detection).
<nav class="navbar">
<div class="side-menu">
<span class="open-slide">
<a href="#" id="openmenu">
<svg width="30" height="30">
<path d="M0,5 30,5" stroke="#000" stroke-width="5" />
<path d="M0,14 30,14" stroke="#000" stroke-width="5" />
<path d="M0,23 30,23" stroke="#000" stroke-width="5" />
</svg>
</a>
</span>
</div>
</nav>
<div id="side-menu" class="side-nav">
×
</div>
Also changed JS to use jQuery for click function instead of vanilla JS,
jQuery(document).ready(function(){
jQuery('#openmenu').click(function() {
jQuery('#side-menu').css('width','250px');
});
jQuery('#closemenu').click(function() {
jQuery('#side-menu').css('width','0px');
});
});
Here is a working example

How to make a label that expands when hovering?

How can I make a label that has the name of the section "expand" from an SVG in a navbar when hovering with the cursor. To make things more clear:
here's a sketch of the wanted effect
/*this class is inside the <polyline> tag*/
.hover {
opacity: 0.5 !important;
}
.hover:hover {
opacity: 1 !important;
}
svg {
width: 50%;
float: right;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script src="jquery.scrollTo.js" type="text/javascript"></script>
<script src="jquery.localScroll-1.4.0/jquery.localScroll.js" type="text/javascript"></script>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
<div id="container">
<div id="firstPage">
<div id="navbar">
<!--these are the SVGs wrapped into an <a> tag-->
<a href="#firstPage" id="a">
<?xml version="1.0" encoding="utf-8"?>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" id="Livello_1" x="0px" y="0px" viewBox="0 0 118.7 103.3" xml:space="preserve" enable-background="new 0 0 118.7 103.3">
<style type="text/css">
.st0 {
fill: #FF3333;
}
</style>
<polyline class="st0 hover" points="59.3 34.4 59.5 34.4 0.3 0 0.3 68.4 0.2 68.4 59.4 103.4 59.4 103.4 118.5 68.4 118.3 68.4 118.3 0 59.2 34.4 " />
</svg>
</a>
</div>
</div>
</div>
This is my code
Any help would be great!
You can achieve this with CSS transitions. See my code:
CSS:
#container{
width:180px;
margin:0 auto;
text-align:center;
}
svg {
width: 50%;
}
a{
text-decoration:none;
}
label{
position:relative;
left:-70px;
top:-30px;
color:#fff;
text-transform:uppercase;
background:red;
transition: all 1s ease;
z-index:-1;
}
svg:hover ~ label{
left: -200px;
transition: all 1s ease;
}
As an addition, make sure you add the -webkit-, -moz-, and -o- prefixes to the transitions to make sure it is crossbrowser.
See the DEMO for your solution

Rotate a SVG hamburger icon into an X?

I've designed a 3-bar icon using pure SVG code in HTML. I'm using CSS3 transforms to rotate the top & bottom bars into an X shape. The problem is that they rotate around their own center, but I need them rotating around the icon's center. To get around this I've adjusted their X/Y coordinates.
This causes a LOT of buggy issues with Internet Explorer, Firefox, & Safari. Chrome seems to be alright but obviously I'd like to code this the "right" way so it'll work in all browsers.
Here's my live CodePen
HTML
<svg id="burgericon" xmlns="http://www.w3.org/2000/svg" width="90" height="80">
<g class="icon">
<rect class="frstbar" x="10" y="10" width="70" height="12" rx="7" ry="7" fill="#414141"/>
<rect class="scndbar" x="10" y="35" width="70" height="12" rx="7" ry="7" fill="#414141"/>
<rect class="thrdbar" x="10" y="60" width="70" height="12" rx="7" ry="7" fill="#414141"/>
</g>
</svg>
CSS
.hamburger { display:block; text-align:center; }
svg { cursor:pointer; }
.frstbar, .scndbar, .thrdbar {
-webkit-transition: all 0.35s linear;
-moz-transition: all 0.35s linear;
-o-transition: all 0.35s linear;
transition: all 0.35s linear;
}
#burgericon.open .frstbar {
-webkit-transform: rotate(45deg);
-ms-transform: rotate(45deg);
transform: rotate(45deg);
}
#burgericon.open .thrdbar {
-webkit-transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
transform: rotate(-45deg);
}
#burgericon.open .scndbar { width: 0; opacity: 0; }
JS
$('#burgericon').on('click', function(e) {
if($(this).attr('class') != "open") {
$(this).attr('class','open');
$('.frstbar').attr('x','25').attr('y','-5');
$('.thrdbar').attr('x','-35').attr('y','55');
}
else {
$(this).attr('class','default');
$('.frstbar').attr('x','10').attr('y','10');
$('.thrdbar').attr('x','10').attr('y','60');
}
});
I also think changing the X/Y coords is causing a blurry effect. I've added a screenshot below. First you'll see the completed X icon and then you'll see how it looks when animated back to default.
The bars aren't perfectly straight but instead they look crooked for some reason.
Screenshot here
I'm still new to SVG manipulation so I'm not sure how to properly rotate <rect> elements with CSS3/JS. Any help or tips in the right direction would be more than appreciated.
You can remove the JS positioning by using the CSS transform-origin property. You can set it on the left of the first and second bars with transform-origin: 0 50%;.
This way they will cross each other when they are rotated :
document.getElementById('burgericon').addEventListener('click', function (e) {
this.classList.toggle('open');
});
.hamburger {
display: block;
text-align: center;
}
svg {
cursor: pointer;
}
.frstbar,.scndbar,.thrdbar {
transition: all 0.35s linear;
transform: rotate(0deg);
transform-origin: 0% 50%;
}
#burgericon.open .frstbar {
transform: rotate(45deg);
}
#burgericon.open .thrdbar {
transform: rotate(-45deg);
}
#burgericon.open .scndbar {
width: 0;
opacity: 0;
}
<nav class="hamburger">
<svg id="burgericon" xmlns="http://www.w3.org/2000/svg" width="90" height="80">
<g class="icon">
<rect class="frstbar" x="10" y="10" width="70" height="12" rx="7" ry="7" fill="#414141" />
<rect class="scndbar" x="10" y="35" width="70" height="12" rx="7" ry="7" fill="#414141" />
<rect class="thrdbar" x="10" y="60" width="70" height="12" rx="7" ry="7" fill="#414141" />
</g>
</svg>
</nav>
<div>
</div>
Credits to David Thomas for the JS
Note that the transform-origin property needs the same vendor prefixes as the transform property. I have omited them for both in the above snippet
CSS
Using css transform: rotate() I rotated the elements so they form the X
Using css opacity and transitions; made the object gradually go transparent.
.icon {
stroke: none;
fill: #777;
}
.icon .frstbar {
transform-origin: 10% 50%;
transition: transform 1s;
}
.icon:hover .frstbar {
transform: rotate(45deg);
}
.icon .thrdbar {
transform-origin: 10% 50%;
transition: transform 1s;
}
.icon:hover .thrdbar {
transform: rotate(-45deg);
}
.scndbar {
opacity: 1;
transition: opacity 1s;
}
.icon:hover .scndbar {
opacity: 0;
}
<svg id="burgericon" xmlns="http://www.w3.org/2000/svg" width="90" height="90" viewBox="0 0 100 100">
<g class="icon">
<rect class="frstbar" x="10" y="10" width="90" height="12" rx="7" ry="7" />
<rect class="scndbar" x="10" y="35" width="90" height="12" rx="7" ry="7" />
<rect class="thrdbar" x="10" y="60" width="90" height="12" rx="7" ry="7" />
</g>
</svg>

How to mask two half images and on hover show a full image with an nice animation

I doesn’t know how to do the following with jQuery.
I have created a page hero with two sections (red/black):
What I want is, when hovering over the black one for example, it will expand over the red section, so you get a full black box. The same result I want of course for the red section:
How should I make this work?
var redSection = $('#red');
var blackSection = $('#black');
redSection.on('mouseover', function() {
// Do something - overlay the other section
});
The HTML markup is as follow:
<section id="hero">
<figure id="urbandesign">
<a href=“#" target="_blank">
<img src="images/urbandesign.jpg" alt="Urban Design">
</a>
</figure><!-- End figure -->
<figure id="photography">
<a href=“#" target="_blank">
<img src="images/photography.jpg" alt="Photography">
</a>
</figure><!-- End figure -->
</section><!-- End section#hero -->
And the CSS:
#hero {
height: 480px; /* Default 500px */
padding: 0;
position: relative;
overflow: hidden;
z-index: 1;
background: url(../images/hero.jpg) no-repeat center; /* remove */
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
#hero figure {
position: absolute;
top: 0;
background: #FFF;
}
#hero img {
width: 100%;
max-width: none;
position: relative;
opacity: 0.4;
}
The final result I want to replace the red and black section with images.
Look out to your response! Thank you.
A mix of CSS3 and jQuery with Graceful Degradation should sort this.
CSS
.page {
position:fixed;
width:100%;
height:100%;
overflow:hidden;
}
.black {
background:#000;
width:50%;
height:100%;
position:absolute;
width:100%;
left:-50%;
transform:skew(30deg,0);
transition:0.5s ease-in-out;
z-index:1;
}
.red {
background:#ff0000;
width:50%;
height:100%;
position:absolute;
width:100%;
right:-50%;
transform:skew(30deg,0);
transition:0.5s ease-in-out;
}
.red:hover {
transform:skew(0);
transform:translate(-50%,0);
}
.black:hover {
transform:skew(0);
transform:translate(50%,0);
}
.inactive {
z-index:-1
}
HTML
<div class="page">
<div class="black"></div>
<div class="red"></div>
</div>
jQuery
The jQuery is necessary to fix a z-index problem with the last element in the DOM tree that ruins the fluid animation.
$(document).ready(function(){
$('.black').hover(function(){
$('.red').addClass('inactive');
},function(){
$('.red').removeClass('inactive');
});
$('.red').hover(function(){
$('.black').addClass('inactive');
},function(){
$('.black').removeClass('inactive');
});
});
Be aware that adding any content to the two divs you will have to add an inner div and reset the skew with 'transform:skew(-30deg,0);'. The prefixed versions of transition and transform will also need adding.
JSFiddle Reference
You could do this using svg's path for the shape, pattern for the image and a little bit of JavaScript for handling the mouseover and mouseleave events.
var hero = document.getElementById('hero');
var animLeft = document.getElementById('anim-left');
var animRight = document.getElementById('anim-right');
hero.addEventListener('mouseover', function(e) {
(e.target.id == 'left') ? animRight.beginElement() : animLeft.beginElement();
})
hero.addEventListener('mouseleave', function(e) {
(e.target.id == 'left') ? animRight.endElement() : animLeft.endElement();
})
<svg id="hero" width="600" height="200" viewBox="0 0 600 200">
<defs>
<pattern id="image-left" patternUnits="userSpaceOnUse" width="600" height="200" viewBox="0 0 600 200">
<image xlink:href="http://dummyimage.com/600x200/40000c/000" width="600" height="200" />
</pattern>
<pattern id="image-right" patternUnits="userSpaceOnUse" width="600" height="200" viewBox="0 0 600 200">
<image xlink:href="http://dummyimage.com/600x200/002a33/fff" width="600" height="200" />
</pattern>
</defs>
<a xlink:href="#">
<path id="right" d="M0,0 h600 v200 h-600z" fill="url(#image-right)" />
</a>
<a xlink:href="#">
<path id="left" d="M0,0 h350 l-100,200 h-250z" fill="url(#image-left)" />
<animate id="anim-left" xlink:href="#left" attributeType="XML" attributeName="d" from="M0,0 h350 l-100,200 h-250z" to="M0,0 h0 l-100,200 h0z" dur="1" begin="indefinite" repeatCount="1" fill="freeze" />
<animate id="anim-right" xlink:href="#left" attributeType="XML" attributeName="d" from="M0,0 h350 l-100,200 h-250z" to="M0,0 h700 l-100,200 h-600z" dur="1" begin="indefinite" repeatCount="1" fill="freeze" />
</a>
</svg>
A simple CSS only solution with no additional re-paints, etc.:
.parent {
overflow: hidden;
position: absolute;
width: 90%;
height: 90%;
}
.item {
position: absolute;
top: 0px;
bottom: 0px;
left: 0px;
right: 0px;
transition: transform 1s, z-index 1s;
z-index: 1;
overflow: hidden;
}
.item .image {
transition: transform 1s;
}
.item:hover {
transform: translate3d(0px, 0px, 0px);
z-index: 100;
}
.item:hover .image {
transform: skewX(0deg);
}
.red {
background: #f00;
transform: translate3d(-50%, 0px, 0px) skewX(-10deg);
}
.red .image {
transform: skewX(10deg);
}
.black {
background: #000;
transform: translate3d(50%, 0px, 0px) skewX(-10deg);
}
.black img {
transform: skewX(10deg);
}
<section class="parent">
<div class="red item">
<img class="image" src="http://placehold.it/450/ff0000/000000" />
</div>
<div class="black item">
<img class="image" src="http://placehold.it/450/000000/ffffff" />
</div>
</section>

Categories

Resources