3D Flip Effect pure javascript

[thrasherstudios77]

Hi

 

I am trying to recreate this common CSS 3D flip effect but using only jQuery and TweenLite.

 

Here is a working codepen with the CSS3 effect I am trying to recreate.

See the Pen kamEb by rudeworks (@rudeworks) on CodePen.

 

And here is my jQuery attempt so far.

See the Pen vGspk?editors=001 by ben_jammin (@ben_jammin) on CodePen.

 

On my example I am able to get it to flip front to back the first time the way it should be,  but having issues on "mouseout" and then on the second "mousenter" everything gets jacked.

 

Any help is appreciated.

[Rodrigo]

Hi,

 

Perhaps this can get you started:

 

See the Pen vjGxH by rhernando (@rhernando) on CodePen.

 

As you can see the code is very straight forward and also simulates a little movement in the z-axis. If you have more questions keep firing them.

 

Rodrigo.

[thrasherstudios77]

Thank you that example worked great. However I have a new issue.

 

On the page that this script is on I am loading the items with the flip effect with AJAX. So it works the first time but when new items get loaded to the page with AJAX the $.each method is not retriggered.

 

Mouse Events still work after returned Ajax request using the below code (for some reason I can't get .hover to work with $(document) like in the example...hmm..be really curious to see how to do that instead of having to use 'mouseover' and 'mouseout')

$(document).on('mouseover','.item >:first-child',this.itemOver);
$(document).on('mouseout','.item >:first-child',this.itemOut);

But I can't work out how to reinitialize the $.each portion of the example after the Ajax call. 

$.each('.item >:first-child', function(i,element) {

Once the Ajax request has come back with new items I receive this error in the Console when I mouseover on one of the new items

Uncaught TypeError: Cannot read property 'play' of undefined 
Uncaught TypeError: Cannot read property 'reverse' of undefined

I have tried using $(document) in a couple ways to reinitialize the method but still no go.

$(document).each('.item >:first-child', function(i,element) {

//and

$.each($(document).find('.item >:first-child'), function(i,element) {

 

Either the $.each method itself is not being retriggered or the TimelineMax object is not or its both.

 

Any ideas?

[Jonathan]

Hello,

 

$.each  iterates over JavaScript objects and arrays.

 

Have you tried using the .each() method instead .. which iterates over a jQuery object collection of elements

$('.item >:first-child').each(function(index,element) {
       console.log( "index of element" + index );
       console.log( "element" + element );
       // simple usage
       $(element).addClass("foo");
});

As far as re-running your each method do you have an example of your code to see what it looks like?

 

[thrasherstudios77]

Both types of each functions work the first time but both types fail once the AJAX request comes back. 

 

Here is my code.

$(document).on('mouseover','.items .item >:first-child',this.itemOver);
$(document).on('mouseout','.items .item >:first-child',this.itemOut);

itemOver: function() {
   this.animation.play();
},

itemOut: function() {
   this.animation.reverse();
},

$.each(items, function(i,element) {
   var tl = new TimelineLite({paused:true}),
      front = $(this).find(".front"),
      back = $(this).find(".back"),
      ease = 'ease-in-out',
      timing = 0.4;

   TweenLite.set(back, {rotationY:-180 });
   tl
      .to(front, timing, {rotationY:180, ease:ease})
      .to(back,  timing, {rotationY:0, opacity:1, ease:ease},0)
   element.animation = tl;
});

_

 

 

Again the error I receive on mouseover after the Ajax request is:

Uncaught TypeError: Cannot read property 'play' of undefined

Uncaught TypeError: Cannot read property 'reverse' of undefined 

[jamiejefferson]

You've not included the ajax requests that you say are the cause of your problem, so it's kind of tough to tell you how they are breaking your site... I can only assume you aren't running the $.each function after each request.

The errors you see are not errors in GSAP; they explicitly mean that you are calling play/reverse on an undefined object. This means that element.animation is not being created after the request. It seems likely that $.each is not being run over the newly inserted HTML, or that items doesn't include the new HTML.

While we aren't here to support jQuery and ajax issues, if you provide a reduced codepen sample we would be able to see everything in context and not have to guess.

[thrasherstudios77]

Jamie

 

Thanks but I do understand that. That's why my specific question was how to use the $(document) with the $.each so it does get re-triggered after the AJAX request , the issue is not a bad Ajax request. Remember I mentioned that the Mouse Event Handlers were being re-triggered using the $(document) syntax. I was hoping I could use the same trick with the $.each.

 

Maybe this is a question for stackoverflow but Jonathon asked for more information on the problem so I provided it.

[Rodrigo]

Have you attached a console.log on the loop and mouse events? Maybe this is a selector issue.

 

As Jamie pointed, without a live reduced sample is hard to check what could be the issue.

[jamiejefferson]

I never said your ajax request was bad; we just need to know if you are calling the .each() after it. Nothing seems wrong with your listeners, and nothing seems wrong with your .each() function. The only step that we are aware of that causes problems is the unknown ajax call, because afterwards it seems like the tween setup is not being ran again.
 
Here's an example

jQuery.get("foo.html")
      .done(function(html) {
        var items = $(html).appendTo(bar);
        $.each(items, ...); // you must run this over the new items or they won't have an animation property
      });