CSS/Javascript fluent push menus on all devices - javascript

I am trying to implement menus like "Left Push Menu" here:
http://tympanus.net/Blueprints/SlidePushMenus/
However, the animation here is not smooth not on iPod, not on recent iPad. I wonder whether there is something wrongly implemented or whether it must be done with javascript to create smooth animation.
For instance, what works smoothly is this:
https://medium.com/
The difference is that first link moves the whole document content, the second just moves the right part, which covers the left (But I doubt it makes such a difference in animation speed). I examined the source and I can't find out whether it is done by CSS or javascript.
What is the key to making the animation smooth?

From my experience, it just seems like iPads/iPods are not friendly when it comes to animations/tweening.
I looked at your website on my phone, and it seemed to work great (it's an android). Personally, I wouldn't worry about it, I don't think it's that big of a deal. But if it's really bugging you..
I'm guessing you're using css3 transitions right now? You could try javascript, here's a great tutorial: http://www.learningjquery.com/2009/02/slide-elements-in-different-directions

I find a solution which works great on all platform:
-webkit-transform: translate3d(0,0,0);
Moving with translate3d is smooth and fast.

Related

Is there a way I can force chrome to do subpixel rendering for a slow translation?

Im doing a very slow transition of a background image (a view of space that slides slowly to the left). My problem is while it looks beautiful on Firefox, it looks horrible on Chrome. I get a "jittery" effect due to Chrome's lack of subpixel rendering, and the image just snaps to the next pixel. I cannot speed the image up because it will destroy the effect Im trying to achieve. I have tried using TranslateZ() tricks, I have tried every CSS3 effect I could think of to make it look better, Ive tried Kinetic.js, Ive even tried Babylon.js hoping that WebGL would fix my problem.
At this point Im at a loss and I might just have to give Chrome users a static background and cater more to the Firefox users in regards to the neat little things I can do for the UI UX, and then just put a disclaimer on my site saying that the page is best viewed in FF.
I REALLY dont want to do this. Is there ANY work around at all?
You can force subpixel rendering by applying a small transformation:
#container {
transform: rotate(-0.0000000001deg);
-webkit-transform: rotate(-0.0000000001deg);
}
But instead of using JS to make the animation work, why not use CSS3 animations?
If you use transform: translate() browsers will use subpixel-rendering by default.
Also since the performance is better you shouldn't get your jittery/wave motion.
More info on performance here: http://www.paulirish.com/2012/why-moving-elements-with-translate-is-better-than-posabs-topleft/
I've put together a simple demo here: http://jsfiddle.net/yrwA9/6/
(For the sake of simplicity I only used the -webkit- vendor prefixes)

How is this In-browser lightweight animation done?

I see a number of sites have auto-loading animation as soon as you scroll down to the particular part of the site with the animation - apple.com has it, most recently I found it on http://www.bugherd.com/features
I see a number of PNGs loaded in the web inspector but I can't determine how its being done.
it’s Matt (co-founder & designer # BugHerd) here :)
Really glad to hear you like the animations we put together on the features page. In order to achieve the effect we used the transit.js library: http://ricostacruz.com/jquery.transit/
It uses the same syntax as jQuery animations and uses the animation queue as well. I put together the animation by loading up all the images needed and then transitioning, hiding and showing as required.
Happy to answer any other questions you might have about how to implement this on your own site.
Cheers!
Also as an aside the animations on the Apple site are fairly complex, but there’s a pretty detailed run down of the techniques used to achieve their effects. It’s well beyond what we’re doing on BugHerd though :)
https://docs.google.com/document/pub?id=1GWTMLjqQsQS45FWwqNG9ztQTdGF48hQYpjQHR_d1WsI
I'm not sure what you're talking about, but if you are referring to the animations Apple had when presenting the iPad, it's easy to do.
What you do is bind an event listener to the page/container scroll event. Then, check if your element is in view range, by comparing its top offset to the scroll height. If it's in view, call a function to animate the element. This can be done either by a single image sprite animating the background-offset, or an actual image sequence or even a canvas - your call.

