Sign in to follow this  
Ricky

Flip card

Recommended Posts

Hi, there are a lot of example about flip card, but i'm not able to find a right solution

I'm fighting with this,  trying to find a solution using only pixijs without html.

So, checking the code below i create a function onCardClick

with:

this.risiko_table is my container

this.card 1 and to are fron and back card

 

 

onCardClick: function(){
alert("click");
TweenMax.set(this.risiko_table, {
transformStyle:"preserve-3d",
z:0
});
TweenMax.to(this.card2, 2, {y:"+=180", ease:Power2.easeInOut});
TweenMax.to(this.card, 1, {z:"-=100", yoyo:true, repeat:1, ease:Power2.easeIn});
}

 

in this example, second one it work perfectly but using html

 

https://greensock.com/forums/topic/20670-nine-flipcards/?tab=comments#comment-96707

 
but it slide down without flip (rotation)


    (function (){   
        var body, container, hearts, spades, isTouch;        

        body = $('body');
        container = $("<div>");
        hearts = $("<div>");
        spades = $("<div>");


        TweenMax.set(body, {css:{
          width:258,
          height:401,
          transformStyle:"preserve-3d",
          perspective: 800,
          perspectiveOrigin:'50% 50% 0px',
          backgroundColor:'#000000',
          'margin-left':'auto',
          'margin-right':'auto'
        }})


        TweenMax.set(container, {css:{
          transformStyle:"preserve-3d",
          z:0
        }});

        TweenMax.set(hearts, {css:{
          backgroundImage:'url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/35984/hearts.png")'
        }});

        TweenMax.set(spades, {css:{
          backgroundImage:'url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/35984/spades.png")',
                                  rotationY:-180

                                }});


        TweenMax.set([hearts, spades], {css:{
          width:258,
          height:401,
          backfaceVisibility:"hidden", 
          position:"absolute",}})

        container.appendTo(body);
        hearts.appendTo(container);
        spades.appendTo(container);

        isTouch = ("touchstart" in document.documentElement);

        
        enableUI();


      

      function onMouseDown (e){

        TweenMax.to(container, 2, {css:{rotationY:"+=180"}, onComplete:enableUI, ease:Power2.easeInOut});
        TweenMax.to(container, 1, {css:{z:"-=100"}, yoyo:true, repeat:1, ease:Power2.easeIn});
      }

      function enableUI (){
        
        if(isTouch){

          container.one("touchend", onMouseDown);
        } else {

          container.one("click", onMouseDown);
        }
      }
})();

Could you help me?

 

Thanks a lot

Share this post


Link to post
Share on other sites

The code you pasted (both what you are currently using & the example at the bottom) use css transformations. You cant use those when operating within canvas. Without knowing how tweenmax works I'd assume those values would need to be numbers, not strings.

In addition pixi has no z-coordinate nor you can say preserve-3d as that's a css definition.

The example has 3d perspective, this is also something that's not enabled on pixi without plugins. You could do a fake rotation with scale like this (I dont know tweenmax much so this is pretty pseudocode):

Tweenmax.to(this.card2.scale, {x:0}).call( function(){
 //Swap textures on the card when it's completely scaled
}).to({x:1})

Share this post


Link to post
Share on other sites

My telepathy has its limits. Right now by that info you posted I dont know which way did you took and why did you fail. It just seems like "i saw this with html+tweenmax i wanna do this in pixi, but dont know where to start"

I'm ready to help but i need more info to work on. Also if you post big chunks of code, maybe its better to use codepen or jsfiddle to show how it actually works.

Share this post


Link to post
Share on other sites

I tryied some ways, first of all using card.js , without success and second way using tween, also without success.

I'm asking help to setup some flip card with pixijs, of course i'm newbie

 

Thanks for your time and help

Share this post


Link to post
Share on other sites

That way you wont get answer in a hour or two, maybe in several day of "fishing" in this thread before somebody will have time to help from scratch. Especially because https://pixijs.io/examples/#/plugin-projection/cards.js is really not for newbies, and to explain how ti works and how to modify things, we'll have to explain all basics first.

Share this post


Link to post
Share on other sites

i know, for that i try to find some other solutions, not clean and elegant like card, but in some way efficent for my goal.

It's more or less 2 days i'm trying to find some solution without success, unfortunatly

Share this post


Link to post
Share on other sites

you not use pixijs in this case but dom html and css.
Pixijs are inside a canvas elements and not related to html,css dom element.
To use 3d transform in css look for `transform:scale3d(x,y,z)`
It also require and compute from gpu.
https://developer.mozilla.org/fr/docs/Web/CSS/transform-function/scale3d


For pixijs , 3d are available but you will need change totally your approach.
And you will need maybe some week for study :)
https://pixijs.io/examples/#/plugin-projection/cards.js

 

 

here for you a tween solution but it not pixijs, it html,css, and it not use transform3d.
https://codepen.io/rhernando/pen/IJfAy?editors=0010

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
Sign in to follow this  

  • Recently Browsing   0 members

    No registered users viewing this page.