
Effeckt.css - apunic
http://h5bp.github.io/Effeckt.css/dist/
======
paulirish
A little bit of background on Effeckt: The idea is we need reusable
transitions and animations [0], all classy but most importantly they must
perform well on mobile. The project is still very much a WIP, and as some
comments below indicate, there are still janky interactions that are
unacceptable. We're looking at integrating something like Topcoat's Benchmark
server [1] to have CI setup for CSS performance regression testing. Identify
and improve (or cull) any effects that are inappropriately slow.

The project started over on lazyweb-requests [2] and Chris Coyier has led
development of the project from early on. It's a very open and community-
driven project, so there are plenty of opportunities for everyone to get
involved and move things. Lastly, the readme [3] helps explain a lot of the
goals and ideas of the project.

[0] [http://youtu.be/Qc40YDFA4Bg](http://youtu.be/Qc40YDFA4Bg)

[1] [http://bench.topcoat.io/](http://bench.topcoat.io/)

[2] [https://github.com/h5bp/lazyweb-
requests/issues/122](https://github.com/h5bp/lazyweb-requests/issues/122)

[3]
[https://github.com/h5bp/Effeckt.css#readme](https://github.com/h5bp/Effeckt.css#readme)

------
dclowd9901
Since none of the comments here are outright positive, let me be the first to
say 'holy shit, dat Make Way! modal transition!'

I love open source.

~~~
sker
That was the one that got my attention too.

How long until people start using similar effects to turn their single-page
web app into a multi-page web app? Similar to Linux 3D desktop, compiz and the
like.

~~~
tvararu
I've found jmpress[1] to be indispensable in this regard. Such designs have
been perfectly plausible for a while, mobile friendly and everything.

[1]
[http://jmpressjs.github.io/jmpress.js/](http://jmpressjs.github.io/jmpress.js/)

~~~
sker
That's much better implemented than I expected. Thanks for the link, I'll see
if I can find a use for it.

------
ChikkaChiChi
I understand that this sort of thing isn't for everyone, but the level of
trolling negativity in this thread is on par with Slashdot.

If you are somehow disappointed that clicking on a link to something that
defines itself as CSS Effects (it's there in the name) and you ended up on a
page with CSS animations...you are a clod.

------
tnash
Is the modal text really blurry for anyone else, or am I going insane?

~~~
adamzegelin
Blurry for me to. Safari 6.0.5, Mac.

It's the combination of -webkit-transform and -webkit-backface-visibility that
causes the blurriness. Wild guess: those attributes turn on 3D acceleration,
and rendering is incorrectly offset by .5 pixels.

~~~
andrewgleave
Setting -webkit-perspective can also trigger aliasing on transformed elements.
24 ways has a good intro to 3D transforms:

[http://24ways.org/2010/intro-to-
css-3d-transforms/](http://24ways.org/2010/intro-to-css-3d-transforms/)

------
gtaylor
Looks neat, but some of these animations run pretty slow on my i7 running
Chromium on Linux. I've got an Radeon 5870 with proprietary drivers, and I
understand that Chromium's acceleration situation is weird, but I guess I was
discouraged to see it struggle.

------
egonschiele
The placeholder images you use for captions are getting scaled up so they look
very blurry for me. Might be better to get bigger images and have them scale
down? placehold.it also allows you to specify your own text there by passing
in the `text` parameter.

This library looks great!

------
dhotson
Very cool!

I've been playing around with an animation concept for submitting a note:
[http://dhotson.github.io/envelope/](http://dhotson.github.io/envelope/) .. is
it too much? :-)

~~~
weavie
I'm not seeing any animation?

~~~
Cederfjard
Try WebKit.

~~~
jarek
"I'm not seeing any animation?" "Try IE6," only a decade later.

------
jarek
And here I just want stuff to happen fast

~~~
mxxx
hahaha

------
Kiro
It says it's performant but for me it's laggy compared to
[http://tympanus.net/Development/ModalWindowEffects/](http://tympanus.net/Development/ModalWindowEffects/)

Why is that?

~~~
stayclassytally
Isn't it the exact same thing? I thought the idea was the this library was a
collection of other ideas.

------
RodericDay
"Ever notice how small flourishes and subtle transitions dramatically
increases the value of the experience you enjoy with an app or site?"

:(

------
kbrackbill
Everything is smooth and looks great in Chromium, but the whole page is
sluggish in Firefox (on linux at least, and usually firefox on windows is
worse).

This has been generally true in my experience playing with CSS animations. Are
there any tricks to optimize stuff like this in Firefox, or is it just an area
where Chromium is still way far ahead in performance?

~~~
agildehaus
Feels snappy to me on Firefox/Win32. Tremendously sluggish on Chrome on my
Nexus4 though.

~~~
Xephyrous
Also feels snappy to me on Firefox/Xubuntu

~~~
kbrackbill
Hmm, maybe it's just a problem with my setup then.

------
bsaul
I love the blur behind modal. On my Chrome the blur effect starts after the
modal is displayed. I suggest that you make it progressive, inside the same
animation as the background turning to gray (not sure it's possible though).

~~~
jalada
Doesn't work at all in Firefox :(

~~~
spyder
And for me it crashing the tab in chrome.

~~~
kaushikt
It actually works pretty cool for me on Chrome.

------
mrinterweb
Performance was not quite on par with other CSS3 animations I have seen on my
Nexus 4. I think part of the perceived performance issue may have been the
artificial 300ms delay android adds after press/click.

------
kaushikt
The scroll effects reminds me of Stroll.js [http://lab.hakim.se/scroll-
effects/](http://lab.hakim.se/scroll-effects/)

Amazing work you guys. Fork - Contribute

~~~
jcomis
They attribute it to that page exactly right at the top of the section.

~~~
kaushikt
Yeah, i didnt notice that. Thanks.

------
ArekDymalski
This is amazing. As a form of thank you let me share a glitch which I noticed
on latest Chrome in Windows 8
[http://i.imgur.com/bRHRBK6.jpg](http://i.imgur.com/bRHRBK6.jpg) As you can
see there are no scrollbars for the lists and weird artifact is visible on the
middle list. This doesn't happen on IE 10. Also,some of the effects start with
a noticeable delay (but work smoothly).

------
eterpstra
From the site:

"Ever notice how small flourishes and subtle transitions dramatically
increases the value of the experience you enjoy with an app or site?"

I agree that a very slight fade or slide can help reduce the jarring effect of
a contextual transition (such as the appearance of a modal, or a menu), but
what value is added by the not-so-subtle effects like the 3D transforms (that
incidentally cripple mobile devices and older browsers)?

~~~
jarek
There's no value. It's basically junk food. Once someone comes up with the
chemical/library, it's easy to include them in your product. It's noticeable,
users like it, it provides straightforward talking points for any press
("beautiful"), it's an easy sell.

But there's no substance. I don't know about others, but when I read a
physical book it's not for the page turn experience.

------
emehrkay
The modals barely work in chrome on this HTC one. However, everything works
beautifullyon an iPhone 4s. When will mobile chrome catch up?

~~~
at-fates-hands
Pretty much any CSS3 rendering on Chrome sucks. Both on their mobile as well
as desktop browser. I've really been let down on how bad embedded fonts look
and how poorly transitions, opacity and other CSS3 properties work.

I'm still perplexed on why they haven't figured this out when Firefox doesn't
seem to have the same issues.

------
drawkbox
I wonder if this is part of stroll.js or inspired by or vice versa:
[https://github.com/hakimel/stroll.js](https://github.com/hakimel/stroll.js)
demo page: [http://lab.hakim.se/scroll-effects/](http://lab.hakim.se/scroll-
effects/) hakim.se has lots of cool stuff like that.

~~~
dbaupp
Quite a few of them have "Source: Hakim El Hattab" linking to
[http://lab.hakim.se/effeckt/](http://lab.hakim.se/effeckt/) (which is dead, I
filed
[https://github.com/h5bp/Effeckt.css/issues/93](https://github.com/h5bp/Effeckt.css/issues/93)).

------
eob
Very cool!

Side comment: one problem with modern web apps is JavaScript bloat. And one
pressure on libraries is to keep growing. These two things seem to be at odds.
It would be nice if someone created some kind of { CSS, js, HTML } build
system that allows components to be built and packages separately.

~~~
skw
I'm not entirely sure what you mean? Things like bower and component already
fulfil these roles.

~~~
fantnn
I think he means being able to pick and choose exactly what part of libraries
one would need; with something like jquery most sites are only using a
fraction of jquery methods

------
tehwebguy
Navigation: Left Push is the best CSS "drawer" I've seen on iOS so far. It's
choppy coming in but perfect going back out on this page.

Do you think it has to do with the number of elements on the content page?
I'll make another demo to test it out later, just on my phone now.

------
tsenkov
Great job. What is the licensing on Effekt.css? (I couldn't find it in the
repo or the demo page)

~~~
paulirish
MIT or whatever. We haven't gotten there yet... we haven't really launched per
say. :)

~~~
notdan
I would love to use this now, but can't until there is a license. Would love
to see something added soon. MIT would be great.

------
lifeformed
The Scroll effects were a little too distracting for me, but the rest were
pretty cool!

------
GoldfishCRM
Hakim you the man. An other great swedish developer delivers.

------
PhilipA
It runs a bit slow on my iPhone 4S, especially the list effects. Are anyone
else experiencing lag on their mobile phones as well?

~~~
jessedhillon
Yes, it slows Safari to a crawl and eventually the browser crashes or is
killed.

~~~
PhilipA
I tried it in Chrome, and it doesn't kill it, but it is quite slow.

Amazing that a 800mz processor in old time could run complex 3d-games, but
changing DOM and CSS seems to be much harder calculations...

------
airencracken
Ugh. It's like people decided the solution to crappy flash, was to make stupid
flash stuff native in the browser.

~~~
ChikkaChiChi
Because you're supposed to use all the things on every page you ever build
using this, right?

I'm shocked you were able to see this in Lynx. Who needs the web gussied up
with photos and colors?

~~~
pbhjpbhj
Lynx does colour and images IIRC.

------
hardwaresofton
This is the most awesome thing I have seen today. Instantly shared with some
of my comrades in web arms.

Keep up the awesome work

------
arms
Very nice. I was looking for something similar to this a couple of days ago.
This will fit the bill nicely :)

------
fmax30
The Library seems awesome , but the off screen navigation bar feels a little
jerky when turned on.

------
spinachthrow
Is it just me or is this kinda blurry?

Pretty dope though, that from top=>tilt fall was pretty exciting

------
anuragramdasan
This is cool. Makes the prototype web page design easier for the back-end
developer.

------
kayoone
great stuff, sadly its almost unusable on mobile (tested with a quadcore HTC
One).

~~~
vikramhaer
Tested it on my HTC One as well, seems fairly responsive to me. Not native-
level smooth, but for what it is, worked better than expected.

------
cdhack
Looks great, smooth to use, attractive 3D view. Can't wait to try it out!

------
jv22222
animate.css has been around for quite some time and is also very impressive:
[http://daneden.me/animate/](http://daneden.me/animate/)

------
shaydoc
Really well done on this, the power of open source is unreal.....

------
be5invis
Tested on IEX Works well

(unlike zepto, which uses the evil __proto__)

------
RoryH
for ROFL's and LOL's open the page in IE8

~~~
acorkery
not sure what the opposite of graceful degradation is, but that's pretty
close! They're right not to support it though.

------
joelle
This is so dang cool! I love it :-)

------
it_learnses
sorry if this sounds stupid, but are all the effects done using only CSS?

~~~
eekfuh
They use some JS to add and remove classes, but they are all either CSS
transitions or CSS animations.

------
novaleaf
doesn't work with ie8 or below,

looks like it could with some tweaking though.

------
BaconJuice
no love for IE8? :( Saved anyways, Thanks for the great share!

~~~
DavidBradbury
No. No love for you.

------
ronaldsvilcins
Love it!

