current community

your communities

more stack exchange communities

Stack Exchange
tour help
careers 2.0
Take the 2-minute tour ×
Stack Overflow is a question and answer site for professional and enthusiast programmers. It's 100% free, no registration required.
up vote 2 down vote favorite
1

Not sure the best way to word this, but I'm trying to replicate something similar to Tinder. A video demonstration of the UI is here: http://www.youtube.com/watch?v=cdechGTbQfY

Here's a Plunker of what I've got so far: http://plnkr.co/edit/zzb143PeO7QgnyKijFmG?p=preview

It works well enough (imagine the .next div sitting beneath the .current div, I just have them styled like this so I can see what's happening).

However, it's missing two things:

  1. When the 'current' div is removed, it should slide away through ng-animate. Currently the data completely disappears and then reappears in new positions
  2. (I suppose) the .current div needs to animate away first, then the .next div needs to become the .current div, then the next item in the arr array needs to be loaded into .next

I'm not very well-versed in Angular so not sure the best way to approach this, nor can I find any similar examples online. Any ideas on how to achieve a cards-like ui for Angular?

share|improve this question
    
See examples here nganimate.org Just a matter of creating the css transitions you want –  charlietfl Nov 11 '13 at 12:11
    
@charlietfl Those are just animations but don't really address the question –  Jascination Nov 11 '13 at 12:13
    
this will give you a good direction using animation on ng-repeat yearofmoo.com/2013/08/… –  Ajay Beniwal Nov 11 '13 at 12:33
    
@Jascination you didn't look at the filtering repeater examples then. Seems to me is just what you want –  charlietfl Nov 11 '13 at 13:07
add comment

1 Answer

up vote 0 down vote

this post can help you http://onehungrymind.com/build-sweet-photo-slider-angularjs-animate/

here use http://www.greensock.com/tweenmax/ but you can use another thing if you want

share|improve this answer
add comment

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.