Box Flipping

[grantambrose]

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();
					}
			});

See the Pen by marketing (@marketing) on CodePen

[Rodrigo]

Hi,
 
What you could do is detect a touch event in your main container, which will be the div with the site-container class, and on that event reverse the animation. Of course you'll have to prevent the touch event from bubbling up the DOM in the blue box, because that would reverse the animation as soon as it starts. I saw you're using modernizr, so you can bind a click event (I've seen a lot of consistency between jQuery click() and touch events in several devices) in the outer container and using modernizr you can check if the user is in a touch screen and then call the reverse. If the animation is already reversed it won't have any effect whatsoever, so you're covered there.

jQuery(".site-container").click(function(e){
  if(modernizr.touch){
    travelerscol[0].animation.reverse();
  }
});

// now the click event on the element
travelerscol.click(function(e){
  e.stopPropagation();
});

Give that a try an let us know how it goes.

[grantambrose]

Hi,

 

What you could do is detect a touch event in your main container, which will be the div with the site-container class, and on that event reverse the animation. Of course you'll have to prevent the touch event from bubbling up the DOM in the blue box, because that would reverse the animation as soon as it starts. I saw you're using modernizr, so you can bind a click event (I've seen a lot of consistency between jQuery click() and touch events in several devices) in the outer container and using modernizr you can check if the user is in a touch screen and then call the reverse. If the animation is already reversed it won't have any effect whatsoever, so you're covered there.

jQuery(".site-container").click(function(e){
  if(modernizr.touch){
    travelerscol[0].animation.reverse();
  }
});

// now the click event on the element
travelerscol.click(function(e){
  e.stopPropagation();
});

Give that a try an let us know how it goes.

 

 

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();
					  }
					});

[grantambrose]

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();
					  }
					});

[Rodrigo]

Hi,
 
In that case the best way is to check the current reversed() state of the animation and using a ternary operator play or reverse the animation. The only thing you need to add is instantiate the timeline with the reversed state set to true, like this:

travelerstl = new TimelineMax({paused:true, reversed:true});

travelerscol.click(function(e){
  if(Modernizr.touch){
    e.stopPropagation();
  
    this.animation.reversed() ? this.animation.play() : this.animation.reverse();
  }
});

Like that you're toggling the animation on touch screens.

[grantambrose]

Hi,

 

In that case the best way is to check the current reversed() state of the animation and using a ternary operator play or reverse the animation. The only thing you need to add is instantiate the timeline with the reversed state set to true, like this:

travelerstl = new TimelineMax({paused:true, reversed:true});

travelerscol.click(function(e){
  if(Modernizr.touch){
    e.stopPropagation();
  
    this.animation.reversed() ? this.animation.play() : this.animation.reverse();
  }
});

Like that you're toggling the animation on touch screens.

 

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

[grantambrose]

Hi,

 

In that case the best way is to check the current reversed() state of the animation and using a ternary operator play or reverse the animation. The only thing you need to add is instantiate the timeline with the reversed state set to true, like this:

travelerstl = new TimelineMax({paused:true, reversed:true});

travelerscol.click(function(e){
  if(Modernizr.touch){
    e.stopPropagation();
  
    this.animation.reversed() ? this.animation.play() : this.animation.reverse();
  }
});

Like that you're toggling the animation on touch screens.

 

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?

[Rodrigo]

Hi,

 

I would set a common class for every box and give an active class to the one that is currently flipped. Then if the user click/touch another reverse the active one's animation, remove the active class, add the active class to the click/touch target and play that animation.

 

I set up this codepen for another thread but the concept is the same:

 

See the Pen JdwKKq by rhernando (@rhernando) on CodePen

[Rodrigo]

Hi,

 

I believe this codepen by Blake would be helpful in this situation:

 

See the Pen vObmBR by osublake (@osublake) on CodePen

[grantambrose]

Hi,

 

I would set a common class for every box and give an active class to the one that is currently flipped. Then if the user click/touch another reverse the active one's animation, remove the active class, add the active class to the click/touch target and play that animation.

 

I set up this codepen for another thread but the concept is the same:

 

See the Pen JdwKKq by rhernando (@rhernando) on CodePen

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

[Rodrigo]

Hi,

 

Basically a jQuery() constructor will return a jQuery object or collection depending on the selector passed.

 

In the case of animations that are toggled constantly like over/out states and like the samples you have, it's kind of the practice here in the forums to attach the animation to the DOM node and not store them in a variable or  in an object, mainly because the more objects you have the more complex it becomes to reference them. But storing them in the DOM node as a property makes it referencing them far easier.

 

In the case of the code you ask, the zero index position of a jquery object is the DOM node. Be careful though if you're passing a collection (a selector with more than one element) because that code will point to the DOM node of the first element of the jQuery collection.

 

This codepen illustrates that:

 

See the Pen oXVjQK by rhernando (@rhernando) on CodePen

 

You have a group of elements with a common class and just one with a different class. Referencing the zero index element on each jQuery constructor animates a different element.

[grantambrose]

Hi,

 

Basically a jQuery() constructor will return a jQuery object or collection depending on the selector passed.

 

In the case of animations that are toggled constantly like over/out states and like the samples you have, it's kind of the practice here in the forums to attach the animation to the DOM node and not store them in a variable or  in an object, mainly because the more objects you have the more complex it becomes to reference them. But storing them in the DOM node as a property makes it referencing them far easier.

 

In the case of the code you ask, the zero index position of a jquery object is the DOM node. Be careful though if you're passing a collection (a selector with more than one element) because that code will point to the DOM node of the first element of the jQuery collection.

 

This codepen illustrates that:

 

See the Pen oXVjQK by rhernando (@rhernando) on CodePen

 

You have a group of elements with a common class and just one with a different class. Referencing the zero index element on each jQuery constructor animates a different element.

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!