Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Effeckt.css: CSS library of performant transitions and animations for mobile #122

Closed
paulirish opened this Issue Jun 29, 2013 · 56 comments

Comments

Projects
None yet
@paulirish
Copy link
Member

paulirish commented Jun 29, 2013

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

Designing and developing UIs for the mobile web is tricky, but it's extremely difficult to do that while delivering something that performs at 60fps. The best opportunities to getting jank-free transitions on phones/tablets are css transition and keyframe animation based, especially tapping into hardware-accelerated transforms and opacity changes.

I'd like to work with some folks on a collection of transitions and keyframe animations. @daneden did really nice work with Animate.css but I think the web would benefit if we could take that work to the next level. There's already been fantastic experiments and demos exploring CSS-based transitions, but it's distributed all over. Here's a few pieces of excellent work

![image](https://f.cloud.github.com/assets/39191/725426/aa3af38c-e067-11e2-82e4-269086cb845d.png) - [tympanus.net/Development/ModalWindowEffects/](http://tympanus.net/Development/ModalWindowEffects/) - [tympanus.net/Development/PageTransitions/](http://tympanus.net/Development/PageTransitions/) - [tympanus.net/Development/PFold/index2.html](http://tympanus.net/Development/PFold/index2.html) - [leaverou.github.io/animatable/](http://leaverou.github.io/animatable/) - [lab.hakim.se/ladda/](http://lab.hakim.se/ladda/) - [lab.hakim.se/kontext/](http://lab.hakim.se/kontext/) - [lab.hakim.se/avgrund/](http://lab.hakim.se/avgrund/) - [lab.hakim.se/meny/](http://lab.hakim.se/meny/)

Because there are so many, I expect we could group things by role:

  • button/touch effects
  • state transition
  • modal/notification transition
  • attention attractors

Goals

This library/framework would come with some goals:

  1. It provides no UI of it's own. It's only hooks for transitions.
  2. Designer-curated set of classy and reasonable effects. (no easeInBounce)
  3. Establish browser support guidelines (I expect Android 2.3 would gracefully degrade)
  4. CSS performance regression testing (a la bench.topcoat.io)
  5. Deliver jank-free 60fps performance on target browsers/devices
  6. If a particular effect cannot deliver target performance (hey blur() css filter), it cannot be included.
  7. Guidelines on what to avoid when styling these affected elements (avoid expensive CSS)
  8. Deliver a builder so users can pull only the CSS they need.
  9. There is no hover on the mobile web, so any hover-based effects would be excluded.

Holler

Anyone else been thinking along these lines?

ping @hakimel @LeaVerou @desandro @crnacura @botelho

Also, @daneden if you're up to it, maybe it's best to do this work as part of your already awesome project.


## Action: - If you know other transition/keyframe animation based demos/experiments that make senes to include here, comment below! - If you're interested in helping to define the API let's hear it. - A web-based builder is a must. A cmd-line builder isn't important for this, I'd say.
@jbeja

This comment has been minimized.

Copy link

jbeja commented Jun 29, 2013

Nice, i was hoping for something that gives me almost the same performance and smoothness as the greensock GSAP js animation library but in CSS. Now i am very excited for this.

@mnording

This comment has been minimized.

Copy link

mnording commented Jun 29, 2013

This is truly something awesome for the mobile web. Really hope you are able to fulfill all goals! Except for doing your own framework previously, what experience would be beneficial for helping this project?

@necolas

This comment has been minimized.

Copy link
Member

necolas commented Jun 29, 2013

Deliver a builder so users can pull only the CSS they need.

I'd suggest creating small packages that aggregate transitions/animations of a particular kind, and then combining them all in a separate package. I did this with SUIT's utilities. Then you can share the modules on Bower and provide a single built asset for people who aren't using a package manager yet.

@sindresorhus

This comment has been minimized.

Copy link
Member

sindresorhus commented Jun 29, 2013

I want this project so much! Currently everything is way too scattered and some of the best effects I've only discovered by coincidence. The mobile web truly needs this if it wants to stay competitive with native, especially with the new trend of even more organic interfaces, read iOS 7 and I'm sure the next Android.

I too feel strongly about it being modular and being available on package managers, while having a built asset for people just wanting to download a single file. I would be happy to build a CLI builder if anyone would find that useful.

@desandro

This comment has been minimized.

Copy link

desandro commented Jun 29, 2013

Yeah, could be legit. If I'm following you correctly, this sounds like a library that provides a standardized API to do all the neato things you linked to.

In my experience, different effects call for different API. Transitions are simple one-way builds. Animations call for keyframes, which could have a whole host of parameters. There are transitions that involve multiple elements, like Hakim's Kontext or Meny. I might be over thinking it in my initial reaction, but I'd be wary of building a library that can cater to all these use cases.

I'm afraid I won't be able to contribute for a while, but I'll keep watching this issue.

@crnacura

This comment has been minimized.

Copy link

crnacura commented Jun 29, 2013

Fantastic idea! @botelho and I would be glad to contribute somehow with transitions and animations that fulfill the requirements.

@daneden

This comment has been minimized.

Copy link

daneden commented Jun 29, 2013

Since Animate.css started, I've felt like it's been a halfway point. I'd love to contribute in any way to this project.

Daniel Eden

On 29 Jun 2013, at 19:35, Manoela Ilic notifications@github.com wrote:

Fantastic idea! @botelho and me would be glad to contribute somehow with transitions and animations that fulfill the requirements.


Reply to this email directly or view it on GitHub.

@AaronLayton

This comment has been minimized.

Copy link
Contributor

AaronLayton commented Jul 1, 2013

Hey @paulirish looks like a cool project, I'm up for it. Has anyone started anything already, something to contribute against, or are we going from scratch here?

You state no UI of it's own, just the hooks but then on point 6 mention about any styling we do add should be performant, I take it this is for things ONLY to make the effect work (say a modal drop shadow?)

Having each effect as a separate Bower package could be good but a prebuilt minified solution would definitely be better as I'm sure we will have common base CSS that will then be copied in in package.

...

I know the title says Effeckt.css but will there be a 'future' need to add in a bit of js for creating, duplicating elements for animation?
Multi-Flip - http://www.apple.com/html5/showcase/transitions/

Another Model effect - http://tympanus.net/Tutorials/OriginalHoverEffects/index9.html (don't use hover obviously)

@desandro Maybe we just provide users with the performant defaults for a v1 release and then v2 we can add in the ability to do a deeper customization with ability to change keyframes?

@AaronLayton

This comment has been minimized.

Copy link
Contributor

AaronLayton commented Jul 1, 2013

Also what fallback's are we going to... If we are supporting Android 2.3 then I guess it will be all the way back to IE7? As the above effects will need working on

@rudywaltz

This comment has been minimized.

@paulirish

This comment has been minimized.

Copy link
Member Author

paulirish commented Jul 1, 2013

@necolas

I'd suggest creating small packages that aggregate transitions/animations of a particular kind, and then combining them all in a separate package. I did this with SUIT's utilities. Then you can share the modules on Bower and provide a single built asset

yes yes yes.

@jbeja

the same performance and smoothness as the greensock GSAP

Yes. I want to keep this completely declarative CSS. So no JS API of any kind. This plays well to browsers and performance, though it may be slightly more annoying to author. But better for users. Performance is key.

@desandro

In my experience, different effects call for different API. Transitions are simple one-way builds. Animations call for keyframes, which could have a whole host of parameters. There are transitions that involve multiple elements,

Yes, true. I want to do this without a JS API, so this stuff will have to be declared at the CSS level. Depending on how we do things, parameters could be defined in a builder or as mixin arguments. Also, there will be a bit of handholding and docs, I bet, to help people out with multi-element state changes.

@crnacura

I would be glad to contribute somehow

Awesome, you rock. seriously. :)

