Develop Reference

Parallax scroll with easing

I have an element that move relative to scroll. I use jQuery for this:
$('#object').css('transform','translateY('+($(window).scrollTop()*.4)+'px)');
CSS
#object {
width:200px;
top:100%;
left:50%;
position:absolute;
}
This works well, but moves my element directly without any easing (delay).
By setting a transition using css I get some of the effect that I'm looking for, but doesn't look good if I scroll at the same time:
transition: 400ms ease;
Is it possible to do this smooth, but in a more elegant way?

I figured it out by myself. The problem was the css "ease". Ease means that it will start slow and end slow, which will result in at the time scrolling is active it will always be on the slow start. However if you use css "ease-out" it will always start fast and slow down in the end. So use this:
transition: 400ms ease-out;
Or cubic-bezier if you want to customize the easing-curve yourself:
transition: 400ms cubic-bezier(0.235, 0.615, 0.185, 0.995);

When doing a parallax effect you will set a new translateY() on every scroll event that triggers. The event triggers really often and normally there should be no need for a transition. If you still experience bad rendering it is probably because the browser does not render on every event. You can force the browser to do so by using requestAnimationFrame.
var translate = function() {
$('#object').css('transform','translateY('+($(window).scrollTop()*.4)+'px)');
}
$(window).on('scroll', function() {
window.requestAnimationFrame(translate);
});

CSS3 Transitions happen instantly?

I have an element called #artwork which needs to be animated:
#artwork{
-webkit-transition: all 20s ease-in;
transition:all 20s ease-in;
width:75%;
display:block;
margin:0px auto;
}
#artwork.trans{
width:60%;
}
The problem is, the transition happens instantly without any delay (in my case 20s). I have tried Jquery's toggleClass function to no avail and I also tried the css function which also didn't work.
$(window).load(function(){
var addImage = function(background){
$("#images").append("<div class='image'><img id='artwork' src='"+ background +"' /></div>");
$("#artwork").css("width", "65%");
$("#artwork").toggleClass("trans");
};
addImage("http://4.bp.blogspot.com/-f5Oju8nYOe4/T91Kdqww3GI/AAAAAAAAGEk/s1tZR76WQfc/s1600/winter-wallpaper-7.jpg");
});

The element needs to be drawn on the page before it can be transitioned. If you add an element it's a good rule of thumb to give 10-100ms for the initial state to render before changing it's styles.
You may also want to consider using an animation instead, which you can do without the delay.
Here's an animation I've used to move something into the page from the right, feel free to modify it to suit your needs.
.some_class{
-webkit-animation: myanimation 500ms ease-in-out;
-moz-animation: myanimation 500ms ease-in-out;
animation: myanimation 500ms ease-in-out;
}
#-webkit-keyframes myanimation {
0% { left: 200%; }
100% { left: 0%; }
}
#keyframes myanimation {
0% { left: 200%; }
100% { left: 0%;}
}

You can't switch from display:none to display:block in a transition. This is why your animations are happening instantly.
Including the display change in the transition tells CSS to snap to position.
You need to switch display to block, then wait a frame, then apply your other new properties for them to animate. This is why when you change the values in the inspector they animate.
Here's a codepen showing an example of the above http://codepen.io/gunderson/pen/emyReW

When using the transition shorthand property, the delay is placed at the end. In your code, your transition will last 20s with no delay.
If you want it to be delayed by 20s, it should be written like this:
transition:all 2s ease-in 20s;
EDIT
Here is a demo

As Michael's answer above, the image need to be drawn before any animation taking effect.
Let's take a look at your code:
$(window).load(function(){
var addImage = function(background){
$("#images").append("<div class='image'><img id='artwork' src='"+ background +"' /></div>");
$("#artwork").css("width", "65%");
$("#artwork").toggleClass("trans");
};
addImage("http://4.bp.blogspot.com/-f5Oju8nYOe4/T91Kdqww3GI/AAAAAAAAGEk/s1tZR76WQfc/s1600/winter-wallpaper-7.jpg");
});
After the append function is called, the image begins to load. At this time, the browser will proceed other functions css or toggleClass below the append. Which is why you will never see your image animated.
To fix this, you need to put your append image code into another function, and animation code into another function, like this:
$(window).load(function(){
var addImage = function(background){
appendImage(background);
animateImage();
};
var appendImage = function(background) {
$("#images").append("<div class='image'><img id='artwork' src='"+ background +"' /></div>");
};
var animateImage = function() {
$("#artwork").css("width", "65%");
$("#artwork").toggleClass("trans");
};
addImage("http://4.bp.blogspot.com/-f5Oju8nYOe4/T91Kdqww3GI/AAAAAAAAGEk/s1tZR76WQfc/s1600/winter-wallpaper-7.jpg");
});
In this code, the addImage function will call two external functions, which will happen sequentially. By doing this, the animateImage will be called right after the appendImage function is finished.
This is the demo on Codepen.
Hope this helps.

