Famous Engine – JavaScript library for animations and interfaces | Hacker News Reader

Famous Engine – JavaScript library for animations and interfaces

famous.org

235 pointsdumindunuwan87 comments

The bit that I find most impressive is the mixed mode demo ... http://famous.org/learn/MixedMode/index.html ... Putting an iFrame on a 3D model and still being about to use the page that's loaded is cool. The problem with that is that there are so few use cases where you'd actually want to do that.

Yeah, I found this pretty cool as well. Plus from inside the iframe you can keep navigating to the Learn tutorial page over and over again inside laptops and create a cool snake like laptop, lol.

Here is an example if you don't feel like doing it yourself: http://i.gyazo.com/bf87e7b7fd98cab95f654459b4945643.png

2 years ago... http://learningthreejs.com/blog/2013/04/30/closing-the-gap-b...

You should have raised 30mm in funding for three.js ;-)

I still use three.js for most of my visualization projects. That is some good tech. Ashes of Papervision risen better.

Or the "defunct" voodoo.js that has been abandoned because lack of public interest.

https://github.com/brentongunning/voodoo.js

For fun I checked out the mixed-mode demo and navigated in the inner browser to the mixed-mode demo, then within that inner-browser I navigated to mixed-mode demo again. It kinda stutters as it first loads, but otherwise seems to work great. Really interesting! Screenshot: http://i.imgur.com/ipyxFE6.png

I tried to build a website with the "old" famo.us, but it was slow going, once you'd got past the initial setup. You're on your own for widgets!

Also, "famous" or "famo.us" is a BAD name. Sorry, but you can't google for help or tutorials. Google for "famous websites" or "famous tutorials", see what you get. :-/

slow going.

Famous Engine is a complete rewrite.

0.3 was doing a lot of unnecessary matrix multiplications on a frame by frame basis. It also produced a lot of garbage, resulting into a frame drop every time the GC ran.

Famous Engine produces basically no garbage at all. It has an event based system for updating transforms.

I apologize for your bad experience with "old" famous, but please keep in mind that we started from scratch.

(For disclosure I am an employee of famous)

That's interesting, but none of the complaints the poster you're responding to brought up had to do with matrix multiplication or garbage collection.

I did some work with 'old' famo.us, and boy was it slow going. Then again, at the time I was relatively new to javascipt, so understanding scope, callbacks and such was hard at the time.

Now its popping up again. Time to take it for another run. The problem in the past was a small/inactive/detached community imo, if there was an active community behind it, it would be amazing.

Also, the famo.us devs seem to expect a lot of community stuff to be happening in or around their offices, which is unfair to us overseas guys who can't go to a famo.us demo day in their office.

You'll get better results searching for "famo tutorials".

Maybe they should change the name to Famo Engine.

Has anyone actually managed to loop animations on the web without putting the CPU on fire?

It was my task recently to optimize some animations (done with Web Animations polyfill) and even though all the profilers showed that CPU is doing almost nothing (GPU animated all the stuff) Chrome was using ~25% of CPU all the time which resulted in a noisy fan after a minute or two.

I feel like I’m missing something here, I believe there must be a way to do it…

You want to use GPU-based skinning or similar techniques for best performance.

Also are you limiting your framerate (not framework, sorry) to something reasonable?

Also I recommend not creating too many objects to be GC'ed.

What do you mean by limiting my framework?

Yeah, true, I don’t create any objects in that animation actually. I just do opacity animations (from 0 to 1 and vice versa) and some transforms sometimes (which are supposed to be 'cheap' according to some resources on the internet).

Framerate, sorry. Just make sure it isn't updating constantly. Can you share an example btw?

Same here on Firefox 31 on Windows 8.1. 25% used on my dual-core i5 with HT. This just sucks.

Years ago I added a 'snow' animation JS libary to a custom website which let little snow flakes drop during winter time. All just for fun. It turned out to be fun only for a few days until I got the first complaints about users not being able to use their computers anymore and mobile devices being barely able to scroll anything.

I also believe that there must be a better way for simple animations.

The site used 100% of my old Core 2 Duo's CPU on Iceweasel / Jessie; brought the machine to its knees. LOL js.

> until I got the first complaints about users not being able to use their computers anymore

They got snow in their browser, and they still complained. People are so ungrateful.

Seriously though, this animation sounds fun and neat.

Here's how I've achieved that cheesy 90s spinning effect in the past:

    @keyframes spin {
      0% { transform: scaleX(1); }
      50% { transform: scaleX(-1); }
      100% { transform: scaleX(1); }
    }
    .spin {
      animation: spin ease-in-out 6s infinite;
    }

All done on the GPU as far as I can tell...

The only satisfactory way to do web animation I've found is to do it 100% in css by toggling classes. As soon as the JS interpreter gets involved in any way, things go south.

Right, but the point is even GPU-optimized animations in the browser seem to tax the CPU. It's something I've experienced as well.

Even when they're controlled/computed/whatever purely through css as above? Maybe I've just been lucky in my limited experience with looping them infinitely like this.