@paulirish

This comment has been minimized.

Copy link
Member Author

paulirish commented Jul 1, 2013

@AaronLayton

Also what fallback's are we going to...

For browser support, I expect that at a minimum, you will need css transitions, opacity, 2d transforms, and keyframe animations. 3D transform support optional.

This mix picks up 85% of mobile users: http://onmobile.iwanttouse.com/#css-transitions,transforms2d,css-opacity,css-animation

![image](https://f.cloud.github.com/assets/39191/731520/243f0ae0-e26d-11e2-95e1-0b4709bd34e2.png)

If your browser doesn't have the above, it falls back to no transition at all.

And we may provide instruction to blacklist Android 2.3 in some cases. TBD.

@grayghostvisuals

This comment has been minimized.

Copy link

grayghostvisuals commented Jul 1, 2013

+1 for no UI. Fully customizable all the way! Can't wait to see what comes of this 🤘

@chriscoyier

This comment has been minimized.

Copy link
Member

chriscoyier commented Jul 1, 2013

A builder is a good idea, but if that doesn't happen, writing these in Sass would be a decent idea so you just use a @mixin as needed - rather than load up a large set of animations some of which you may never use.

@jbeja

This comment has been minimized.

Copy link

jbeja commented Jul 1, 2013

+1 for Sass and no UI. Seriously i can't do any project without my variables, mixins and so on, also i don't like libraies that try to impose their design vision in my projects.

@kshmir

This comment has been minimized.

Copy link

kshmir commented Jul 1, 2013

I'd love to contribute on this! I'm working on a small project using isotope and the web needs more libraries like this.

@darsain

This comment has been minimized.

Copy link

darsain commented Jul 1, 2013

@jbeja and how about libraries that impose their preprocessor of choice on everyone else? :)

