KuraFire Network

Latest addition: Jan 19, 2007: Times are changing

Log

FACE RFC 1: feedback wanted for Beta 2!

· By Faruk Ateş on Jan 30, 2006 · 15 comments ·

Subject level: Intermediate

FACE has been in beta for a while now, and while we're working on getting it to a next release, we're faced (no pun intended) with a slight problem: what should we put into the next release and what not? Which features would the userbase want most?

While we can come up with a variety of answers of our own (and we have), we do see this as a good time to ask you, the userbase, for input, so please share your thoughts with us.

I'll start it off with a list of things we're thinking of or are definitely implementing for the next release, which, as the title has given away, will be Beta 2:

  • More triggers:
    • onClick
    • onDblClick
    • onMouseOut
    • onFocus
    • onBlur
  • Ability to add a regular class to the FACE Load Element (the one with id="enhance"); obviously only makes sense for FACE animations that use the Child Elements construct node, as the class attribute itself in "Self" mode gets overwritten by the animation loop.
  • Small improvements to the code (which currently make it even more compact, just barely hitting 4kb, but extra features that are yet to be built in will make it a little bigger again).
  • An easy way to let an animation loop backwards (for instance, a normal run on onFocus and a backwards run on onBlur).
  • A fix for the "Flash of un-FACE'd content" - which is to say, a way to make hidden content not show up and then disappear in an undesirable flicker in your browser, as you can see quite clearly on my Home page.

Also, there will be a fix for the Opera 8.x Crash bug, but while 4-5 people have complained about FACE slowing down their computer or hogging their memory, we've received no return feedback from any of them to conduct a search into the matter, to find out what the real cause is. Also, with more than 40.000 unique visitors to the FACE Project page, even the 1-in-100 rule of thumb (on people who complain vs. people who are actually suffering from it) means there's only a rough 1% of people actually seeing this problem, and perhaps (or likely?) even less than that.

Now, some of the above ideas are more complex to easily implement than others, so some of them might not make the Beta 2 release. That is, unless they get a massive amount of requests in the comments below. The same goes for your own ideas for FACE, if you have them, list them please! I'll add them to the list above if both Tim and I like it well enough (and if not, remember that you're free to alter FACE for your own purposes).

On a related note: have you already implemented FACE on a site? Let us know!

Bookmark: Newsvine del.icio.us Digg

Comments

15 comments

#1 · J Richmond · Jan 30, 2006 (00:26)

My vote is definitly for more triggers (specifically onclick). Although, it probably would be nice to get rid of the "Flash of un-FACE'd content".

Great work! Thanks!

#2 · Bruno Girin · Jan 30, 2006 (03:36)

This is a great tool! As you demonstrate with your examples, it is simple but allows you to do quite complex animations. Nice!

I second the addition of extra triggers. I also have a few of suggestions:

Allow the animation to loop and only end with a trigger. For example, start with onFocus, end with onBlur.

Allow the animated elements to have several space separated classes. In practice, in your code, if you had an element with class="anim otherclass", you would change this to class="anim1 otherclass", "anim2 otherclass" while going through your anim loop. This would allow you to separate animation and styling classes in your CSS. It would also allow you to have several animations on the same element (eg one for onMouseOver, one for onMouseOut).

The ability to run an animation backwards, as you suggest, would be nice. Combined with the previous one, this would allow you to have the normal animation with onFocus and the reverse one with onBlur.

My £0.02

#3 · Cody · Jan 30, 2006 (07:32)

My thoughts:

1. "Flash of un-FACE'd content" fix
I'd be interested to see your fix, and if it is effective it would make the onload element actually useful for things that are unpractical with the flash.

2. looping animation would be very, very cool. start on mouse over, end on mouse out. Sexy.

3. more triggers. more triggers = more possibilities to use face.

4. code improvemnets to decrease size / cpu load

5. easy backwards loop

Thanks for your hardwork on FACE.

