Jump to content
Search Community

Improve my flaky resize transitions

flexnewbie test
Moderator Tag

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts

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.

 

 

See the Pen yyygNZ by anon (@anon) on CodePen

Link to comment
Share on other sites

Hey Flex,

 

Have you used the animation module before? There are a lot of built-in Angular directives that will automatically trigger an animation. You can streamline a lot of your code by using some conditional directives like:

Also, you might be better off creating a directive for each of your items/cases so you can have more control over what each one is doing.

 

I created an example showing how you can incorporate some of those built-in directives. I wasn't sure what you were trying to do with the MAX_NUMBER_VIEWABLE_TILES, so I just used a filter to limit the number of tiles based on the screen width.

 

Plunker Demo: http://plnkr.co/edit/yOtalOY51OusVZl5uGOU?p=preview

  • Like 1
Link to comment
Share on other sites

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: 

 

Cheers.

Link to comment
Share on other sites

Prepending/appending dummy elements to the container won't interfere with the repeater or your data. Although it might mess up some of your logic if you are tracking elements by their $index instead of an id. But I don't think that approach is necessary after messing around with your codepen.

 

I didn't use the animation module, but I did use ng-class to sort out which tiles to hide, which cut out a lot of code. I couldn't get consistent positioning using scrollLeft, so I ended up using getBoundingClientRect. Lots of weird behaviors just kept popping up, but I think I got it fixed.

 

Another thing I noticed is that you were rotating the .card div instead of the individual card faces, which won't work in IE. Rotating the .cardface divs with a relative angle fixes that.

 

CodePen: 

See the Pen vENgOO by osublake (@osublake) on CodePen

 

 

  • Like 1
Link to comment
Share on other sites

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: 

See the Pen myeqVV by anon (@anon) on CodePen

Link to comment
Share on other sites

The best way to setup what you have right now is probably to put the info and person tile inside an ng-switch. To control the switch, create a new scope variable called selectedType.

 

How is it going to transition between an info and person tile, flip, fade, etc? Once I know the type of transition, I can offer more detailed advice.

<div class="cardWrapper">
  <div class="card">
              
    <div ng-switch="selectedType" class="cardFace backTile">

      <div ng-switch-when="info" class="infoTile">
        info tile...
      </div>

      <div ng-switch-when="person" class="personTile">
        person tile...
      </div>

    </div>

    <div class="cardFace caseTile">
      case tile...
    </div>

  </div>
</div>
Link to comment
Share on other sites

Things aren't going to well.

 

Here's the latest CodePen: 

See the Pen myeqVV by anon (@anon) on CodePen

 

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.

Link to comment
Share on other sites

Good job!
 
With the way it is setup now, creating a fade transition between the info and person tile won't look right because the ng-switch is only showing 1 element at a time. This would leave the back tile completely blank while one tile is being removed and the other is being added.
 
If you use the animation module, you can have 2 elements being shown in the ng-switch during a transition, the element being removed (leave animation), and the element being added (enter animation). 
 
I created a class for the info and person tiles called switch-tile. It is positioned absolute so that both tiles are at the same position while visible, and not stacked on top of each other. The .switch-tile animation module will now animate these tiles at the same time when they are are being added/removed from the back tile.
 
I also noticed that if you quickly press the info and person buttons on the case tile, it can mess up the resize/flip animation. I added ng-disabled to the case tile's buttons, which is controlled by calling the setTransitioning function. Because this function is called by the timeline, it uses a $timeout to make Angular update the scope. Here's a post I made about getting GreenSock to work with Angular by using $timeout.
 
CodePen:

See the Pen pvgvYv by osublake (@osublake) on CodePen

  • Like 2
Link to comment
Share on other sites

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

Link to comment
Share on other sites

I think Firefox is becoming the new IE. I've noticed lots of unexpected behaviors when dealing with it lately. Jitters and jaggies everywhere.

 

I've never really tested my animations, but Yearofmoo said to use a timeout instead of using GSAP's onComplete to call the done function. I think he wrote the animation module, so he should know.

 

http://www.yearofmoo.com/2013/08/remastered-animation-in-angularjs-1-2.html#testing-animations

http://www.yearofmoo.com/2013/05/enhanced-animations-in-angularjs.html#greensock-integration

 

  • Like 1
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...