@tsi

This comment has been minimized.

Copy link

tsi commented Jul 1, 2013

+1 for sass and what @chriscoyier said, exactly what I was thinking.

@bensmithett

This comment has been minimized.

Copy link

bensmithett commented Jul 1, 2013

👍 for no UI and a Sass mixin library. You could still generate a plain old CSS build from the mixins, but for real world use I'd be converting these to Sass mixins anyway.

This is an awesome idea.

@jbeja

This comment has been minimized.

Copy link

jbeja commented Jul 1, 2013

@darsain you cannot say that imposing an preprocessor is the same thing as imposing and pre-designed UI, is not like SASS, LESS or Stylus have so much difference in their syntax, features or setup to begin with, they are pretty much the same tool. I am just saying that, it would be nice a port for this project in SASS as some else would like one in LESS or Stylus. And to be honest if not like SASS as with the other tools is not compatible with vanilla CSS, i can import this library in my projects as an base and happily work with it in my favorite preprocessor. So in essence, what i am proposing in the context of the preprocessor is just a little whim for myself :).

@foleyatwork

This comment has been minimized.

Copy link

foleyatwork commented Jul 2, 2013

Author it in Sass and compile it to CSS if you want. It's all CSS in the end. That's a non-issue to me.

As far as things that should be added to the library:

  • An off-canvas menu like the one on Squarespace.com (yes, I work there, but I still think it's pretty awesome).
  • Drop-downs similar to the ones in Flat UI. That combination of a very small translate-y with a opacity change is really nice.

I don't have a full understanding of how the API should look, but here's a few thoughts:

  • CSS is pretty simple. Let's encourage hacking the core of this library but also make it possible to use without ever touching the source.
  • There will likely end up being a clear difference between how transitions are treated opposed to animations. Transitions require a beginning and end state that are usually different from one another. Animations sometimes don't end, and other times the end is the same as the beginning. They should be treated differently when we're naming the classes and deciding the use cases.

I'm definitely in for this project, it sounds awesome. I'm going to start thinking about what I'd want a library to do and jotting down some ideas. Can't wait to see some progress here.

@stephenway

This comment has been minimized.

Copy link

stephenway commented Jul 2, 2013

Sass is great, but I think where some Sass-exclusive libraries/frameworks fall short is with providing regular CSS to those who don't use preprocessors. Starting off with just a CSS based API is going to pave the way for preprocessor extensions anyways.

I believe there is a need for this project and I'd love to contribute where possible, especially an official Compass extension.

@chee

This comment has been minimized.

Copy link

chee commented Jul 2, 2013

@kshmir

This comment has been minimized.

Copy link

kshmir commented Jul 2, 2013

+1 @stephenway. I think the api should be defined in pure, simple css (much easier to add classes in js, just like animate.css). But development without sass or a preprocessor is a no go, it would be too verbose and just not DRY. Plus, its harder to make a builder that way.

@mente

This comment has been minimized.

Copy link

mente commented Jul 2, 2013

Great idea! Willing to do LESS extension of it.

@i-like-robots

This comment has been minimized.

Copy link

i-like-robots commented Jul 2, 2013

There's certainly demand for this and knowledge shared about the performance of CSS animations will be valuable.

Is there going to be an argument soon about camelCasing or hyphen-separated naming or if the work of @daneden is extended I guess it's already decided?

@AaronLayton

This comment has been minimized.

Copy link
Contributor

AaronLayton commented Jul 2, 2013

I think as a starting point we should extend from @daneden and get this reduced down with SASS. From there we can start to add in the other effects from the list @paulirish stated.

@daneden do you already have these in LESS/SASS form or did you hand code everything (props if you did!).

In the model examples from Codrops they have a base class of md-modal and then add on the effect class md-effect-1 triggering the show with md-show. Has anyone got any starting views on the API to be used? Animate.css just adds the effect class name "fadeInLeft" which is a lot simpler.

@chriscoyier

This comment has been minimized.

Copy link
Member

chriscoyier commented Jul 2, 2013

Also be a little careful with the Codrops stuff Paul listed. http://tympanus.net/codrops/licensing/

You are not allowed to take our work “as-is” and sell it, redistribute it or re-publish it.

But we could ask @botelho / @crnacura - looks like they are already into the idea =)