#4 · Julian · Jan 30, 2006 (08:22)

Right now, whenever you load a page with FACE, the final image is shown, and then animates from the beginning.

For example, something that is supposed to just fade in will flash into total view, then dissapear and fade in.

This could definetly be fixed, although I'm not sure how.

I'm using Mac OS X 10.4 and Safari 2.0.

#5 · Cody · Jan 30, 2006 (08:54)

Julian,

This is the "Flash of un-FACE'd content" talked about above. It's a known problem that isn't even unique to FACE, it effects most javascript uses of onload.

Apparently the FACE developers have a potential fix.

#6 · Matt Keogh · Feb 1, 2006 (15:39)

It would be great if the "timer" cursor would stop flickering while the animations take place. For me it kinda ruins the nice effects. Good luck with this though!

#7 · Faruk Ateş · Feb 1, 2006 (15:44)

Matt: what OS are you on? Which browser? What computer hardware? (cpu + mem)

#8 · Armand · Feb 7, 2006 (14:03)

How about animationpaths so you can give up the correct zy postions and it will either go to these points in a direct line or in a more curved line based on splines.

I have done this in scripts before so if you need the code for it please let me know

Armand

#9 · Resnumerica · Feb 11, 2006 (11:03)

Hi, nice effects... but hard for me to reproduce...

One thing would be nice, is to have ready 2 use pages..

Thanks !!!!

K

#10 · JasonMez · Feb 17, 2006 (21:29)

For us lazy folk, the FACE "generator" mentioned in the site would be cool even if minimal.

Another useful feature would be a standard for effect templates and a way to refer specifically to them no matter what the classname you insert them into (without manually making a new css file using that classname).

As for the things listed already, I'd love to see them implemented pretty much in the order you have them listed.

Cheers!

Jason

#11 · Wes DeBoer · May 14, 2006 (06:20)

I came up with a bit of a fix for the Flash of un-Faced'd content.

It's a simple matter of including the face css in to the html file after the default css file which allows the style of the face animation to override the default style. giving you the ability to display your content how you want on the initial display.

there is a single problem with this method and that is for people with javascript turned off, they will then only be given the later css that you probably styled to hide the content or place it in an odd position because the face.js won't load.

So in order to fix that use a js document.write() to include the face.css and then that css data will override the initial values of the regular css file but only for those browsers that have js turned on.

Ex:
style.css - assign how you want the content to look by default, you should've done this before doing any of the face stuff anyways.

div.test { background: #CCC; }

face.css - override the default style and add the style for each step of the animation


div.test { background: #000; } /* this will override the default style if added afterwards in the html and will hide the content or display it as the first step of the animation */
.box0 div.test { background: #111; }
.box1 div.test { background: #222; }
....
.box10 div.test { background: #CCC; }

index.html - include the two stylesheets

<link rel="stylesheet" href="style.css" />
< script type="text/javascript">
document.write('< link rel="stylesheet" href="face.css" />');
</ script>

be sure to include the js included css after the default css so that it will 'cascade' and override it.

this could be probably be cleaned up and maybe even extended to only include the face.css to certain browsers or to create different css for different browsers or even to block it from opera, though i haven't tried any of these ideas.

#12 · Tobie Langel · Jun 22, 2006 (02:30)

A port to Prototype and integration to script.aculo.us would be amazing!

#13 · abba bryant · Jun 28, 2006 (21:04)

I am thinking of porting this over to jquery. would that be a problem either with the current license or for personal reasons with you or Tim as the developers?

#14 · Dan · Jul 17, 2006 (15:43)

I definitely vote for fixing the "Flash of un-FACE'd" content. Not sure if Wes's fix works (#11) as I haven't tried it.

I also vote for any code optimizations.

Keep up the great work!

#15 · Ivanix Research · Jul 28, 2006 (00:42)

Great work! Just like to mention that your zip file does not contain the license information file (license.rtf).

All times are in CET. It is now 19:44.