flexnewbie

Thanks for the links they're very helpful. Once again I would like to thank you for your support and advice you've been great throughout. Merry Christmas.

Hey, Looking good and sorry for not replying sooner. I have a few questions: 1. I've put the .switch-tile animation module in it's own file - it's very difficult to test and clearly shows up when running my code coverage tests. Is this actually testable? If not, I'll just exclude it from my tests. 2. I haven't used your ngDisabled approach because I don't like the effect of all buttons becoming enabled across all case tiles after reversing the timeline - it's a personal taste thing . To get around this after reversing the timeline I set the timeline to undefined, when selecting a new case if its defined I know the timeline is currently playing so I simply return at that point otherwise cary on as normal. 3. What is really disappointing is the judder after a case tile rotates and before the width resize. This only occurs when I'm on a Windows machine (XP -> Win7) using Fire Fox (v31), IE 10 is fine although you see the front of the card on the back of the card after a rotate which I'm not concerned about. Cheers, Paul

Finally got it working: http://codepen.io/anon/pen/myeqVV They only thing to do is to apply a transition from info to person and back again. Hooray.

Things aren't going to well. Here's the latest CodePen: http://codepen.io/anon/pen/myeqVV 1. As you can see when going from case -> info or case -> person you can see the yellow backTile which is helpful. However, both info and person are not displayed correctly - looks like they could be rotated 180. 2. When going info <-> person I've adjusted the width accordingly with the help of $timeout like you did for ngClass. 3. After toggling info <-> person a few times and then exiting it does some weird transition 4. Info to person and person to info requires a fade out then a fade in so it looks better.

Thanks, I'll give that a crack and come back with a new CodePen. Once again thanks.

First and foremost thank you very much for your help you have been great However, I have one more favour to ask... I've added another button called person to the case tile. When selecting this button it takes you to the person tile. I've also added an info button to the person tile and a person button to the info tile. What I would like to do is have the ability to toggle between info and person - does that make sense? Do you have any suggestions? It would be great if we could achieve this on the same timeline. After that no more help is required as I'll be done Cheers. CodePen: http://codepen.io/anon/pen/myeqVV

In order to add placeholders that would mean adding data objects to the $scope.data array which is not an option unless you are thinking of something else?

Hi OSUBlake, Thanks for replying I appreciate it. Yes, I've used ngAnimate before in earlier versions of AngularJS and I didn't get on well with it - maybe it's easier to use in the latest releases. The directives you've listed I use all the time but not in conjunction with ngAnimate. I like what you've done but I don't have the real estate (e.g. the height) to expand a list item in the way you have and unfortunately I don't have the time to rewrite what I've done. In my CodePen I'm animating the list item's 'left' css property to 0 and then in parallel I'm resizing the list item's width property to 1035. The problem I have is when there are 6 or less items visible. Selecting the info button the whole thing moves left then in parallel the width increases to fill the space creating this weird/screwed up undesirable effect of going left but then the width kicks in and jerks back. Like I previously mentioned if you add more list items say up to 7 or more then you don't see the issue - do you have any ideas how I can change the animation to correct this bad behaviour when there are 6 or less list items? Any help would be gratefully received as I'm at a loss right now *** Update ***: I've slowed down the animation to 5 seconds and only provided one list item in order to easily display the issue I'm having. 1. Select the info button then when it's finishing animating select exit - this is nice. 2. Add another item to the list. 3. Now select the same item (e.g. #2) and observe how it behaves differently - this is the problem I've changed this: // Resize the width of both the card wrapper and the infoTile in parallel. timeline.to(cardWrapper, 0.3, {left: offsetX, width: '1035px'}); timeline.to(infoTile, 0.3, {width: '1035px'},"-=0.3"); to this: // Resize the width of both the card wrapper and the infoTile in parallel. timeline.to(cardWrapper, 5, {left: offsetX, width: '1035px'}); timeline.to(infoTile, 5, {width: '1035px'},"-=5"); Hope this helps: http://codepen.io/anon/pen/yyygNZ Cheers.

Hi, I need help in improving my flaky transitions. Looking at the CodePen if you select the info button on the case tiles 2-4 they do not transition out and back in again very smoothly - its somewhat jumpy. Note: when adding an additional 3 or more cases the transitions now become really smooth - this is the behaviour I'm after. As usual any help would be great. Cheers.

This is the latest and greatest: http://codepen.io/anon/pen/yyygNZ where I've fixed the bug I previously mentioned. Still looking for a single timeline solution though.

I want to simplify what I've done and I'm convinced I can do it using a single timeline and maybe use a label. Having two timelines is introducing bugs. To reproduce do the following by selecting the same case each time: info > person > exit > info ( select info on the same case as before) As you can see it's vanished This wouldn't occur with a single timeline. I can put in a fix but it's going down the wrong path. I'm actually using the function you kindly provided.

Hi Guys, I'm not sure how to do this but is there a way to only have a single timeline in my demo, for example I'm creating two timelines where one would be better. timeline = new TimelineMax(); and tl = new TimelineMax(); // I would like to remove this one The tricky part is when doing a timeline.reverse() after toggling between info and person a number of times, I wouldn't want to see all of that toggling whilst the animation is reversing. Any ideas would be greatly appreciated. Cheers.

Hi Diaco.AW Thanks for that. Cheer.

This is the latest version: http://codepen.io/anon/pen/yyygNZ?editors=101 I think the fade could be improved if you have any suggestions? Cheers.

No. Case will keep both both info and person buttons. Info will have a new button called person and person will have a new button called info that way you can transition from info to person and person to info.