@chriscoyier

This comment has been minimized.

Copy link
Member

chriscoyier commented Jul 2, 2013

Here's a start... http://codepen.io/chriscoyier/pen/enAsf

I don't really care if it is built on CodePen or not, but that's an example of how each part could be built modularly and then have a single page that puts them all together.

@grayghostvisuals

This comment has been minimized.

Copy link

grayghostvisuals commented Jul 2, 2013

@chriscoyier That's dope. Would also be cool to have another stylesheet with these correlating classes (no styles just the class names) that authors could use to customize the UI further. Kind of like you did for Wordpress comments a bit back.

@HugoGiraudel

This comment has been minimized.

Copy link

HugoGiraudel commented Jul 2, 2013

Awesome project, I'd love nothing more than being part of it.

I think writing this in Sass is a good idea especially since it would allow easy customization with variables and mixins with arguments. As a drawback, I don't see everybody very comfortable with Sass, so this may be a little complicated for some people to use / take part in the project.

Maybe doing two versions is worth considering?

Anyway, I'm in if that's okay. :)

@grayghostvisuals

This comment has been minimized.

Copy link

grayghostvisuals commented Jul 2, 2013

@HugoGiraudel Honestly from my experience so far with Typeplate it was a chore to maintain multiple language ports. Obviously I would love to see Sass, but not hurt if it isn't and stays in Vanilla CSS. Somewhere down the line someone that uses Stylus will get upset that it isn't ported for them and vice versa with the others.

@crnacura

This comment has been minimized.

Copy link

crnacura commented Jul 2, 2013

@chriscoyier As I already mentioned, we'd love to contribute in any way possible and I don't see how our license stands against anything regarding this project (or any other project, our scripts are for free). That part in the license is just for people that copy & paste without credit, not really fair, I think ;)

@chriscoyier

This comment has been minimized.

Copy link
Member

chriscoyier commented Jul 2, 2013

@crnacura Awesome! I added your modals: http://codepen.io/chriscoyier/pen/enAsf

at-everybody: should we move this to a repo? Probably be easier to work with as a group like that.

@HugoGiraudel

This comment has been minimized.

Copy link

HugoGiraudel commented Jul 2, 2013

at-everybody: should we move this to a repo? Probably be easier to work with as a group like that.

Sounds like a good idea.

@kahlil

This comment has been minimized.

Copy link

kahlil commented Jul 2, 2013

👍 for putting it into a repo.

Sent from my iPhone

On 02.07.2013, at 21:35, Chris Coyier notifications@github.com wrote:

@crnacura Awesome! I added your modals: http://codepen.io/chriscoyier/pen/enAsf

at-everybody: should we move this to a repo? Probably be easier to work with as a group like that.


Reply to this email directly or view it on GitHub.

@round

This comment has been minimized.

Copy link

round commented Jul 2, 2013

Would be a pleasure to contribute in any way possible – these are the examples I've been use as go-tos for inspiration & code samples all along.

