AJAX loading objects/images - makes jQuery animations choppy - javascript

I am building a website that has a few animations when you load the home page (for example, the main logo and a few menus slide in from the sides of the screen). Simultaneously, I am also using AJAX in the background to start to load some images that might be viewed later. The problem with this is that when the images are loading, the animations become quite choppy. Is there any way to stop this? Or maybe give the AJAX function a lower priority so that it doesn't try to do anything when an animation is running?
Here is the current script I'm using to load these images:
$('.lightbox-container.first').load('/images/first_set/', function(){
$('.lightbox-container.second').load('/images/second_set/', function(){
$('.lightbox-container.third').load('/images/third_set/', function(){
$('.lightbox-container.fourth').load('/images/fourth_set/', function(){
$('.lightbox-container.fifth').load('/images/fifth_set/', function(){
$('.lightbox-container.sixth').load('/images/sixth_set/');
});
});
});
});
});
An all of my animation function look something like:
$('.third-section').animate({ 'opacity': '1', 'height': '200px', 'padding-top': '20px', }, 500);

The problem
Since all your ajax and js animations run on the same browser thread, you are bound to have this problems. You are reaching the limits of your CPU, which causes the choppiness.
How to solve this
Use CSS3 transforms. Those are hardware accelerated in all modern browsers and run on a separate threads, so their performance is generally not affected by ajax calls. Since you said you only slide things around, I think this would be the ideal solution for you. There is a great article about it here:
http://www.html5rocks.com/en/tutorials/speed/high-performance-animations/
Your case
So to actually make this work for you. Leave the ugly ajax calls as they are for now. Instead of using jQuery animate, you need 2 states - the initial, which positions the slide away and one with an extra class, which positions your slide in it's target place.
All you have to do is add the class to the slide and it will nicely come in place. Theory is simple.
Sample
Your initial state could be something like this:
.slide {
transform: translate(-400px, -200px);
transition: all 5s;
}
And the one to show in place:
.slide.show {
transform: translate(0px, 0px);
}

Related

Creating a slide up effect on a mobile device using CSS/JS

What I need to achieve is that when you swipe up the page from the arrows, the page needs to slide up and the user will be redirected to another page (as an intro).
I currently have a working way to use the slider:
The question is: how do I actually make an effect that looks like the page goes up when the slider is used?
There are many different ways to do it. As I prefer to do it without plugins (well except jQuery), here's my way to achieve this:
1. Detect the Swipe
This can be achieved with the "touchstart" and "touchend" events. If the touchstart event is fired, you'll get the coordinates of the touch position. When the touch ends, get it again and compare the distance.
There are many really helpful articles about this topic.
here or here or just google "javascript swipe"
2.Scroll down
Can be done in many different ways, depends on what animation you want. Google for "smooth scrolling javascript". If you use jQuery, this might be the easiest way:
function afterscrolling(){
$('html, body').animate({
scrollTop: $( YOUR_ELEMENT ).offset().top
}, 500);
return false;
};
You can use Hammer.js
var swipe = new Hammer.Swipe();
swipe.recognizeWith(swipeup);
See swipe-recogniser.
So once you recognise the swipe-up gesture, you can animate the div to translate up using css.
div {
-ms-transform: translate(50px,100px); /* IE 9 */
-webkit-transform: translate(50px,100px); /* Safari */
transform: translate(50px,100px);
}
Refer this
Made a Codepen http://codepen.io/keephacking/pen/RaYxpm
Used jQuery touchSwipe and slideUp in jquery for the effect
For more about TouchSwipe ,Check link below.
https://github.com/mattbryson/TouchSwipe-Jquery-Plugin

css animation fast forward and rewind

I was wondering if it was possible, using some javascript or jquery, to skip to the next, or go to the last part of a css animation. Lets say we have the following:
#keyframe effect{
0%{opacity:1;}
45%{opacity:1;}
50%{opacity:0;}
95%{opacity:0;}
100%{opacity:1;}
}
that will fade something out and then back in
so lets say I made some buttons. How would I do the following:
$('#next').click(function(){
//skip to the next animation part
});
$('#previous').click(function(){
//skip to the previous animation part
});
It's not really possible unless you break the CSS into different parts based on classes and then add/remove classes.
However, there is an absolutely fantastic javascript library called Greensock, that allows timeline-based animation - and in many cases is faster than CSS animations. It also has the benefit of being cross-browser compatible.
If you were, for example to create something similar using Greensock, it would look something like this:
var effect = new TimelineMax({paused:true});
effect.addLabel('start');
effect.to(
'#myItem',
1,
{css:{opacity:1}}
);
effect.addLabel('step1');
effect.to(
'#myItem',
1,
{css:{opacity:0}}
);
effect.addLabel('end');
effect.play();
$('#gotoEnd').on('click', function(e){
e.preventDefault();
effect.seek('end');
});
With the use of the animation-play-state Property, you can pause an animation and update the transform, then restart it.
element.style.webkitAnimationPlayState = "paused";
element.style.webkitAnimationPlayState = "running";
However you can't pause the animation, transform it, resume it, and expect it to run fluidly from the new transformed state.
At this time, there is no way to get the exact current "percentage completed" of a CSS keyframe animation. The best method to approximate it is using a setInterval or requestAnimationFrame.
This CSS tricks article explains this further, and gives an example of using setInterval. Another option is to use request animation frame
As mentioned GreenSock or Velocity are animation libraries which allow for extremely fast and smooth animations

Smoothly Fade In Entire Web Page With MooTools

