Organize and expand animations

[adamdbradley]

Right now animations are not very organized. I'd like to create an animations folder within scss, then create different scss files depending on type.

Please use this issue to contribute any ideas and suggestions regarding:

• Animation css class naming convention
• How the scss files should be divided up within the animations folder
• Organizing platform specific animations
• Suggested animations that should come with Ionic by default

[adamdbradley]

Related #846 #686 #833 #616

[ajoslin]

Some ideas:

Prefix: use animate?

Platforms: use existing classes? Not sure if I like this idea.

.animate-slide-left-right {
  /* generic slide-left-right */
}
.platform-ios7 .animate-slide-left-right {
  /* add ios7 timing functions */
}

[mlynch]

I think one big thing that will help is discussion whether to push forward with ngAnimate or abandon it completely.

We were cool abandoning ngRoute when it didn't fit our needs. I think we are starting to do the same with ngAnimate.

The reality is ngAnimate makes for a nice API in JS, but it's a lot harder to build animations for it.

[alexbainbridge]

I cant add too much technical expertise on this, however I did find animations one of the most challenging bits to work out.

a) being able to add a button in a navbar with an action that would go left to right, even if the "expected" history based animation was meant to be right to left. e.g. a "home" button (slide-left-right needs to be able to be overridden)

b) Navigation from buttons in tab bars in general - as most of the navigation settings were on ion-nav-view - and wasn't sure that I could bind to animation= values and adjust this on a button by button basis (still unsolved!)

(Not asking for support on these issues, this isn't the right place for that, really just making a point that I have found, and continue to find, animations rather tricky to get right) (Especially with each view in its own template)

[PatrickJS]

+1 for optimised mobile hybrid animation module ionAnimate

[ajoslin]

Notes from our talk yesterday:

Have generic animations that work differently on different elements.

Prefix: unsure maybe animate-, maybe not.

.animate-slide-in-up {
  &.ng-enter, > .ng-enter {
   /* generic element definition, etc */
  }
}
.view.animate-slide-in-up {
  /* more specific to work with page changes */
}

[gastonbesada]

Animations-Transforms-Transitions: Animation and/or Transform for an object like a button or image. Transition for a state to other like a view or slideshow or toggle.

Some links should help: https://github.com/Hendrixer/ng-Fx https://github.com/h5bp/Effeckt.css/ http://daneden.github.io/animate.css/ http://jsperf.com/translate3d-vs-xy http://labs.bigroomstudios.com/libraries/animo-js https://famo.us/guides/dev/render-tree.html#modifiers https://famo.us/docs/0.1.1/transitions/Easing/ http://justinaguilar.com/animations/ http://tympanus.net/codrops/2013/11/05/animated-svg-icons-with-snap-svg/ http://www.alessioatzeni.com/CSS3-Cycle-Image-Slider/

[perrygovier]

Some related tickets regarding platform specific animations:

1508 #1502 #1443 #1507 #1504

Seems to be a high demand

[gastonbesada]

Related issue: https://github.com/driftyco/ionic/issues/1510

[DallanQ]

Something I like about Famous' approach to animation is I can control animations by specifying functions that return the values to change during the animation, rather than just firing up a tween. This control allows me to animate objects in response to user inputs, as described in this lesson: http://famo.us/university/famous-102/input/1/ It seems like it would be helpful for "nested scrolling" as shown in this video on google material design at 0:24 https://www.youtube.com/watch?v=Q8TXgCzxEnw and also in creating apps like paper https://www.youtube.com/watch?v=6jg-PlisAFc that respond to dragging.

What do you think? I'm pretty sure I can get ionic and famous to play side-by-side together. I dislike the official famous-angular bridge so I wrote my own to prove to myself that famous and angular could be integrated in a more sane way. So although I believe I could use ionic and famous side-by-side, I'd rather stick just with ionic if possible.

[perrygovier]

Moving feature requests from GH Issues to Trello. Please continue the discussion and vote for this and other issues that are important to you here: https://trello.com/c/9qKGqzMi/13-organize-and-expand-animations

[ionitron-bot[bot]]

Thanks for the issue! This issue is being locked to prevent comments that are not relevant to the original issue. If this is still an issue with the latest version of Ionic, please create a new issue and ensure the template is fully filled out.