search

h5bp / Effeckt.css

This repo is archived. Thanks!
http://h5bp.github.io/Effeckt.css
MIT License
10.87k stars 1.4k forks source link

Effects resources #8

Closed AaronLayton closed 11 years ago

AaronLayton commented 11 years ago

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

i-like-robots commented 11 years ago

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

jnowland commented 11 years ago

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

SaraSoueidan commented 11 years ago

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

SaraSoueidan commented 11 years ago

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 commented 11 years ago

There are all excellent ideas.

foleyatwork commented 11 years ago

+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 commented 11 years ago

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

grayghostvisuals commented 11 years ago

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

mente commented 11 years ago

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

mente commented 11 years ago

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

paulirish commented 11 years ago

I added screenshots to a bunch of the comments here. :dancer:

mente commented 11 years ago

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/ screen shot 2013-07-07 at 16 07 03

anissen commented 11 years ago

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 commented 11 years ago

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 grid

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

ahmadalfy commented 11 years ago

Great select concept

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

davidpett commented 11 years ago

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

paulirish commented 11 years ago

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/h5bp/Effeckt.css/issues/8#issuecomment-21600067 .

SaraSoueidan commented 11 years ago

@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 commented 11 years ago

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