Could you render the animation, and play it back as a gif?

That's the traditional way to do it afaik, just tile a gif over the whole viewport.

The landing page isn't janky this time around--that's an improvement. I was hoodwinked by the last media blitz, so I'm very shy to play with Famo.us a second time around. Elephant in the room: What has been learned and improved from the previous false-start(s)? For me, a "Hey, look at me!" is insufficient this time around, but I would find a list of improvements convincing (bonus points for some interleaved JS wisdom).

Famo.us is really fast, but the minimal snabbt.js does most of the same animations tricks and is very easy to use. It includes a minmal physics engine. https://github.com/daniel-lundin/snabbt.js

From a development efficiency perspective, Famous is not as good as Angular or React. From a rendering perspective, it's not as good as three.js. It's not yet a leading tool. Jack of all trades, master of none. Maybe it will make more sense when VR platforms become mainstream.

How much time have you spent with the new release?

What was released today was a rewrite of the Famous core engine, so you can't really compare it to Angular or React. Three.js is a far better comparison, though the two have different specialties since Famous isn't trying to be pure WebGL.

The Famous team is working on a framework that will interface with their core engine, making things far cleaner at the application level while facilitating less painful integration. Comparing that to various client-side frameworks will definitely make sense.

To expand on this, Famous's Node class [0] is rather like a DOM node, except far more powerful. You could imagine a React component that renders a tree of virtual Nodes, diffs that with an existing tree, and transitions properties accordingly. But that will be built on Famous, just like react-canvas [1] needed the canvas API to exist. Baby steps.

[0] http://famous.org/docs/core/Node.html

[1] https://github.com/Flipboard/react-canvas

I think that pulling the core out into a separate engine is definitely the right direction and it will be interesting to see what framework they come up with. It definitely needs a clean slate - The Famous/Angular stuff looked promising but it came across as a bit bulky.

Why does this look like Three.JS code? It seems to have very similar capabilities (although Famo.us seems to have less features) and even the code seems to be familiar to me as a ThreeJS guy.

Also I'd argue that ThreeJS can make for better looking results:

https://clara.io/view/193070f2-e8af-4afc-a531-9d82338b5288

I expect there is a decent amount of back and forth. Graphics demos of different tech in an era always tend to look similar for a number of reasons (tackling similar problems, wanting to outshine a competing similar demo, culture of the time etc.)

I know MrDoob was inspired to duplicate the Famo'us periodic table demo in Three.js/CSS and in the other direction, well its goddam MrDoob, you can't work in web graphics and not be inspired by him.

Code that deals with 3D space tends to look similar. Design patterns that work in such contexts tend to be common sense.

Three.js can make far better looking results currently because it's a full-fledged, mature 3D engine. Famous isn't designed to compete with that. It's really intended to sort of merge DOM and 3D content so you can use both in a unified manner.

Also, trashing someone else's product while plugging your own in the same breath is simply poor taste.

Even though I am a contributor to ThreeJS I do not consider it my own project, it is MrDoob's project.

rl3 was referring to the link to your site.

* Also, trashing someone else's product while plugging your own in the same breath is simply poor taste. *

Tone says a bit about people at famo.us

I'm not an employee at Famous, nor have I ever worked for them in any capacity whatsoever.

In fact, I found Famous via working on a personal project that heavily utilized the Three.js CSS3DRenderer.

While I love Three (and by extension MrDoob) very much, the experience left me with a healthy appreciation of what the Famous team is going for. I've tried to do the very same thing myself (fuse DOM and WebGL), and quickly realized all of the pitfalls involved.

Quite slow on Chrome...

At least they gave up trying to build an entire website with it =)

Edit: Looked at top and Chrome is using like 60% CPU when the famo.us page is loaded (and nothing else). Ouch. (2.4 core 2 duo)

I am sure that iPhone users are not your target audience, but the site is almost unusable because of the large header and menu bar at the top of the screen.

Opera 29 Android: first two demos on the home page ok, last two demos black. Chrome 42: same thing. Firefox 38: same but much slower. Stock browser (4.4.2): everything works, a bit slow. I'm really surprised: this should be the most old browser on this tablet. Drivers integration?

On a Nexus 7 2013 and Firefox, all of the demos work but are quite slow.

I can't see random letters and console is screaming about errors left and right. Firefox 31.

Why are you 7 versions behind?

Probably the last Firefox ESR release: https://www.mozilla.org/en-US/firefox/organizations/faq/

shhhh.... I read Hacker News at work. wink

I'm getting the same issue with Firefox 38.

Most missing chars seem to be capitalized. A few specifics: F, H, B, P, X

I like their new branding and docs. It looks really easy to get up and running, but the basic "hello world" isn't working for me..

npm install -g famous-cli && famous init my-first-project && cd my-first-project && famous project deploy

..and nothing happens. Did I miss something obvious?

Also, I'm curious: are there any big companies using famo.us? Are there any non-trivial famo.us applications that we can look at?

* "famous init my-first-project" starts a new project

* "famous project deploy" deploys your application to hub. It gives you a snippet that can be used in order to embed your widget on a website.

