Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
thrasherstudios77

3D Flip Effect pure javascript

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts

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.

Link to comment
Share on other sites

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.

  • Like 1
Link to comment
Share on other sites

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?

Link to comment
Share on other sites

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?

 

:)

Link to comment
Share on other sites

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 
Link to comment
Share on other sites

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.

  • Like 3
Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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.

  • Like 1
Link to comment
Share on other sites

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
      });
  • Like 1
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×