Creating sections with big background images and bad performance in Chrome

I have a one-page website and I've added some sections with big background images set on them. I wanted them to have a "fixed" effect so when user scrolls they don't move. So I used background-size: cover; and background-attachment: fixed. This does the job. The problem however, is it's extremely laggy in Chrome, I think chrome doesn't cache images or something. You can test it here:
http://jsfiddle.net/sallar/rwyfZ/1/
its not smooth like other browsers. So I tried using images (in this case using $.backstretch). Using this method the scrolling lag is fixed and scrolls very smoothly, but it doesn't have the "fixed" effect I wanted. So I thought I should use a parallax effect. But none of the parallax plugins or methods I tried did a good a job on "images", they were all optimized for background-image which I can't use because of that problem in Chrome.
Here is a demo of Backstretch example:
http://jsfiddle.net/sallar/FX4Cn/1/
So, What should I do to make them have a fixed style and make the page scroll smoothly like the second example?
Thanks in advance.
I cant see any big difference except that the second one isnt fixed for sure.
I think your "issue" is that Chrome scrolls in steps, what Firefox and Opera dont (i dont really know about the others atm). Next time you may try to google something like "smooth scrolling chrome" to see one of hundrets questions and solutions for this "problem".
It theoretically is possible to do this with Javascript, but i cant find any useful/working example atm.

Why are [my] CSS3/jQuery transitions so imperfectly smooth, and how do I make them more smooth?

As much as I've searched for information about this all over the internet, I can't find anything about it, so I've come here for help.
What's been bugging me: That no matter which method I use -- a jQuery .animate, or a css3 transition, [my] animations don't appear to be perfectly smooth. I didn't understand why they appear this way at first, and it's so subtle I ended up having to do some video capping to prove it. But it's definitely there -- the animations are juttery. Sometimes a frame happens too fast, and sometimes too slow.
Flip it back and forth six or seven times, and you'll hopefully see what I'm talking about.
I can understand this with jQuery -- JS execution isn't perfect. A quick profiling shows that indeed, when using jQuery anim, some frames get triggered too soon and some frames are late. But with CSS3?
What do people do to solve this problem?
I am moving the container using the margin-left CSS property and .animate of jQuery and is pretty smooth. Use the arrow keys to use it (left and right)
The current version of that project its now full of images, text, iframes and is still smooth.
Set this JS before your code:
jQuery.fx.interval = 100;

Choppy/glitchy CSS3 transitions problem on the iPad 1 (with example)?

With this project at work, we have had to make a iPad HTML5. Using Backbone and jQuery Mobile, we thought we were on to a winner, but jQuery Mobile seems to be causing more problems than it should be. Using such things as page transitions with jQuery Mobile is painfully slow, choppy and glitchy (I do understand it's still in Alpha).
For our needs, we do want a smooth way of transitions between pages. I set about doing some experiments to see if I could get them any better for bespoke solution. I feel I'm quite close with this, but the animations still seem choppy and glitchy. I wonder if there is any other way to approach this? Or if there is a nugget of information that will help getting this rock solid?
I'm using translateX()/translateY() CSS3 (hardware accelerated) transforms to ensure it gets the best performance, but it still seems unreliable with it's performance. Sometimes it's ok, sometimes it's not.
I have uploaded an example... Please note, this is only tested in Chrome/Safari (which it looks fine in) and Mobile Safari on the iPad 1st generation (which it looks choppy in). If you happen to have an iPad handy, please take a look at this example...
http://littlejim.co.uk/code/ipad/jquery-plugin-page-transitions/
It's made as a basic plugin, because once I have this nailed I want to develop it more.
Can anyone help with this? I just wonder why it's still choppy on the iPad?
UPDATE: I tried using translate3d() as well as the translateX and translateY(), made no difference.
Only 3 dimensional transforms are hardware accelerated on the iPad. You should use translate3d and provide a 3rd parameter, set to zero.
http://googlecode.blogspot.com/2010/08/css3-transitions-and-transforms-in.html

Categories