* "famous dev" starts the development server.

Deploying your widget requires an account, did you register via `famous register`?

That being said it should have given you an error message if that's the issue. I can't seem to be able to reproduce this.

Can you file an issue on https://github.com/Famous/famous-cli or post the platform + node/ io.js version you're on here?

Thanks.

(For disclosure I am an employee of famous)

Sure. A nice error message would clear it right up

https://github.com/Famous/famous-cli/issues/8

oooo... my first chance to add something to Hacker news :D So... the deploy will produce a snippet that is missing the close div </div> it give you something like this: <script src="https://assets-te.famo.us/embed/embed.js"></script> <div class="famous-container" data-famous-container-identifier="97fb05b1-7884-43b6-8bd1-c8a3c3084a6d">

add this: </div>

Does this mean I'll get accepted to YC ? (cue Eddie Murphy laugh)

http://nowkash.com/#section5

Are there any examples of products that use the famous framework in production? The lack of case study examples on their website worries me a little.

They regularly spotlight apps on their mailing list[1].

For example:

- World Cup App Spotlight[2]

- InkaBinka[3] (Only the mobile apps?)

[1]: http://us5.campaign-archive2.com/home/?u=4656ba2b0a364690c85...

[2]: http://wc.complex.com/

[3]: http://inkabinka.com/

Those two examples are really poor, the usability is terrible in both cases, and the effects are not impressive enough to be worth giving up core features like zoom and copy / paste.

Yeah, agreed. I looked at the football one and it reminded me of low quality Flash work circa 2006... until I had to close the tab because I was worried my MacBook Pro was going to melt my glass desk.

What do you think about this one? One of the early ones. https://ziteboard.com

https://ziteboard.com was one of the first web-apps. Whether it's a good example or not - you decide.

I can see literally no text on chrome, and some capital letters are missing on firefox. All latest versions. Even without ad blocking

Looks pretty good with the elinks web browser.

Hover animation is broken in Lynx, lamentable

I can't seem to get started with this. Their seed repo does not allow me to clone it with the git command. And when using the init functionality as displayed on the front page there is no way to actually setup the damn webserver.

Unfortunately, I am very displeased by the first experience. Chances are that this is also my last experince.

Opening this page caused Firefox to go into a full swapfest mode, rendering the page unresponsive for several seconds.

Hmm, how does Famo.us stack up to GreenSpck's GSAP? I've been tinkering with GSAP for the past week and have been pleasantly suprised with its capabilities, but I don't know if its the more performant of the animation libraries.

Why is it called famous?

I'm guessing it's the best domain name the founders had already.

Because it always gets on the front page of Hacker News.

Famous for winning the vaporware award two years in a row, :p.

This question was answered by the Founder Steve at a meetup in London. https://www.youtube.com/watch?v=qkaU2cFbXyg&feature=youtu.be...

Because they were featured on TechCrunch Cribs http://techcrunch.com/2014/11/18/tc-cribs-famo-us-the-startu...

Can't really see the code on the left, it's blocked by the big margins and the split with the webGL on the right. Enlargement gets rid of the margins but also makes the text in the code box bigger.

I saw 4 demos, they all worked fine on Firefox and Chrome (uptodate versions). Bit heavy on the CPU, I imagine that impacts some machines' performance.

The linked website makes my browser crash… (Firefox 31.6).

I don't know what it is supposed to be but if it is a web tech, it is clearly not production ready.

The company I work for always only supports the latest 2 releases of firefox and chrome. I'm not arguing for or against this being production ready, but I don't think Firefox 31 support should determine whether something is production ready.

Firefix 31 is the current stable (ESR) version. Just look at how many people run it here in this thread.

It is also crashing for me with Firefox 38.0.1.

I am wondering the mobile strategy is completely abandoned because none of the examples work or look good on the iPhone. They have weird edgy / sharp borders. Didn't feel 60fps at all. Plus the mobile layout is completely broken. They seem to work fine on Macbook though. BUT the Twitter app example needs to go away. It just looks bad, OK!?

Works fine for me, latest version of Firefox on Android and Windows.

(Slow on Firefox/Android, but that's to be expected)

Two out of four demos on that page don't run on IE11. And all 4 have ugly scrollbars. Nice for demos but not yet for anything real.

They all work fine on Project Spartan, which uses Microsoft's new EdgeHTML engine.

Is that (Project Spartan) available for public download?

It is in the preview of Windows 10.

This would be perfect for a chart / graph library.

link error: Vertex shader sampler count exceeds the maximum vertex texture units (4).

It's interesting how JS was created for animations, yet is typically failing even at that.

Without adjusting uBlock settings I can't actually click the Github link up top. I can click all the other links. Must be something goofing up because:

<a href="https://github.com/Famous/famous" onclick="trackOutboundLink('https://github.com/Famous/famous'); return false;" class="main-nav-link">Github</a>

Not an important thing and definitely in the realm of `my fault`. The only script I see available to allow is google analytics.

Reply on news.ycombinator.com