I have a classic mobile three-bars menu button made with SVG. I would like to animate each bar on click.
This is my code:
$('#menu_button').click(
function() {
$(this).toggleClass('open');
}
);
#menu_button .rectangle {
left: 0;
x: 0;
transition: all ease 1s;
}
#menu_button .rectangle.first {
transform: rotate(0deg);
top: 0;
y: 0;
}
#menu_button .rectangle.second {
transform: rotate(0deg);
transform-origin: 8px 9px;
top: 6px;
y: 6;
}
#menu_button .rectangle.third {
transform: rotate(0deg);
transform-origin: 11px 9px;
top: 12px;
y: 12;
}
#menu_button.open .rectangle.first {
top: 23.2px;
y: 23.2px;
}
#menu_button.open .rectangle.second {
transform: rotate(405deg);
}
#menu_button.open .rectangle.third {
transform: rotate(495deg);
left: 0;
x: 0;
top: 8px;
y: 8;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<svg width="22" height="35" id="menu_button" class="hidden-sm hidden-md hidden-lg">
<rect style="opacity:1; fill:#eb671f; fill-opacity:1;stroke:none;" class="rectangle first" width="22" height="2" x="0" y="0" />
<rect style="opacity:1; fill:#eb671f; fill-opacity:1;stroke:none;" class="rectangle second" width="22" height="2" x="0" y="6" />
<rect style="opacity:1; fill:#eb671f; fill-opacity:1;stroke:none;" class="rectangle third" width="22" height="2" x="0" y="12" />
</svg>
JSFiddle for those like me who can't run the snippet: https://jsfiddle.net/9rkoLcx8/2/
The issue is with Firefox.
I mean, everything is working fine on Chrome and Opera, this doesn't work on Safari (it has no animation but it's still ok as it doesn't break things up), and works half in firefox: it rotates correctly but doesn't animate the x and y of SVG rects.
This is what I think: x and y are rect attributes, not CSS properties, so not only they shouldn't work on Firefox, they shouldn't work on Chrome and Opera too. That's why I added top and left, but it still doesn't work.
Is there a way to make the animation of x and y work in Firefox too?
Related
Is someone able to explain a problem in Safari for this simple example:
codepen example
The logo-1 class element should animate into position from right to left. On mac it works in Firefox, Chrome and in IE11/win8 in the original bigger piece of code. In Safari during css animation the svg graphics disappears and appears only after animation is done. It only animates correctly if there is an extra dummy sibling to the svg element with a 3d transform applied to it. It needs to be on a lower z-index than the svg or the animation display fails. Ideally the svg element should be the only child of the logo-1 class element.
In the codepen example animation shows correctly for me in Safari only in the first main div that has the extra element under logo-1 element.
Any ideas?
Codepen code:
.logo-1 svg {
position: absolute;
top: 0;
left: 0;
}
.logo-1-sequence {
position: absolute;
top: 0;
left: 0;
display: block;
width: 113px;
height: 134px;
transform: scale3d(1, 1, 1) translate3d(0, 0, 0);
}
#keyframes kf-frame-1-logo-1-in {
0% {
transform: scale3d(0.47, 0.47, 1) translate3d(2078px, 20px, 0);
}
100% {
transform: scale3d(0.47, 0.47, 1) translate3d(1578px, 20px, 0);
}
}
.logo-1 {
position: absolute;
z-index: 2;
width: 93px;
height: 150px;
background-color: red;
animation: kf-frame-1-logo-1-in 0.5s 0.5s both linear 1;
}
.main {
background: green;
position: relative;
width: 900px;
height: 150px;
display: block;
overflow: hidden;
}
<div class="main">
<div class="logo-1">
<div class="logo-1-sequence"></div>
<svg class="logo-1-svg" xmlns="http://www.w3.org/2000/svg" width="93" height="150" viewBox="0 0 93 150">
<rect x="10" y="10" width="30" height="30" stroke="black" fill="transparent" stroke-width="5" />
</svg>
</div>
</div>
<div class="main">
<div class="logo-1">
<!-- <div class="logo-1-sequence"></div> -->
<svg class="logo-1-svg" xmlns="http://www.w3.org/2000/svg" width="93" height="150" viewBox="0 0 93 150">
<rect x="10" y="10" width="30" height="30" stroke="black" fill="transparent" stroke-width="5" />
</svg>
</div>
</div>
I'm trying to get this animation to work in my website. For some reason the layered paths show through so a thin white outline for the path (that's animated in) is visible ruining the animation, despite the fact the paths are identical in size. I wondered if anyone has any suggestions on how to prevent this?
I've made a jsFiddle and added the code below. If you change the background for the body to black it's even clearer.
Any help would be appreciate.
body {
background: #333;
padding: 2em;
}
svg {
display: block;
left: 50%;
max-width: 8em;
position: absolute;
top: 50%;
transform: translate(-50%,-50%);
}
#rect {
animation: slideOver 5s linear infinite;
}
#keyframes slideOver {
0% {
transform: translateX(0);
}
100% {
transform: translateX(100%);
}
}v
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 250 346">
<defs>
<clipPath id="clip-path">
<rect id="rect" x="0" y="0" height="346" width="250"/>
</clipPath>
</defs>
<path fill="#fff" d="M1.9 0h245.9v58H1.9zM250.1 139.9l-43.8-43.8-81.2 81.2-81.3-81.2L0 139.9l81.2 81.2L0 302.3l43.8 43.9 81.3-81.2 81.2 81.2 43.8-43.9-81.2-81.2"/>
<path clip-path="url(#clip-path)" fill="#000" d="M1.9 0h245.9v58H1.9zM250.1 139.9l-43.8-43.8-81.2 81.2-81.3-81.2L0 139.9l81.2 81.2L0 302.3l43.8 43.9 81.3-81.2 81.2 81.2 43.8-43.9-81.2-81.2"/>
</svg>
I have an issue with Safari when I test the below code, however the animation works fine in Chrome and Firefox.
HTML:
<div>
<svg width="100%" height="100%">
<line class="top" x1="0" y1="0" x2="690" y2="0"></line>
<line class="left" x1="0" y1="230" x2="0" y2="-400"></line>
<line class="bottom" x1="230" y1="60" x2="-460" y2="60"></line>
<line class="right" x1="230" y1="0" x2="230" y2="690"></line>
</svg>
</div>
CSS:
div {
width: 230px;
height: 60px;
margin: 100px;
position: relative;
}
div svg {
width: 100%;
height: 100%;
position: absolute;
}
div svg line {
stroke-width: 2;
stroke: #000;
fill: none;
stroke-dasharray: 230;
-webkit-transition: all .6s;
transition: transform .6s;
}
div:hover svg line.top {
-webkit-transform: translateX(-460px);
transform: translateX(-460px);
}
div:hover svg line.bottom {
-webkit-transform: translateX(460px);
transform: translateX(460px);
}
div:hover svg line.left {
-webkit-transform: translateY(330px);
transform: translateY(330px);
}
div:hover svg line.right {
-webkit-transform: translateY(-460px);
transform: translateY(-460px);
}
http://jsfiddle.net/e4frf6oa/2/
And here's how it looks while mousemove in Chrome and Safari.
On this line:
-webkit-transform: translateX(415px);
transform: translateX(460px);
You specify different pixel values for -webkit-transform and transform. The reason why Safari looks weird is because it uses the -webkit-transform definition, whereas most other browsers use the transform definition. To fix this, you just need to change the webkit one to also be 460px.
I am using an SVG clipPath to clip an image. (JSFiddle)
In Chrome, the animation is broken. The clipped image is only re-rendered when something else changes (for example when dragging the divider between the boxes in JSFiddle).
Is there a way to "force" Chrome to re-render the image when the SVG clipPath changes?
HTML:
<figure><img src="http://placehold.it/400x400" alt="" /></figure>
<svg width="0" height="0">
<clipPath id="slideActiveClipPath" clipPathUnits="objectBoundingBox">
<polygon points="0 0, 1 0, 1 1, 0 1"></polygon>
</clipPath>
</svg>
CSS:
#keyframes slide {
from {
transform: scale(0);
}
to {
transform: scale(1);
}
}
#slideActiveClipPath polygon {
animation: slide 1s ease-in-out infinite;
}
figure {
-webkit-clip-path: url(#slideActiveClipPath);
margin: 0;
padding: 0;
}
I am trying to do this effect on my site:
http://codepen.io/anon/pen/dPzarw
<svg width="100" height="100">
<g id="cross_svg">
<rect id="Rectangle-1" x="0" y="0" width="48" height="2" fill="transparent"></rect>
<rect id="Rectangle-2" x="0" y="14" width="48" height="2" fill="transparent"></rect>
<rect id="Rectangle-4" x="0" y="28" width="48" height="2" fill="transparent"></rect>
</g>
</svg>
CSS:
svg {
width: 52px;
height: 52px;
z-index: 99999;
transition: all .3s ease;
display: block;
margin: 15% auto;
cursor: pointer;
}
svg g {
transition: all .3s ease;
width: 100px;
height: 100px;
display: block;
position: absolute;
left: 50%;
top: 50%;
margin: auto;
cursor: pointer;
}
svg rect {
transition: all .3s ease;
fill: #E04681;
}
svg g {
width: 100px;
height: 100px;
}
Javascript:
$(document).ready(function(){
var svg = $('svg');
var lines = svg.find('rect');
var line_first = $('svg rect:nth-child(1)')
var line_second = $('svg rect:nth-child(2)')
var line_third = $('svg rect:nth-child(3)')
var i = true;
svg.on('click', function(){
if (i) {
setTimeout(function(){
$(this).find("g").addClass('gotcha')
line_first.css({
'transform':'rotate(45deg)',
'left':'50%',
'top':'50%',
'width':'200px',
// This line BELONGS to #dervondenbergen :D
// Enjoy your propriety my friend.
'transform-origin': 'left bottom'
})
line_third.css({
'transform':'rotate(-45deg) translate(-50%,-50%)',
'left':'50%',
'top':'50%'
})
line_second.css('opacity','0')
},005)
} else {
setTimeout(function(){
line_first.attr('style', '');
line_third.attr('style', '');
line_second.css('opacity','1')
},005)
}
i=!i;
});
});
If that link doesn't work it is the SVG version from this page:
http://lukyvj.github.io/menu-to-cross-icon/
This works great in chrome and safari but when I tried it in firefox it was broken. In firefox it works, but its almost like it moved the line so it is an X without the bottom left leg. This is on the mobile version of firefox as well. Is there any special coding that needs to be done to allow this to work in firefox?