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.

Hi Jonathan, Thanks for the quick reply. Essentially I want a shortcut whereby I can go from looking at 'info' to 'person' and vice versa. At present we have this: case <-> info (case to info and back again) case <-> person ( case to person and back again) What I would like is this: case <-> info <-> person <-> case You can read this left-to-right and right-to-left. Does that make sense?

Hey, I hope you can view my latest CodePen: http://codepen.io/anon/pen/qEBzNN- it works great on Chrome & FF so far. I need some advice on how I can go from 'info' to 'person' on the same case tile and vice versa. The advice I need is how to structure the HTML to allow this transition. Any pointers would be very helpful. Cheers, Paul

Yes, this will help a lot and thank you. For now

No I don't get any issues/errors in CodePen whatsoever. I'm somewhat concerned you get errors and I don't. I've tested it in Chrome and FF and no problem. I've just created a new account or so I thought and it's allocated me an account from one I created in 2008. I was a Flex developer back then hence the name flexnewbie - I'm now Javascript developer so it's no longer relevant. I guess you recognised me from my email address which hasn't changed. Anyway, the reason I said it will not work in IE10/11 is because of this: http://caniuse.com/#search=css3it clearly states: "Partial support in IE refers to not supporting the transform-style: preserve-3d property. This prevents nesting 3D transformed elements." On line 3 (JS) of http://codepen.io/GreenSock/pen/yzahJ is has: TweenLite.set(".card", {transformStyle:"preserve-3d"}); Therefore I naturally presumed it wouldn't be compatible. I must admit I haven't tested it in an IE. I'll take your word that it works which is great news. Cheers, Paul

Hi, I need some advice and I hope you guys can help. Please view the demo before proceeding. I have a number of tiles. On each tile you can view 1 of 2 things, some info and some personal details. When selecting the info button it will take you to the info panel, when selecting the person button it will take you to the person panel. I need a way of going from the person panel to the info panel and vice versa. To be clear here's the flow: tile -> info -> tile tile -> person -> tile tile -> info <--> person -> tile (not implemented) tile -> person <--> info -> tile (not implemented) The questions are: 1. I need a way to go from the person panel to the info panel and back again - what's the best approach, can it all be kept in the same timeline? 2. The transitions could be improved but I am stuck with IE10 so I can't use http://codepen.io/GreenSock/pen/yzahJany suggestions on how to do things differently? What I've done is a good starting point but it's no where near right. Cheers, Paul