helcim
helcim

Reputation: 819

Animation support in front-end MV* frameworks

Which front-end javascript MV* framework would you recommend for an animation heavy website (animated page elements, transitions, parallax scrolling etc.)? My first impression is that it's easiest (spending least time, achieving effect with most concise code, having best documentation) to do in angular.js. What were your experiences?

P.S. The choice of tags is of course limited to 5, so if anybody could suggest any other framework I would be interested in that as well.

Upvotes: 0

Views: 333

Answers (2)

chrishollinworth
chrishollinworth

Reputation: 307

I've found the combination of angularjs and angular-ui (twitter bootstrap in angular) great for building in ui animations. I can highly recommend it.

Working with the ngAnimate module works really nicely and provide very user friendly interfaces.

For a simple starter guide, this is great

http://www.divshot.com/blog/tips-and-tricks/angular-1-2-and-animate-css

And for a more comprehensive guide try

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

Upvotes: 1

addyo
addyo

Reputation: 2918

I work on the Chrome team and graphics performance is often something that needs particular care. There's ultimately a trade-off between simplicity (e.g how much a framework or library can do for you) vs. how close to the grain you stay in order to keep the experience of your animations fast. Ideally, you should try to keep as much of your animation related code directly in CSS rather than having JS (e.g a directive or library) trigger those animations for you. I would in general remember that (cross-browser) the browser can animate 4 things quite cheaply (position, scale, rotation and opacity) for you. Try to use these where possible. I would also take a look at some of the examples in http://h5bp.github.io/Effeckt.css/ as you'd be surprised how far you can get without making animations part of your reasoning for selecting an MVC framework.

Upvotes: 2

Related Questions