
Impress.js - a Prezi like implementation using CSS3 3D transformations - ramanujam
https://github.com/bartaz/impress.js
======
breckinloggins
"WARNING

impress.js may not help you if you have nothing interesting to say ;)"

Although said in jest, this struck me as poignant. I feel that many of us
spend a disturbingly large amount of time researching, downloading and "hello
world"ing all of these pretty well-marketed tools, but most of us still
haven't figured out what we're going to build with them.

Opiate for the hackers. I plead guilty.

~~~
yuvadam
I actually don't see that process as a bad thing.

What you're doing is basically learning the tool, and its capabilities. Next
time you need a CSS3 transformation plugin tailored for presentations, you'll
be able to say "hey, I remember there's this impress thing that I tried once
and it's exactly what we need".

~~~
Bootvis
The process can be a very bad thing if it does not terminate at some point.

Don't forget to use your skills to actually build stuff!

------
tptacek
This is really slick.

I'm torn by Prezi. It's the moral antipode to Tufte's philosophy of
presentation. It seems like it should be objectively evil. But the infinite
canvas aspect of it makes the slides so dense they actually kind of work for
reading online; the transition animations, annoying as they are, add pacing
and create a reading experience that somewhat mirrors the delivery of an
actual talk.

I'd love to hear some success stories from people who have actually delivered
Prezi talks in public.

~~~
devmach
As a someone , who tortured with Prezi on academic level : While it's cool, -
for the listeners - it's hard to follow, hard to take notes and hard to make
connections between slides. It can make your product presentation bearable but
if your goal is teach something to someone LaTeX, Ppt etc still beats it.

~~~
ThomPete
Wouldn't that depend on what you are trying to teach?

There is a reason why animation is used. It's not just to show off. It
actually creates new opportunities to explain difficult concepts because you
can show it in a continuum rather than as slides.

Look at what it did to Roslings presentation of stastistica data.

~~~
keithpeter
This 'zooming interface' type of presentation could be useful for mind maps,
showing where some detailed concept fits in the grand scheme of things,
examples above include the history time-line. I'd be heading for a mind map
approach.

I agree with one poster above: for _procedures_ a step by step approach is
probably best.

------
moocow01
Looks fantastic although I have to admit these prezi types of presentations
start to give me a headache after about 10 seconds from the motion. Also while
the prezis look undeniably cool, I still use the standard slideshows in that I
find the transitions to be a little too much whiz-bang fancy where standard
slides are minimalist. But this is a very cool demonstration of CSS
transforms.

------
sharmajai
This is mind-blowing, I like how he uses transitions to empower content.

The transitions themselves are fantastic and like others in the thread I don't
find them fancy at all, in fact I think they add movies like continuity to
presentations for cheap, which if used wisely can enable story-telling style
of information delivery.

I can see myself using it for info-graphics and tutorials, other than
presentations, by making it do non-linear (zooming in/out or using hrefs) flow
of content.

Oh now I realize why I liked it so much, it also removes the single most
annoying feature of reading content on the web - the constant scrolling and
zooming, like readability it alleviates that pain for you, by zooming in to
the content that matters the most at _this_ instant.

------
aridiculous
I have a friend who gets paid to simply make Prezis for clients (large and
small). The tool was designed for anyone to use and yet she still gets plenty
of business.

There is a gigantic market for making stuff that makes other people look good.
People are looking for something that is like Powerpoint, but a bit better
because PP is considered boring. This, if refined and made easier to use for
intermediary content creators, has enormous financial potential because it
works on all devices.

------
skbohra123
There's an inkscape extension Sozi <http://sozi.baierouge.fr/wiki/en:welcome>
which is also very easy to use tool to make prezi like presentation and it's
also FOSS.

~~~
flarg
I've used Sozi once before and it's pretty impressive for what it is and far
easier to use than the tool we're discussing here - mainly because Inkscape is
so cool.

------
scommab
While a very cool library, it will only be really useful once we get some
content creation tools for it.

~~~
jQueryIsAwesome
You don't need special tools to create cool stuff with it; the presentation
itself works as an example of how easy is to use it:
<https://github.com/bartaz/impress.js/blob/master/index.html>

~~~
scommab
While technically true, it isn't going to be easy to produce a general
presentation for that code. There are a number of hardcoded x/y cords and
specialized css classes ("<span class="have">have</span> <span
class="you">you</span> <span class="noticed">noticed</span> <span
class="its">it's</span> <span class="in">in</span>")

What I'd love to see is a way for me to write relatively vanilla HTML,
possibly run it through a parser (in a perfect world, I would just annotate it
with css classes) and out comes a sexy presentation. Or maybe a wysiwyg UI,
like how Prezi's interface works.

~~~
bartaz
Probably it's not stated clear enough (it's a very early release and I wasn't
expecting such a buzz around it) that impress.js is meant to be responsible
only of positioning the step elements (based on data attributes) and animating
between them.

Anything that is on a step is custom HTML and CSS and author is expected to
write it. Stylesheet given is not meant to be a part of a library - it's just
a demo.

I know that it narrows the target users to people knowing HTML and CSS (on a
quite good level) but it's just an experiment and a tool I use. If anyone
finds it nice and helpful that's great. If not - it's not my fault.

But for sure some detailed docs for impress.js are needed and I hope to write
them soon.

------
pearkes
I would argue one of the reasons the demo is so effective is because it's
expressing (in language) the same thing it's doing visually.

------
pace
Impress.js is an awesome piece of tech—but I wouldn't use it for a
presentation:

There's just a very fine line between over- and underdoing a presentation.
It's never good just to dash off a presentation with lousy layout and design
but it may not be beneficial to overdo a presentation as well. Too much FX and
animations makes you at a certain point needy: "Look what I did to impress
you", "Look, another animation!", "How nice, isn't it??", "And here another 3D
effect, awesome isn't it? I spent the entire day to make the rotation perfect,
just for you because I like you!". After the 5th animation the viewers think
you are a needy guy, needing approval, spending to much time on design than
content and having nothing to do.

Different with pure web presentations for a large audience, then such tools
are nice, but I don't know if they convert better than a gold old landing
page.

------
Flimm
Unfortunate name. Impress is the name of OpenOffice.org's presentation tool.

------
mgualt
Is there a high-level markup language that I can use to output to this? E.g.
LaTeX style document structure but for this kind of presentation output?

~~~
c3d
There's a tool that does 3D presentations called Tao Presentations, just
around the corner. See <http://www.taodyne.com>. It also does "real" 3D (i.e.
stereoscopy or auto-stereoscopy on Philips or Alioscopy screens).

The description of slides looks close to what you are calling for:

slide "test",

    
    
        * "First point"
    
        * "Second point"
    

It doesn't output to Impress.js yet, but that sounds like an interesting
opportunity.

------
hackNightly
This is a great implementation and I enjoyed the demo. As I have nothing to
say, I won't be using it, but good work.

------
lwhi
I love this new format for presentations. I think the fact that slides are
arranged in a spatially distinct way - and are linked fluidly - aids my
comprehension. Would be interesting to find out if this is actually true (and
not just expectation based upon novelty appeal).

------
brackin
Yesterday was the first day I'd blocked Hacker News to get work done,
ironically it was the moment when I needed something like this the most. Oh
well, seems really cool. I'm glad the flash, closed alternative Prezi has a
rival as this seems far more responsive.

------
Metapony
In looking at the stylesheet for the impress.js demo, I wonder if this
<http://leaverou.github.com/prefixfree/> would be useful to keep things tidy
when rotating content and such.

~~~
bartaz
Probably would. I was thinking about using it.

I'm just still a little bit skeptical about JS lib re-downloading, parsing and
appending my CSS.

------
wyuenho
I'm actually a little surprised that no one has mentioned reveal.js yet.
Different idea, but worth mentioning. Impress.js is more like those font
animation we see lots these days. It's pretty cool.

~~~
naugtur
It was mentioned on HN (I started using it after spotting it on main page).
Reveal.js is more practical for daily usage at the moment - basic HTML
convention lets you work with it. But I'd prefer two separate stylesheets -
the basics and a theme.

------
janus
Very well implemented. Prezi it's amazing except that it needs flash.

~~~
nerdfiles
wat?

~~~
dwynings
Prezi, which Impress.js mimics, requires flash. Here's an example:
<http://prezi.com/ftv9hvziwqi2/coca-cola-company/>

~~~
dtf
It's funny how (to me, at least) the Impress.js deck works, but the Coca-cola
one doesn't. Not just a matter of duration, there's something in the
animation. Maybe it's the little things like the way the Impress.js animation
emphasises the word "tiny" - the transitions add meaning. Whereas the Coca-
cola transitions don't seem to say anything extra.

------
lrizzo
excellent tool. For content creation it could be coupled with some markdown
tool written in javascript. I have been using this approach for a while, I put
the content in a textarea and the browser does the conversion for you. The
formatting instructions (to apply css styles) are similar to LaTeX which i am
familiar with and is not too visually intrusive.

You can see an example at <http://info.iet.unipi.it/~luigi/netmap/slides.html>

------
darklajid
"I don't really expect it to run smoothly in non-webkit-based browser."

That's the new 'optimized for IE 5 at 1024x768' it seems. Sad.

~~~
rb2k_
Is it? I think all that means is: "Your browser should support hardware
accelerated CSS3 and have a fast Javascript VM". Isn't the standards-centric
view pretty much the opposite of the browser-centric one?

~~~
bartaz
True, but majority of the users doesn't know if their browser supports
hardware accelerated CSS3 and has fast JS VM. And they probably don't care.

Listing browsers (or with hardware acceleration browsers+systems) helps to
know what configuration can be used to make it work.

~~~
rb2k_
In that case "webkit-based" won't help non-technical users either :)

------
j45
Very, very cool. I would use a tool based on this, are you thinking of
building one out?

~~~
naugtur
There's this thread on github: <https://github.com/bartaz/impress.js/issues/5>

------
aridiculous
Tried in Safari 5.0.2 and it's broken. Works great in Chrome.

~~~
RandallBrown
It works fine in 5.1

------
josscrowcroft
I love how it starts, definitely caught me off-guard!

------
artursapek
This is one of those cool things where you can say, "wow, so we can do this!"
But it really doesn't solve any problem or help anyone achieve anything.

~~~
stbullard
Your comment is self-absorbed, unhelpful, and wrong.

I, for one, have long been looking for an easier way to prototype and test 3D
interfaces for multidimensional data. It's hard to get meaningful feedback on
a movie or a SketchUp model, and this tool may just fit the bill.

~~~
artursapek
Good luck!

------
iambot
looks brilliant, pitty about the browser support, but thats to eb expected i
suppose.

------
cgcardona
Looks really nice. Good job.

------
QuasiPreneur
damn..wish mobile webkit based browsers would support this..

~~~
bartaz
from technical point of view they do support it (when it comes to iPhone/iPad
and newest Android) the problem may be a performance and different way of
positioning things on the screen

but I'd really like to see in running on iPad, maybe on Android tablets if
possible, it's just not implemented yet

------
aniketpant
This is just brilliant!

I actually don't have any words to say now :D

Love the work man.

