I am trying to hide a div with an animation on some action. My initial pass at it looked as follows:
.row {
height: 50px;
transition: height 200ms ease-in-out;
&.hidden {
height: 0;
}
}
Where my DOM structure was as follows (with react):
<div className={styles.container}>
<div className={styles.row} />
<div className={classnames(styles.row, { [styles.hidden]: !this.state.active })}
</div>
While this did work, it was very slow. I have heard that transforms are efficient to transition in CSS, so I decided to try the following instead.
.row {
height: 50px;
transform-origin: top;
transition: transform 200ms ease-in-out;
&.hidden {
transform: scaleY(0);
}
}
However, within the container, the second row is still displaying as a 50px box, but the inspector says that it has 0 height.
How can this transform be correctly applied to hide the second box?
3D transforms are efficient because the browser will composite the targeted elements into their own layers and offload the animations to the GPU. height and even scaleY() are not 3D transformations and do not benefit from GPU acceleration (the CPU still handles it).
To go back to your example with height, you can force the browser to use GPU acceleration by tricking it with a fake transform property like transform: translateZ(0); (translateZ() is the 3D component of translate3d(), much like scaleZ() is the 3D component of scale3d()).
Here's a quick demo:
document.querySelector('button').addEventListener('click', function() {
document.querySelector('.row').classList.toggle('hidden');
});
.row {
background-color: green;
height: 50px;
overflow: hidden;
transition: height 200ms ease-in-out;
transform: translateZ(0); /* or translate3d(0,0,0), rotateZ(360deg), etc. */
}
.row.hidden {
height: 0;
}
button {
left: 0;
position: absolute;
top: 100px;
}
<div class="row">Some text</div>
<button>Toggle Row Visibility</button>
With the added property, the browser should utilize GPU acceleration, significantly improving the animation. See this question for more information related to transforms and GPU acceleration.
I would recommend trying this first to see if it speeds up the animation enough in your app. You could alternatively try adding the will-change property though this is part of a working draft and currently non-standard.
Related
As others have pointed out, CSS animations might get stuck or pause inadvertently because of performance issues, for example a busy JavaScript main thread, like CSS Animation, State change finish animation.
In the context of a webpage using existing third-party libraries or frameworks, we might have no control over the whole web app, so we cannot guarantee that the JavaScript behaves properly.
As there seems to be no way to increase an animation's priority over other browser tasks, and there seems to be no way to decrease the priority of browser tasks initiated by JavaScript so that CSS-initiated tasks are preferred either, and that may have unintended consequences as well, I want to focus on controlling the animation itself.
So, my questions are:
Is there a way to tell the browser, preferably using only CSS, that the animation should rather drop some frames to guarantee to reach the final state in time even if there are performance problems?
If so, can we use CSS animation syntax only, or do we need to use other techniques such as requestAnimationFrame() or complex libraries like GSAP?
Perhaps, there is something like a combination of animation-fill-mode and text-rendering: optimizeSpeed; but to control what to optimize when rendering animations, but I have searched and have not found anything helpful.
What I have tried so far:
.drawer {
position: fixed;
left: 100%;
transition: transform 3s;
background: blue;
}
.drawer.open {
transform: translateX(-400px);
animation-name: slidein;
animation-duration: 3s;
animation-fill-mode: forwards;
}
#keyframes slidein {
0% { transform: none; }
25% { transform: translateX(-100px); }
50% { transform: translateX(-200px); }
75% { transform: translateX(-300px); }
100%{ transform: translateX(-400px); }
}
<div class="drawer" id="drawer">drawer</div>
show drawer
Although, this is supposed to be a minimal reproducible example, the bug is hard to reproduce when taken out of context. Please try to use CPU throttling in developer tools to see what I mean.
.drawer {
position: fixed;
left: 100%;
transition: transform 3s;
background: blue;
}
.drawer.open {
transform: translateX(-400px);
animation-name: slidein;
animation-duration: 3s;
}
#keyframes slidein {
0% { transform: none; }
25% { transform: translateX(-100px); }
50% { transform: translateX(-200px); }
75% { transform: translateX(-300px); }
100% { transform: translateX(-400px); }
}
<div>
<div class="drawer open" id="drawer">drawer</div>
show drawer
</div>
I have a sidebar transition that works fine in Firefox, but the first time it is used, the animation is "jerky" in Edge. It lags and then comes out really fast in that browser. After the first time of use per-page-load, it behaves smoothly like in Firefox though. I know Edge has issues with translate all but even specifying the transition type (translatex) in the CSS code did nothing for me.
var sidebar = document.getElementById('sidebar');
var burger = document.getElementById('BurgerID');
burger.addEventListener('click', function() {
if (burger.classList.contains('open')) {
burger.classList.remove('open');
sidebar.style.transform = 'translateX(400%)';
} else {
burger.classList.add('open');
sidebar.style.transform = 'translateX(300%)';
sidebar.style.zIndex = 998;
}
});
sidebar {
background: rgba(255,255,255,0.90);
position: fixed;
transform: translateX(400%);
transition: all .5s ease;
-webkit-transition: all .5s ease;
-ms-transition: translatex .5s ease;
top: 0px;
bottom: 0px;
width: 25%;
height: 100%;
}
<div id="BurgerID" class="">
<mark class="mark-1"></mark>
<mark class="mark-2"></mark>
<mark class="mark-3"></mark>
</div>
<div id="sidebar" class="sidebar">
It's hard to tell because your code sample doesn't run, but you could try adding will-change: transform; to your sidebar element.
The will-change CSS property hints to browsers how an element is expected to change. Browsers may set up optimizations before an element is actually changed. These kinds of optimizations can increase the responsiveness of a page by doing potentially expensive work before they are actually required.
Important: will-change is intended to be used as a last resort, in order to try to deal with existing performance problems. It should not be used to anticipate performance problems.
https://developer.mozilla.org/en-US/docs/Web/CSS/will-change
I want to implement the fade and scale effect shown here:
http://tympanus.net/Development/ModalWindowEffects/
but for a page (with width and height of 100% of the browser) not a modal.
How can I do that using jquery or css? I tried copying the code on the page but it works best for modals not for pages that have width and height of 100%.
On the page are elements with minimum width of 1024px.
Updated the jsFiddle to show it containing elements that are at least 1024px.
You'll want to put your entire page into a wrapper element, and then give it the animation class on DOM Ready.
The CSS will be something like:
body,html{
height:100%;
margin:0;
}
.page-wrapper{
height:100%;
overflow:auto;
overflow-y:auto;
overflow-x:hidden;
transform:scale(0);
opacity:0;
transition: transform 1s ease, opacity 1s ease;
}
.page-wrapper.fade-and-scale{
transform:scale(1);
opacity:1;
}
And the jQuery will be something like this:
$(document).ready(function(){
$('.page-wrapper').addClass('fade-and-scale');
});
This solution has the benefit of:
"Growing" from the centre of the page, and falling back gracefully on older browsers
Falling back gracefully on older browsers
Not animating any fundamental css properties (ie. width or height)
Fiddle: https://jsfiddle.net/gk5c08rc/4/
Did you mean something like this?
https://jsfiddle.net/rn8ho7wL/
Wrap your page in a wrapper, and set a smaller (or whichever style you like to go FROM) into the base styles for that wrapper. Add in a transition-duration property.
#wrapper {
transition: all 2s;
-webkit-transition: all 2s;
width: 10%;
height: 10%;
background: red;
margin: 0 auto;
opacity: 0;
}
Then, define a class where you want the page to go TO. Styled the same way.
#wrapper.open {
width: 100%;
height: 100%;
opacity: 1;
}
And in your javascript file (assuming jQuery is loaded), simply apply the style.
$(function(){
$('#wrapper').addClass('open');
});
Bear in mind that CSS3 transitions are not supported by IE9 and below, and also require some vendor prefixes to be largely compatible. For using the transform, as described in another answer, apply the following:
-webkit-transform: scale(0); /* Ch <36, Saf 5.1+, iOS, An =<4.4.4 */
-ms-transform: scale(0); /* IE 9 */
transform: scale(0);
Edit:
The issue with the min-width can easily be solved by adding overflow: auto to your wrapper element.
https://jsfiddle.net/rn8ho7wL/2/
I'm developing an cordova app with 3 "pages". The "pages" are divs with a fixed height and the with of 100%. (see div1, div2, div3 in the picture)
I'm currently using jquery show and hide functions with a slide but the performance on mobile phones is very bad. So I thought of using css, I cant get an idea of how to make is so you can swipe the current visible div to sort of snap the next div in place.
Maybe this picture wil clear my story up: picture
I hope someone can push me in the right direction css and javascript wise..
You should still use jQuery Mobile to detect swipe left/right events on each div, but instead of animating div's position, you should add/remove class for the previous/active/next DIV. Classes should look something like this:
.container {
position: absolute;
left: 0px;
top: 0px;
width: 100%;
height: 100vh;
transition: all 0.6s cubic-bezier(0.250, 0.460, 0.450, 0.940); // this will add nice inertia effect upon switching DIVs
}
.container.previous {
transform: translateX(-100%);
}
.container.active {
transform: translateX(0%);
}
.container.next {
transform: translateX(-100%);
}
I have been looking around the internet for a while to find a good library or way of making a mobile full width/height div
And when I click a button it swipes to the right revealing another div
with new content, and pushing the current div to the left ( or right )
The blue box is my viewport, mobile in this case
Here's a crappy illustration to show what I mean
I have tried using CSS ( with semi-success ) I can reveal another div using
.slide {
position: absolute;
width: 100%;
height: 100%;
transition: transform .5s ease-in-out;
}
#slide-options {
background: #eee;
transform: translate(100%, 0);
}
#slide-options.active {
transform: translate(0,0);
}
But it's just sliding over the 1st div, not pushing it along
Any idea's or existing libraries?
Thank you!