grantambrose

okay great, thanks. I get what you mean but obviously playing around more will help me further. Thank you for your efforts. I didnt even know jQuery returned objects etc!

Ok great, I worked it out. I tried Rodrigo's example but I am not familiar enough with the code to work out what the loop is doing so I had to manually add each element's tween and reverse etc. A bit messier but works. What does the below code mean? jQuery(".partner-10")[0].animation

Hi guys, Just building on this. On a tablet, it seems that when a user clicks and a box fips over, to make another box flip over they need to click off this box so it rotates back to its front face, then the user must click on the box again to make the next box rotate http://chinaready.mywebone.com/program/businesses-and-organizations How can I make it so that if BOX A back is showing, and they click on the Front of BOX B, BOX A flips back to its front and BOX B flips to its back, all with the one click?

Great, that worked and I now when what that expression means. Ternary Operator

okay silly mistake by me. Modernizr needed a capital R Thank you for your reply. I was able to solve what I needed with the below jQuery(travelersfront).click(function(e){ if(Modernizr.touch){ travelerscol[0].animation.play(); } }); jQuery(travelersback).click(function(e){ if(Modernizr.touch){ travelerscol[0].animation.reverse(); } });

Ok awesome when I click on the site-container it flips back. How can I make it so that when you click back on the box it flips back, also? I tried the below jQuery(".welcome-signs .col-sidebar").click(function(e){ if(modernizr.touch){ travelerscol[0].animation.reverse(); } });

Thank you! I had not thought of that.

Hi there, On page load I am trying to fade in the body and then once this completes all my other animations start. I have this working, but on page load the page shows very quickly and then hides as per my TweenMax.set An example URL is here http://chinaready.mywebone.com/marketing At the above URL I have resorted to placing inline CSS right at the start of the page to hide the body so that it doesnt flicker but I am just concerned that hiding it with CSS and then animating it in with JS may not be the best as it is relying on JS to solve the issue? Or is this OK to do?

Hi guys, Just doing my first site with GSAP and have the following URL http://chinaready.mywebone.com/marketing On the right hand side mid-way down the page there is a blue box next to "a welcome sign for Chinese travelers" which, when you hover or click, needs to flip and on hover exit / click again the box needs to rotate back to its resting side. The hover works for me on desktop, and on touch devices the box flips. But I cannot get it to flip back on touch again, or when you click away from the box. The JS code I have used is below. Could someone please help me with (on touch again) flipping the box back over. jQuery(document).ready(function(){ var travelerscol = jQuery('.welcome-signs .col-sidebar'); var travelersfront = jQuery('.welcome-signs .col-sidebar .front'); var travelersback = jQuery('.welcome-signs .col-sidebar .back'); TweenMax.set(travelersback,{rotationY:-180}); TweenMax.set([travelersfront, travelersback],{transformStyle:"preserve-3d", backfaceVisibility:"hidden", perspective: 800}); jQuery.each(travelerscol, function(i,element) { travelerstl = new TimelineMax({paused:true}); travelerstl .to(travelersfront, 0.4, {rotationY:180}) .to(travelersback, 0.4, {rotationY:0},0); element.animation = travelerstl; }); jQuery(travelerscol).hover(elOver, elOut); function elOver() { this.animation.play(); } function elOut() { this.animation.reverse(); } });