AngularJS ng-show with ng-animate unexpected behavior

The problem is that when I double click very quickly on a button to toggle an ng-show, the value will not change (this is expected behavior - it toggles) but the actual element will be hidden. See here: http://jsfiddle.net/QbZrJ/
If you double click quickly, the value stays true, but the element fades out. If the ng-animate directive is removed, it works as expected, so I guess this has to do with the animation.
function ctrl($scope){
$scope.foo = true;
$scope.clicked = function(){
$scope.foo = !($scope.foo);
}
}
Nothing fishy there. Note that this is using the old way of animating in AngularJS but I observe the behavior in AngularJS 1.2.8 as well.
Edit: I think the animation duration is the issue after some troubleshooting. It seems that with 0 delay it works fine. With anything nonzero, it somehow ignores the fact that it should be hidden and completes the animation.

I see that you still use AngularJS 1.1.4.
Since 1.2, AngularJS uses a completely different API for animations.
Be aware that ng-animate is a separate module now, so you must include it in your scripts and also in your module dependencies list.
You can read more about it this article: Remastered Animation in AngularJS 1.2
Refactored to AngularJS 1.2 -> plunker
html:
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.8/angular.min.js">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.8/angular-animate.min.js">
<div ng-app="myApp">
<div ng-controller='ctrl'>
<div ng-click='clicked()'>[Double Click Me Fast] ng-show:{{foo}}</div>
<div ng-show="foo" class='myDiv'>
</div>
</div>
</div>
js:
angular.module('myApp',['ngAnimate'])
.controller('ctrl', function ($scope){
$scope.foo = true;
$scope.clicked = function(){
$scope.foo = !($scope.foo);
}
});
css:
.myDiv{
width:400px;
height:200px;
background-color:red;
-webkit-transition: opacity 1s linear;
-moz-transition: opacity 1s linear;
-o-transition: opacity 1s linear;
transition: opacity 1s linear;
opacity: 1;
}
.myDiv.ng-hide-add, .myDiv.ng-hide-remove{
display:block!important;
}
.myDiv.ng-hide{
opacity: 0;
}

CSS3 replacement for jQuery.fadeIn and fadeOut

I have written a small amount of code to try and replicate jQuery's .fadeIn() and .fadeOut() functions using CSS transitions to look better on touch devices.
Ideally I'd like to avoid using a library so that I can write exactly what I want, and as a learning exercise.
fadeOut works well.
The idea for fadeIn is to use CSS3 transitions to adjust the opacity of an element, after which the element will be set to display:block; (using is-hidden class) to ensure it's not still clickable or covering something beneath it.
fadeIn is not working though. I think it is due to adding the is-animating class at the same time as removing the is-hiding class. The transitionEnd event never fires because a transition does not occur:
function fadeIn (elem, fn) {
var $elem = $(elem);
$elem.addClass('is-animating');
$elem.removeClass('is-hidden');
$elem.removeClass('is-hiding');
$elem.on(transitionEndEvent, function () {
$elem.removeClass('is-animating');
if (typeof fn === 'function') {
fn();
}
});
};
And the CSS
.is-animating {
#include transition(all 2000ms);
}
.is-hiding {
// Will transition
#include opacity(0);
}
.is-hidden {
// Won't transition
display: none;
}
Here's the code: CodePen link
Update: I have found what I'd describe as a hack, but that works very well: CSS3 replacement for jQuery.fadeIn and fadeOut
Working code after this fix: Fixed
A solution without setTimeout would be very valuable though.

