I am working on a project where users go back and forth between modals. I'm trying to do this by css transitioning opacity from 0 to 1. However, I noticed something is going very slow with my transitions.
I am getting about a 900ms to 2,000ms lag delay with some of my transitions, so I hooked up my phone to my laptop using chromes remote dev tools https://developer.chrome.com/devtools/docs/remote-debugging and started recording performance events https://developer.chrome.com/devtools/docs/timeline
This is an image of the recorded events fired from the phone. The yellow block is the jQuery click event handler firing, the yellow stripes belong to a jQuery.animate() function. However that green block at the bottom is almost 2 seconds long and it's labeled "Rasterize Paint". The purple slivers on the right are the actual animation taking place.
(EDIT: The jquery.animate() is different from the css animation taking place at the same time. I am adding a class in the event handler that changes opacity of an element that has transition: opacity 300ms set)
What does 'Rasterize Paint' mean? Why does this take so long? What can I do to avoid this?
EDIT:
Here is a fiddle of the page I'm running. I wasn't able to make a fiddle have the meta tag so it may have an extra 300ms delay on mobile devices. I recommend going through the steps "Got It! -> Fighter -> Accept -> Archery" After selecting "Archery" that is the slowest transition on the page. Why is that? I assume the layered opacities makes it very slow, but I still don't know for sure.
https://jsfiddle.net/2fLb1fd2/4/
.step {
position: absolute;
width: 100%;
max-width: 650px;
background: rgba(16, 16, 16, 0.8);
-webkit-transition: opacity 300ms linear, top 300ms linear;
-moz-transition: opacity 300ms linear, top 300ms linear;
-o-transition: opacity 300ms linear, top 300ms linear;
transition: opacity 300ms linear, top 300ms linear;
opacity: 0;
top: -100px;
left: 0;
right: 0;
margin: 30px auto 20px;
padding: 20px 20px;
color: white;
pointer-events: none;
text-align: center;
}
.step.showing {top:0;opacity:1;pointer-events:auto;}
Your problem here probably isn't opacity, opacity is a very cheap property (performance-wise) to animate with CSS. You are animating the top property however, this will trigger reflow each frame it is animated.
In order to make your animation smoother, you should animate transform: translateY(x); instead of the top property.
Related
I have a slider with images and videos which are fading in as soon as the elements are loaded. I am using a common lazy load library and as soon as the images/videos have the class "is-loaded", the opacity is animated from 0 to 1.
img.lazy,
video.lazy {
opacity: 0;
}
img.lazy,
video:not(.initial),
_::-webkit-full-page-media, _:future, :root video:not(.initial){
transition: opacity .3s;
-webkit-transition: opacity .3s;
-moz-transition: opacity .3s;
-o-transition: opacity .3s;
}
img.initial,
img.is-loaded,
img.error,
video.initial,
video.entered,
video.error{
opacity: 1;
}
img:not([src]),
video:not([src]){
visibility: hidden;
}
This works perfectly with images but videos are somehow blending in instantly. Even when I let the videos load in the background and go to the slide where the video is located, the video (which already has the class "is-loaded") is displaying instantly after a couple of milliseconds.
You can see this issue in my codepen: https://codepen.io/m42444/pen/PoOXxbG. Just click inside the blue dotted box to skip through the slides. The problem is just visible in the first loop where no element is loaded. Then, every slide is fade-animated on click (which has nothing to do with the loaded-fade-in).
It seems like the videos are firing "ready loaded" too soon and my fade in animation is happening with a video without any visible surface...
Thank you for any help! :)
I'm using bxSlider, for each slide I have several HTML elements not just an image. I need to make the active slide bigger than the others, I already accomplished that using css zoom and transition, but when I move from the first slide to the second slide or from the second one to the first one, my transition is missing, I mean it only grows up but it doesn't do the animation, it's ok for all the other slides, does anyone know why this transition breaks?
This is my code
$('#sliderTrend').bxSlider({
slideWidth: 300,
minSlides: 1,
maxSlides: 3,
moveSlides: 1,
slideMargin: 3,
pager: false,
onSliderLoad: function () {
$('#sliderTrend>div:not(.bx-clone)').eq(1).addClass('active-slide');
$('#sliderTrend>div:not(.bx-clone)').eq(1).removeClass('inactive-slide');
},
onSlideBefore: function ($slideElement, oldIndex, newIndex) {
$('.slideC2').removeClass('active-slide');
$('.slideC2').addClass('inactive-slide');
$($slideElement).next().removeClass('inactive-slide');
$($slideElement).next().addClass('active-slide');
}
});
And these are my css classes
.active-slide {
zoom:100%;
margin-top:0px;
-moz-transition: zoom 150ms linear, margin-top 150ms linear;
-webkit-transition: zoom 150ms linear, margin-top 150ms linear;
-o-transition: zoom 150ms linear, margin-top 150ms linear;
transition: zoom 150ms linear, margin-top 150ms linear;
}
.inactive-slide {
zoom:75%;
margin-top:60px;
-moz-transition: zoom 150ms linear, margin-top 150ms linear;
-webkit-transition: zoom 150ms linear, margin-top 150ms linear;
-o-transition: zoom 150ms linear, margin-top 150ms linear;
transition: zoom 150ms linear, margin-top 150ms linear;
}
SO36637125
Why does bxslider breaks my transition between last and first slide?
It's hard to be certain with bxSlider, it's a very flexible yet temperamental plugin. I believe it was the callbacks were too much. Every slider was removing and adding 2 classes all at once, which isn't healthy behavior for a single thread language like JavaScript.
When dealing with active and inactive states, you should know that bxSlider has it's own .active class and the active slider is always going to be the slide on the left, not the middle. So taking that into account, this is whats been done:
Removed the .inactive-slide class. Instead of having two states to deal with, use an active state, and use the default state (which is how slides are normally).
Changed the .active-slide class to .act because it saves time typing less. Changed the CSS rules to:
.act {
transition-duration: 1s;
transition-timing-function: ease-in;
transform: scale(2);
transform-origin: center center;
z-index: 9999999;
}
Using z-index to overlap the slides to the right and left.
Notice there's no position property. That's because by default each slide is position: relative.
-For details on the animation properties, you can find it here.
Removed the onSliderLoad callback because it's flaky. I've used bxSlider for a couple of years, and I have only been able to get it to work a few times.
Changed the onSlideBefore callback to simplify it:
onSlideBefore: function($ele, from, to) {
var $act = $ele.next();
$act.addClass('act');
$act.siblings().removeClass('act');
}
The first line basically references the real active slider that is positioned on the left (i.e. $ele) and targets the next slide after the active slide so now the .act class will be assigned to the middle slide.
The second line .addClass('act') to the middle slide (i.e. $act).
The last line ensures that there's only one $act slide by using .siblings() to remove .act class from every slide except $act.
This works because there's only one class to handle.
README.md
PLUNKER
I have built the following page:
http://jsfiddle.net/czLo0t6n/
Code visible at jsfiddle
When scrolled, the header reduces its height and text and logo change their position and size, as it is seen on many sites now.
I would like to add an animation to the process of scrolling. How can I do that? I have very low knowledge of JavaScript, but actually I assumed that the animation would already be in there. But as you can see, the states jump to each other, there is no visual transition.
Or maybe you can recommend me a better script than what I used?
Hope somebody can help :-)
Best
Th
You should enable transitions on the elements that change when the .large/.small classes are toggled
#header header,
#logo,
#slogan{
-webkit-transition: all 0.4s;
-moz-transition: all 0.4s;
-ms-transition: all 0.4s;
-o-transition: all 0.4s;
transition:all 0.4s;
}
Demo at http://jsfiddle.net/czLo0t6n/2/
Refer to this page for example: http://blog.froy.com/bond-street-loft-by-axis-mundi/
Hovering over any of the Pin It buttons, whether an image or in the bottom of the post, causes the button to 'scroll/flip' instead of showing a static Pin It button image.
I can't even identify what the cause is... Does anyone have any experience with this? This occurs in Chrome and Firefox. Site is running off of Wordpress.
It looks like that's just the way the button was setup. If you go to this site, you'll see that's where the button is hosted. You'll notice it looks like three different buttons. That means it's a sprite and on certain activities by the mouse, it's showing a different part of the image. Just by taking a quick look I found this
media="all"
a, button, input:focus, input[type="button"], input[type="reset"], input[type="submit"], textarea {
-webkit-transition: all 0.1s ease-in-out;
-moz-transition: all 0.1s ease-in-out;
-ms-transition: all 0.1s ease-in-out;
-o-transition: all 0.1s ease-in-out;
transition: all 0.1s ease-in-out;
}
You'll notice in that code there are the transitions, that's part of what's making the effect happen. Also this is part of the code that is showing only a certain image, notice that background-position.
a.PIN_1392869101137_pin_it_button_20 {
background-repeat: none!important;
background-size: 40px 60px!important;
height: 20px!important;
margin: 0!important;
padding: 0!important;
vertical-align: baseline!important;
text-decoration: none!important;
width: 40px!important;
background-position: 0 -20px;
}
Now on the :hover notice where the background position is.
a.PIN_1392869101137_pin_it_button_20:hover {
background-position: 0 0px;
}
That change is what is causing the effect.
I have founded this -> http://www.building58.com/examples/tabSlideOut.html
But there are some reasons that i dont want to use it:
i need prototype framework instead of jquery
i need an image to open slider (click to open) and when it opened image will change to "click to close"
Maybe someone has already the same solution of my question?
thank for you help!
CSS transitions were made for this sort of thing! For a demonstration of what you're looking for see http://jsfiddle.net/Fw7MQ/ (The 'handle' changes background colour but you could easily make that a background image instead)
The crucial parts of CSS are;
#drawer {
position: relative;
left: -200px;
/* transition is repeated for all supporting browsers */
-webkit-transition: left 0.5s ease-in-out;
-moz-transition: left 0.5s ease-in-out;
-o-transition: left 0.5s ease-in-out;
-ms-transition: left 0.5s ease-in-out;
transition: left 0.5s ease-in-out;
}
#drawer.open {
left: 0;
}
The 'drawer' has a class name added or removed as necessary using this tiny javascript snippet;
Event.observe('handle', 'click', Element.toggleClassName.curry('drawer', 'open'))
...but you could dispense with even that if the animation was done on mouseover instead - change the CSS selector from #drawer.open to #drawer:hover.
For older browsers it degrades gracefully, the animation doesn't play but the drawer still appears in the right place.