Effects resources

[AaronLayton]

All the effect resources listed so far, any below if you know of any more . Lets get this down to a list of effect names to implement

Button / Touch effects

• tympanus.net/Development/PFold/index2.html
• leaverou.github.io/animatable/
• lab.hakim.se/ladda/
• http://tympanus.net/Tutorials/OriginalHoverEffects/index9.html - would work for Modal aswell
• http://tympanus.net/Development/CreativeButtons/

Modals

• tympanus.net/Development/ModalWindowEffects/
• lab.hakim.se/avgrund/

Page transitions

• tympanus.net/Development/PageTransitions/
• lab.hakim.se/kontext/
• lab.hakim.se/meny/

Other

• http://dabblet.com/gist/3715742

[i-like-robots]

Multi-purpose animations: http://daneden.me/animate/

[jnowland]

http://www.ui-transitions.com while it's an old link would be worth looking at for a fair few of these.

[SaraSoueidan]

My Windows 8 animations were really popular : http://sarasoueidan.com/blog/windows8-animations/

[SaraSoueidan]

I've also made these too: UI Transitions: Creative Add/Remove Effects for List Items : http://sarasoueidan.com/blog/ui-transitions-creative-add-remove-effects-for-list-items/

[chriscoyier]

There are all excellent ideas.

• http://css-tricks.com/transitional-interfaces-coded/
• http://lab.hakim.se/scroll-effects/

[foleyatwork]

+1 for Ladda and Tympanus modal windows.

I really like Hakim's work and all the other stuff that's been posted on this page, but they all seem to draw attention to the animations and transitions themselves. The real goal of a library like this should be to help people digest the content on a page. A little more subtlety is necessary IMHO.

I threw together this rough example to try and explain what I'm thinking. http://codepen.io/foleyatwork/pen/deDEz (realized after I posted this that Tympanus modal windows are pretty similar)

[chriscoyier]

More very similar modals :: http://codepen.io/dimsemenov/pen/GAIkt

[grayghostvisuals]

Tabs baby…tabs ping @aarondo
http://git.aaronlumsden.com/tabulous.js

[mente]

Another great animation for left-side menu http://tympanus.net/Tutorials/YouTubeLeftSideMenu/

[mente]

And one more from the same guys http://tympanus.net/Development/FullscreenLayoutPageTransitions/

[paulirish]

I added screenshots to a bunch of the comments here. 💃

[mente]

Not sure whether this effect should be included, but it's a common pattern for mobile websites.
http://www.inserthtml.com/demo/header-animations/example-2/

[anissen]

ElementTransitions.js:

This repository is a wrapper around the code provided by a codrops article on page transitions. Their code has been modified to allow more than one animatable element per page. Additionally, you can now add transitions straight from html tags.

[AaronLayton]

I had a search around for a few more, some are already here so here are the 2 others I found

http://tympanus.net/Development/GridLoadingEffects/index.html - This would need a whole other set of pages for demo'ing though

http://www.minimamente.com/magic-css3-animations/

[ahmadalfy]

Great select concept

http://codepen.io/soulrider911/pen/bJqkC

[davidpett]

here are all of the penner easing equations as SCSS variables using the cubic-bezier method:
https://gist.github.com/davidpett/5862318

[paulirish]

Probably more important than the effects that have CSS equivalents written
for them are all the ones that are well considered but havent been ported
to the web... some of those in this tumblr: http://ui-animations.tumblr.com/

On Fri, Jul 26, 2013 at 7:54 AM, David Pett notifications@github.comwrote:

here are all of the penner easing equations as SCSS variables using the
cubic-bezier method:
https://gist.github.com/davidpett/5862318

—
Reply to this email directly or view it on GitHubhttps://github.com//issues/8#issuecomment-21600067
.

[SaraSoueidan]

@paulirish Mac OS X's genie effect can be replicated using CSS custom shaders, I already discussed this with Adobe's Mr. Alan Greenblatt, who said he'll get into it as soon as he can. I was going to do it as a side project with his help, until I realized WebGL shaders aren't as fun as I thought, probably because there aren't many good resources to learn them well yet + it's a little trickier than I thought as the sin wave that (probably) causes the "shrinking wave effect" differs according to the location of the window on the screen.

I hope some CSS Shaders Ninja replicates it some time!

[chriscoyier]

Moving the the best of this thread into a master list that's easier to know what to do.