i don't know what you really wanna achieve but if your using css3 your using a modern browser. in that case pure css & javascript is a better solution.
it's all about how you write the css transition.
here is the js code
var div=document.getElementsByTagName('div')[0],
btn=document.getElementsByTagName('button')[0];
div.addEventListener('click',function(){
this.classList.add('hide');
},false);
div.addEventListener('webkitTransitionEnd',function(e){
console.log(e.propertyName);
},false);
btn.addEventListener('click',function(e){
div.classList.toggle('hide');
},false);
css code
div{
width:200px;height:200px;
opacity:1;
overflow:hidden;
line-height:200px;
text-align:center;
background-color:green;
-webkit-transition:opacity 700ms ease 300ms,height 300ms ease ;
}
div.hide{
height:0px;
opacity:0;
-webkit-transition:opacity 700ms ease,height 300ms ease 700ms;
/*add the various -moz -ms .. prefixes for more support*/
}
and the html
some text
<div>click here</div>
some text
<button>toggle</button>
here is an example.
http://jsfiddle.net/qQM5F/1/

Alternative solution using Keyframes
js
var div=document.getElementsByTagName('div')[0],
btn=document.getElementsByTagName('button')[0];
div.addEventListener('webkitAnimationEnd',function(e){
div.style.display=div.classList.contains('hide')?'none':'';
},false);
btn.addEventListener('click',function(e){
div.style.display='';
div.classList.toggle('hide');
},false);
css3
div{
background-color:green;
-webkit-animation:x 700ms ease 0ms 1 normal running;/*normal*/
opacity:1;
}
div.hide{
-webkit-animation:x 700ms ease 0ms 1 reverse running;/*reverse*/
opacity:0;
}
#-webkit-keyframes x{
0%{opacity:0;}
100%{opacity:1;}
}
example
http://jsfiddle.net/qQM5F/8/
here is a prototype
Object.defineProperty(HTMLElement.prototype,'toggleOpacity',{value:function(){
function check(e){
this.style.display=this.classList.contains('hide')?'none':'';
this.removeEventListener('webkitAnimationEnd',check,false);// clean up
}
this.addEventListener('webkitAnimationEnd',check,false);
this.style.display='';
this.classList.toggle('hide');
},writable:false,enumerable:false});
css
.fade{
-webkit-animation:x 700ms ease 0 1 normal;
opacity:1;
}
.fade.hide{
-webkit-animation:x 700ms ease 0 1 reverse;
opacity:0;
}
#-webkit-keyframes x{
0%{opacity:0}
100%{opacity:1}
}
usage
the element you need to fade needs a class fade then toggle it with
element.toggleOpacity();
example
http://jsfiddle.net/qQM5F/9/

You may want to consider a couple of plugins that might take care of what you want:
jQuery.transition.js retrofits the existing jQuery animation methods to use CSS transitions in browsers that support them.
Transit adds a transition function you can use to define your own transitions. It uses jQuery's effect queue, so you can queue up the changed display value to run after opacity has finished transitioning.

I have managed to fix this by doing something that feels unnatural and hacky:
function fadeIn (elem, fn) {
var $elem = $(elem);
$elem.addClass('is-animating');
$elem.removeClass('is-hidden');
// Smelly, setTimeout fix
setTimeout(function () {
$elem.removeClass('is-hiding');
}, 0);
$elem.on(transitionEndEvent, function () {
$elem.removeClass('is-animating');
if (typeof fn === 'function') {
fn();
}
});
};
Adding the setTimeout function to the class that contains the transition-able property fixes the issue.
Working code here: Codepen fixed code

getting issue with collapsible panel using jquery toggle

I am getting issue with jquery toggle function.
Bellow i have attached link for demo...
jsfiddle link
jquery code -
$(document).ready(function(){
$('.collapsBTN').toggle(
function () {
$(".rhs_container").css({'display':'none'});
$('.rhs').animate({width: "20"});
},
function () {
$(".rhs_container").css({'display':'block'});
$('.rhs').animate({width: "295"});
}
);
});
Issue -
If we click on collaps button (in pink color as shown in above given link), toggle function works fine but button gets disappeared while animating width. It should be vissible with animation.
Can any one solve this?

The problem is, while jQuery animates over width, it makes overflow:hidden style. This one works, though:
jsfiddle

If you are using html 5 and css3 then follwoings would be better approach :
<script>
$('.collapsBTN').click(function () {
$('.rhs_container).toggleClass('change-size');
});
</script>
<style>
.rhs{
-webkit-transition: width 1.5s linear ;
-moz-transition: width 1.5s linear ;
transition: width 1.5s linear ;
}
.change-size {
width: 20px;
}
.change-size .rhs_container{
display:none;
}
otherwise please check simple solution with jquery jsfiddle link