We Keep Coding

How to make a flip card working in IE using TweenMax?

I have the following card flipper but when is in IE it will show the back face as front face but upside down. Any idea how to fix this?
Here is my JSFiddle
https://jsfiddle.net/qnwtLbzs/5/
$(document).ready(function(){
TweenMax.set('#flipContainer, #testCard',{
perspective:500
});
TweenMax.set($('#testCard'),{
transformStyle:'preserve-3d'
});
TweenMax.set('#testCard div',{
backfaceVisibility:'hidden'
});
TweenMax.set('#back',{
rotationX:-180
});
var flipped=false;
$('#testCard').click(function(){
if(!flipped){
TweenMax.to($(this),1,{
rotationX:180,
onComplete:function(){
flipped=true;
}
});
}
else{
TweenMax.to($(this),1,{
rotationX:0,
onComplete:function(){
flipped=false;
}
});
}
});
});

demo
rather than setting perspective on the parent container, set it on the moving divs i.e. #front and #back, using the transformPerspective GSAP property that works only with animated elems not their parents. Also the same divs should be rotated not the #testCard
tl.to("#back",1,{rotationX:0}).to("#front",1,{rotationX:180},0)
I've added some css like position:absolute in order these divs stack upon each other, not under each other.
I hope this will work in your IE.

Slide DIV Right to Left with jQuery

I'm using jQuery code to animate a div from left to right on load, and then by clicking the close button the div hides from right to left. It's working fine, it's just not going left to right horizontally but diagonally. What am I doing wrong? Here's an example of the code I'm using http://jsfiddle.net/N8NpE/2/
$(function(){
$("#content-box").hide(0).delay(0).show(500);
});
$(function(){
$("#ClosePanel").click(function () {
$("#content-box").hide("slow");
});
});
Any help will be greatly appreciated.

You could try using .animate() instead of .hide() and .show(). This will give you a little more control over everything.
$("#content-box").animate({'width': 240},500);
And to close, include a callback function to set display to none after the animation:
$("#content-box").animate({'width': 0},500,function(){
$("#content-box").css('display','none');
});
http://jsfiddle.net/N8NpE/6/

You should include jQuery UI in your script and change your function a little bit:
$(function(){
$("#content-box").hide(0).delay(0).toggle('slide', {
direction: 'left'
}, 1000);
});
Here is an updated jsfiddle: http://jsfiddle.net/N8NpE/4/

$('#content-box').animate({width: 'toggle'});
http://jsfiddle.net/U7wGt/

Javascript move div onClick

I'm trying to get a div #sidebar that rests above my main #stream div to move from position left: 565px; to position left: 0px; onClick of one image in the #sidebar div (the red arrow in the images below), and do the reverse onClick of the same image. I know I have to use JavaScript, but I have no idea what the code would be. If possible, I would like to animate the div move too.
The pre-clicked state (the arrow will be my link):
The post-clicked state:
Thanks in advance!

If you want to animate it using animate have a look at this. It should get you pointed in the right direction:
http://jsfiddle.net/3DpfJ/5/embedded/result/ - Full screen result
http://jsfiddle.net/3DpfJ/5/ - source code
So what I simply did was this:
$(function()
{
var expanded = false;
$('#sidebar').click(function()
{
if (!expanded)
{
$(this).animate({'left' : '0px'}, {duration : 400});
expanded = true;
}
else
{
$(this).animate({'left' : '565px'}, {duration: 400});
expanded = false;
}
});
});
This is probably the simplest way of doing it via animation. Duration is set to 400 so it will take 0.4 seconds to animate. Adjust as you please.
This script should be executed as soon as you load the page to ensure that the expand works. You will want to create <script type="text/javascript"></script> tag in the header and put the code there.
Hope it works for you.

$('#sidebar').click(function(){
$(this).animate({"left": "0"});
});

jquery uses toggle to handle this. It works better than a regular "animate" because it combines the hide and show into one function (toggle).
You might need to do some tweaking to fit your needs but this should get you started:http://jqueryui.com/toggle/

Is it possible to reveal the contents of a div from right to left

I created a fiddle
http://jsfiddle.net/gifcy/bJJ5s/5/
On DOM ready I hide the image.
I could successfully reveal the image from left to right using animate function.
Can someone show how to reveal from right to left. What additional parameters need to used.

Use jquery ui show() function
$(document).ready(function() {
$('#nature').hide();
$('#animation').click(function() {
$('#nature').show('slide', {direction: 'right'},1000);
});
});
​
fiddle here http://jsfiddle.net/bJJ5s/6/

Pretty sure this will work cross browser
#nature,
#nature img {
float:right;
}​
http://jsfiddle.net/g8zDk/

Can I use scrollTo in order to fix slideToggle footer issue?

I'm trying to create a footer that will slide from the bottom of the page when a link is clicked. The footer will slide out (using slideToggle) however it is not visible until you scroll down. I'm pretty sure what I want to do is use scrollTo so that when the link is clicked it instantly scrolls to the bottom while the footer slides up. I'm not sure how this is accomplished.
This is what I have at the moment:
$(document).ready(function() {
$('.footermenu').hide();  
$('.footertoggle').click(function() {
$('.footermenu').slideToggle(400);
return false;
});
});
Any help would be appreciated, thanks.

$(document).ready(function() {
$('.footermenu').hide();
$('.footertoggle').click(function() {
$('.footermenu').slideToggle(400);
//add this line
$('html,body').animate({scrollTop: $("#footer").offset().top},'slow');
return false;
});
});