(Proof I like to mess with CSS sometimes: http://dabblet.com/user/DUQE)

@chriscoyier

This comment has been minimized.

Copy link
Member

chriscoyier commented Jul 2, 2013

OK. I can do that in the next couple days. There will be a bunch of stuff we'll need to decide on and then standardize.

  • Class name styles. Should we use a prefix like "eff-"? Should each effect have a standard class? How to handle variations on that class? Maybe like class="modal" data-modal-style="from-top" ?
  • Are we doing the Sass thing or not? I don't care either way. If we do, we might wanna go Bourbon because it has keyframe stuff.
  • jQuery or Raw?
  • We need to standardize the JS for each module, and use as little JS as possible. Probably just click/touch handlers and state-changing classes.
@paulirish

This comment has been minimized.

Copy link
Member Author

paulirish commented Jul 2, 2013

Repo created:

https://github.com/h5bp/Effeckt.css

Added everyone here to it. :D

You can take yourself off the team if you want, or just turn off notification if you'd rather keep things quiet.

@AaronLayton

This comment has been minimized.

Copy link
Contributor

AaronLayton commented Jul 2, 2013

We can take all these questions over to the new Repo now ;-)

@AaronLayton

This comment has been minimized.

Copy link
Contributor

AaronLayton commented Jul 2, 2013

I would say to create this with SASS (which I will make a start on when @chriscoyier commits) and there is enough of us here if we want to do a Less version aswell

@enjikaka

This comment has been minimized.

Copy link

enjikaka commented Jul 2, 2013

@chriscoyier I'd say use Sass and raw JavaScript.

@i-like-robots

This comment has been minimized.

Copy link

i-like-robots commented Jul 2, 2013

I've added a couple of new threads over on the repo issue tracker:

Naming styles: h5bp/Effeckt.css#1
Sass, LESS etc: h5bp/Effeckt.css#2

@paulirish

This comment has been minimized.

Copy link
Member Author

paulirish commented Jul 2, 2013

@i-like-robots thanks!
@foleyatwork really appreciate your comment above. I think you're totally on point.

Alright a few of us are active over there... Let's carry on this conversation threads over there!

![image](https://f.cloud.github.com/assets/39191/739175/e4260e7a-e354-11e2-8923-91bdd1079edd.png)
@SaraSoueidan

This comment has been minimized.

Copy link

SaraSoueidan commented Jul 3, 2013

I'd like to contribute to this! Starting with my windows-8 animations demo (that proved quite popular) : http://sarasoueidan.com/blog/windows8-animations/

and maybe this too: http://sarasoueidan.com/blog/ui-transitions-creative-add-remove-effects-for-list-items/

@Shahor

This comment has been minimized.

Copy link

Shahor commented Jul 5, 2013

Awesome !

@hakimel

This comment has been minimized.

Copy link

hakimel commented Jul 7, 2013

This is a great idea @paulirish. Cool to see how far it has come already! I don't have time to jump in on another project but definitely feel free to use any of my concepts/effects.

@paulirish

This comment has been minimized.

Copy link
Member Author

paulirish commented Jul 7, 2013

thanks hakim!

@LeaVerou

This comment has been minimized.

Copy link

LeaVerou commented Jul 8, 2013

This is a great idea @paulirish. Cool to see how far it has come already! I don't have time to jump in on another project but definitely feel free to use any of my concepts/effects.

Ditto!

@davidpett

This comment has been minimized.

Copy link

davidpett commented Jul 15, 2013

I would love to contribute to this. I can't stand overdone/overused animations that make the experience a disaster. Simple elegant motion is what makes everything better

@lifeiscontent

This comment has been minimized.

Copy link

lifeiscontent commented Jul 20, 2013

would love to be apart of this @paulirish

@tonge

This comment has been minimized.

Copy link

tonge commented Jul 20, 2013

Let me know if I can join in @paulirish I have done quite a number of different css animations

@jfroffice

This comment has been minimized.

@justinaguilar

This comment has been minimized.

Copy link

justinaguilar commented Jul 25, 2013

I did some exploration into CSS3 @Keyframe animations. You can download the .css file of preset animations to easily implement on your sites:

http://justinaguilar.com/animations/

@hakimel @LeaVerou @desandro @crnacura @botelho

@arthurvr

This comment has been minimized.

Copy link
Member

arthurvr commented Nov 22, 2014

Maybe this can be closed down? Effeckt now has a separated repo where things can be discussed, so no reason for this issue to exist anymore.

@alrra

This comment has been minimized.

Copy link
Member

alrra commented Nov 22, 2014

@alrra alrra closed this Nov 22, 2014

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.