I want to fade in an entire web page after all its elements finished loading. The web page includes the background image repeated left to right, and the main content area with some text and pictures. I assume I should set body opacity to 0 in CSS, and use JavaScript code to fade in the page.
I have to use MooTools, more specifically, version 1.2.6, because that library is already linked to the page (and shouldn't be upgraded to a more recent version, for a number of reasons).
One of the StackOverflow experts suggested this MooTools snippet as a solution:
window.addEvent('load', function() {
$$('body').set('morph', {duration: 300}).morph({'opacity': '1'});
});
PROBLEM: for some reason, instead of smoothly fading in the page, the snippet makes the background appear right away, and then, a second or so later, the page pops up, without any fade-in effect. Most likely it's me who's not doing things right.
I'd appreciate a bit of advice from a knowledgeable person.
The answer to your question is to do the following.
Remove the CSS opacity:0; in the stylesheet and use this code adjusted from yours
I increased from 300 to 3000 which in seconds is from .3seconds to 3seconds.
chained:
window.addEvent('load', function () {
$$('body').fade('hide').set('morph', {
duration: 3000
}).morph({
'opacity': '1'
});
});
expanded:
window.addEvent('load', function () {
var el = $$('body');
el.fade('hide'); // hide body tag
el.set('morph', {duration: 3000});
$$('body').morph({'opacity': '1'});
});
Notice:
I do agree with LifeInTheGrey about bad practice, but i said i would answer your question.

Couple Issues with jQuery Animation

I am using jQuery Animate to create a Pan-Zoom effect on an image. Overall it works well with two exceptions.
First it starts the animation and seems to hit a wall then continue to zoom in. Is there a way to prevent this and make the motion one smooth motion.
Second is the motion is a bit jerky, especially at the end. Is there a way to smooth this out? I am using easing on the page if I should try adding some form of easing. (This was testing in Firefox and Chrome and both are jerky.)
Here is a jsFiddle of the animation.
Notes: I am using jQuery 1.8.3 and I could use CSS but sticking with jQuery for cross browser compatibility. (Majority of my users are on IE unfortunately.)
HTML
<div style="width:1140px; height:500px; overflow:hidden; text-align:center;">
<img id="pan-zoom" style="width:900px; height:600px; position:relative; top:-80px; left:0;" alt="European Bee-eaters" src="http://upload.wikimedia.org/wikipedia/commons/9/96/Pair_of_Merops_apiaster_feeding.jpg" />
</div>
JS
$(window).load(function() {
$('#pan-zoom').animate({
width: '2141px',
height: '1428px',
top: '-200px',
left: '-405px'
}, 8000, function() {
// Fade In Hidden DIV
});
});
If you speed up the animation, it will appear to be smoother. The slower the animation, the more noticeable any roughness of it will be.
Changing the easing to linear seemed to help as well. The slowness at end of the default easing (swing) makes the roughness of the animation very noticeable. The code below uses linear easing and is sped up twice as fast (as well changing the outer width to 900px, as #loxxy suggested), and it looked reasonably good.
$(window).load(function() {
$('#pan-zoom').animate({
width: '2141px',
height: '1428px',
top: '-200px',
left: '-405px'
}, 4000, 'linear', function() {
// Fade In Hidden DIV
});
});
Getting a large animation to be both smooth and slow may only be possible with hardware support like WebGL. Short of that, choose between smooth and slow, whichever is more important.
Change
<div style="width:1140px; ...
To
<div style="width:900px; ...
The idea is, that before zooming in, the image is scaled to fit the parent width, which is the effect you want to remove.
Updated fidde.
EDIT : Or position absolute, as commented.
Both problems would be resolved if you used the scale function of the css transform property. I think (it has been a long time since i've user jquery and did not follow up) that the jquery.animate function is not compatible with these. You should use a plugin or write one that does if you want to keep using jquery.
In your fiddle you use the left, top, width and height properties. This will be especially jerky in webkit.
Jquery transform plugin top google result:
http://ricostacruz.com/jquery.transit/

How to force jQuery animations to run simultaneously?

I have a web page with animations (JQuery Animation) all over the place. A typical animation sequence may contain three or four objects animating independently at the same time. The issue I am facing is that the queuing of the animations is not predictable. Some of the animations are running simultaneously while some others are not.
I am doing something like
setTimeout(function(){
//animations
}, delay);
in many places just to try and group the animations. Even when using this, some of the animations inside the code block are not running simultaneously.
Is there any way to force animations to be run at the same time? Is there a way to fill up the queue with animations and then execute these at the same time?
Is there any comprehensive documentation of how this thing actually works?
EDIT: Sample code Warning: The code is messy
The question is looking at the code how do you know which of the animations are going to run simultaneously?
This run simultaneously (but not if there's already an ongoing animation on the object):
$('.blabla .2').animate({opacity: 0.3, fontSize: 20}, 800);
And if you want to be 100% sure that it's animated right away (notice the queue:false):
$('.blabla .1').animate({fontSize: 20},{queue:false,duration:800});
You can also do this. (It will still run simultaneously)
$('.blabla .1')
.animate({fontSize: 20},{queue:false,duration:800})
.animate({opacity: 0.4},{queue:false,duration:800});
This runs one after the other.
$('.blabla .1').animate({opacity: 0.3}, 800).animate({fontSize: 20}, 800);
So does this
$('.blabla .2').animate({opacity: 0.3}, 800, function() {
$('.blabla .3').animate({opacity: 0.3}, 800);
});
I hope that answers your question.
Sorry for all the edits, i'm new here.
Use the step option. You give it a function, and after each step of the current animation, it will execute that function. Thus you can animate there. Link to docs.

Categories

Resources