how to getback the card with reverse animation ?

[mathewk2017]

hi, I have a requirement, like in tinder when the user clicks on the reverse button the card just thrown out should come back with reversed animation. is it possible? anyone has a solution?

[baron554]

Currently looking for a solution to this as well.

[Anujmoglix]

I want to throw card on button click with left/right effect. Is it possible in i t?

[JoukeD]

Has anyone found a solution yet?

[Anujmoglix]

No :(

[JoukeD]

I did it! Will post an example later

[JoukeD]

To make a card animate back to the stack you can use the 'throwoutend' event on the cardstack in combination with a css translation animation, it's a bit hacky but it works:

In your component class: @ViewChild('myswing1') swingStack: SwingStackComponent;

ngAfterViewInit() {
  this.swingStack.stack.on('throwoutend', (event: ThrowEvent) => {
    // get the card from the swingstack
    const c = this.swingStack.stack.getCard(event.target);
    // get the corresponding object from your array with card objects (in this case the latest)
    const obj = this.cardstack[this.cardstack.length - 1];
    // set animateback property on the object
    obj.animateBack = true;
    // translate the target html element back to x = 0, y = 0
    event.target.style['transform'] = `translate3d(0, 0, 0) translate(0px, 0px) rotate(0deg)`;
    // set a timeout the duration of the css translate animation to disable animation
    setTimeout(() => {
        obj.animateBack = false;
        event.target.style['transform'] = ``;
        // throwin the card to sync the x,y position in the swingStack memory
        c.throwIn(0, 0);
    }, 100 /*duration of the animation*/ );
  });
}

In you view html add the ngClass when animateback is true:

<div swing-card *ngFor="let c of cardstack;" [ngClass]="{'animate-translation-100': c.animateBack}"></div>

In your css animate the translation:

.animate-translation-100 {
  -webkit-transition: .100s ease-out;
  -moz-transition: .100s ease-out;
  -o-transition: .100s ease-out;
  transition: .100s ease-out;
}