Effeckt.css | Hacker News Reader

Effeckt.css

h5bp.github.io

472 pointsapunic95 comments

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

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

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

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

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.

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.

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/

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

That page makes me dizzy. I understand they are abusing it.

On a related note, there's http://www.voodoojs.com/ (it seems to be somewhat broken right now).

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.

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

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.

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/

Same here, on Chrome on Windows (haven't noticed when I first looked at the example on a Mac). Also, only some effects leave the text blury. "Let me in" for example, doesn't.

Only the last scroll example on the right, for me.

nope.. same here. chromebox.

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.

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!

Very cool!

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

Nice job. But i think i think its a little too much :)

Looks cool, but yes, I'd say too much :)

You should mention it's webkit only.

It's not too much. This is exactly the sort of thing that concepts are designed to be. Kudos.

I'm not seeing any animation?

Try WebKit.

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

Ah ok. Firefox bad. Chrome good...

This is awesome!

And here I just want stuff to happen fast

hahaha

It says it's performant but for me it's laggy compared to http://tympanus.net/Development/ModalWindowEffects/

Why is that?

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

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

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?

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

Also feels snappy to me on Firefox/Xubuntu

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

Yes, some animations are sluggish for me in Firefox as well. (Mozilla/5.0 (X11; Linux x86_64; rv:22.0) Gecko/20100101 Firefox/22.0).

I'm using current Nvidia closed driver with a mobile chipset.

You could try pulling up our profiler (Shift+F5).

I didn't experience any jankiness and wasn't able to find anything by profiling either.

I couldn't find anything in the profiler either. I did narrow it down a bit though. Most of what I was experiencing was sluggishness in scrolling around the page, not in the animations themselves. I realized that in particular, scolling around the top of the page where all the buttons for the modals are. If I hide all of the buttons, the page works great. So somehow something really bad is happening trying to render a bunch of buttons (I made a test page with a few hundred buttons on it and it hung for a few minutes when I tried to scroll). That sounds pretty crazy, so I'm going to assume this is something funky with my configuration and not with Firefox.

Once I got past that, I'm really impressed with how well these animations perform.

(By the way, I haven't used the Firefox dev tools in a while, and they've come a long way! I'll switch back from chrome soon if they keep improving at this rate)

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).

Doesn't work at all in Firefox :(

And for me it crashing the tab in chrome.

It actually works pretty cool for me on Chrome.

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.

The scroll effects reminds me of Stroll.js http://lab.hakim.se/scroll-effects/

Amazing work you guys. Fork - Contribute

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

Yeah, i didnt notice that. Thanks.

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 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).

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)?

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.

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

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.

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

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

He is mentioned on this side https://github.com/h5bp/Effeckt.css

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.

Well, component.io (http://component.io) is such a system. You have a choice of routers (page.js is a very express-like option that works well), and you can pick and choose what other components to build into your application.

Components are self-contained packages of html/css/js based on CommonJS modules and compiled using node.

I use grunt-component-build along with grunt-contrib-watch to rebuild the css/js files on each change.

I've been using W3C standards (DOM) as much as possible to keep third-party dependencies at a minimum, with shimming where required for cross browser support.

An effects library that doesn't require jQuery would be a good addition to that environment. (Nothing against jQuery, but I want to leave out a selector engine on platforms that don't need it and just use the support in the browser.)

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

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

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.

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

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

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.

Just saw license was added, this is awesome.

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

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

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

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

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...

Didn't experience that myself. It isn't native looking, but a good 80-90% of the transitions were acceptable. Lists were rough, but not unusable. [iPhone 4S]

It was a bit slow on the ipad2, but really flies on desktop chrome.

There's a bit of jankiness on the modals though, as the scrollbar disappears when the modal appears, which causes a reflow of the page body.

Yeah running on iOS was brutally slow on first load, reloading page fixed everything except list effects.

Still there is the elephant-in-the-room 300ms issue, but overall impressive effort, we need more of this...

Yeah i'm getting flicker with almost all of these effects on my 4S.

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

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?

Lynx does colour and images IIRC.

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

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

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

Is it just me or is this kinda blurry?

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

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

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

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.

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

animate.css has been around for quite some time and is also very impressive: http://daneden.me/animate/

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

Tested on IEX Works well

(unlike zepto, which uses the evil __proto__)

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

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

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

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

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

doesn't work with ie8 or below,

looks like it could with some tweaking though.

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

No. No love for you.

Love it!

Reply on news.ycombinator.com