h5bp / effeckt.css Goto Github PK

I'd like to make this a ruby gem, could I do it in a pull request or would you rather have it be a separate repo?

I'd push it to the rubygems.org as beta for now, but would allow me and other people to try using it right away.

Would be nice if each demo had it's own individual component page, and those chunks were included in the main demo page.

1. Grunt includes https://github.com/vanetix/grunt-includes (never tried)
2. Jade includes (yet another dependency)
3. $.load with jQuery (might load janky)
4. PHP includes (yet another dependency)
5. Something else?

Moved this to a new thread based on the discussion here:
issue #35

autoprefixer: {
  build: {
    options: {
      browsers: ['last 2 versions', '> 1%']
    },

Is producing stuff like:

h1 span:nth-child(1) {
  -webkit-animation: logo-from-horz 0.5s ease forwards;
  -o-animation: logo-from-horz 0.5s ease forwards;
  animation: logo-from-horz 0.5s ease forwards;

which is kinda whack. Should have -moz- probably and not -o-, right?

Discussions for class naming style in one tidy thread...

Should classes be .camelCase or .hyphen-separated?

Do we need a prefix?

I noticed in list item it had hardcoded timers for removing the element, after the animation has completed.

I updated PR #90 to use timers instead. It adds Modernizr as a helper to the index.html to detect which event to use.

elToRemove.on(EffecktDemos.animationEndEventName + ' ' + EffecktDemos.transitionEndEventName , function () {
  elToRemove.remove();
});

It's listening to both a transiton end and animation end. In case one uses transition and the other uses an animation.

In demo all modals popup can't display in Sarafi, it anybody know what is the problem?

My code looks like the following:

22:  @keyframes someAnimation {
23:     0%, 10%, 40% { property: value; }
24:     100% { property: value; }
25:  }

The error that grunt shows:

Running "sass:build" (sass) task
Warning: scss/modules/xxxx.scss:23: error: invalid property name
 Use --force to continue.

Sass seems to be choking on the grouped keyframes ( 0%, 10%, 40% { } )

I have triple checked that all my code is correct, so now I am thinking that the problem is in the grunt-sass dependency.

Here is the current package.json file:

{
  "name": "Effeckt",
  "version": "1.0.0",
  "devDependencies": {
    "grunt": "~0.4.1",
    "matchdep": "~0.1.2",
    "autoprefixer": "~0.5.20130629",
    "grunt-autoprefixer": "~0.1.20130615",
    "grunt-contrib-watch": "~0.4.4",
    "grunt-contrib-connect": "~0.3.0",
    "grunt-contrib-copy": "~0.4.1",
    "assemble": "~0.4.0",
    "grunt-gh-pages": "~0.6.0",
    "grunt-sass": "~0.6.0"
  }
}

Compared to an old commit: d167ebb , that worked fine:

{
  "name": "Effeckt",
  "version": "1.0.0",
  "devDependencies": {
    "grunt": "~0.4.1",
    "matchdep": "~0.1.2",
    "grunt-contrib-sass": "~0.4.0",
    "autoprefixer": "~0.5.20130629",
    "grunt-autoprefixer": "~0.1.20130615",
    "grunt-contrib-watch": "~0.4.4",
    "grunt-contrib-connect": "~0.3.0",
    "grunt-contrib-copy": "~0.4.1",
    "assemble": "~0.4.0",
    "grunt-gh-pages": "~0.6.0"
  }
}

Do you think the 'grunt-sass' dependency is the problem, or am I just missing something?

Sorry if I did not elaborate on this issue enough.

My original idea was the API surface area was 100% CSS classes. I think that's still a good target.

Let people add and remove classes however they want to, we'll only supply the classes to make things happen, they'll have to hook them in.

Nearly 100% of demos of Effeckt will use JS, but I think it's safer to just distribute the effects as purely CSS.

Thoughts?

Idea maybe each animation effect in Effeckt.css could have a corresponding codepen so its easy to grab the code for a single animation ? There could be a list of all codepen urls of each animation included in the project. This is somewhat duplicating the function of the demo page.

any plans on providing this project as a bower package?

@chriscoyier

I noticed the buttons for the modals are still blurry. If you add

-webkit-filter: blur(0px)

to the .effeckt-modal class the buttons clear up nicely on Chrome.

Also in Firefox 22 for Mac the modal windows don't allow the user to click the close button due to the fixed positioning. If we add position: absolute its right as rain for some reason. By the way what you have so far for these modals are the bees knees 🐝 🍻

Text rendering changes when an element is animated to make the transition as smooth as possible. The problem is however after the animation ends the text is currently still rendering in the animation mode (text-rendering: optimizeSpeed I think.)

I was wondering how we were going to tackle this problem? As quality is obviously a important element for this project.

See blow screenshot below highlighting this problem.

Thought we could discuss a general workflow. Right now I have it forked and thinking we all do the same and send focused PRs to the main repo? Seems to be the cleanest approach instead of all of us on master -unless we branch off from the master w/the main repo. Suggestions from those smarter than I?

Removing is excessively delayed.

(Remove button could be implemented as onclick event on new-item instead.)

When scrolling gradually down, an item overlays the previous one.

On the other hand, when scrolling fast, transitions shouldn't be that visible.

Click and of the right overlay actions (push, squeeze, overlay) to open the overlay, then push a different overlay action button (not the 'x' on the overlay). This closes the overlay, but trying to open the overlay using a different opening style will cause the overlay to open in an unexpected manor, often using the same style as the one originally used.

Also note that when a left overlay action is attempted after following the steps above, the overlay will still open on the right side.

Seen on Chrome Version 28.0.1500.72 m, Windows Server 2012.

@grayghostvisuals - I think we should move that FlipIn/OutX thingy to the list items demo. What it really is is a "reveal" example, for something that wasn't there and now is there. That's essentially what the list demos do, so it could be combined there.

It's unclear what license this is released under, so by default I have to assume it's proprietary. A few JavaScript files say they're released under the MIT License, but none of the CSS/SCSS files have a license, nor is there a LICENSE.md file at the repository root.

Is the entire project supposed to be licensed under MIT? Regardless, it should be made more clear.

Thought I'd present an example of a toggle scenario using a custom build from @daneden's Animate.css. Probably a good component candidate which would allow authors to customize the toggle animation in some way. The code is shit, but I'm sure we can sift through the sketch to make it better.

http://codepen.io/grayghostvisuals/pen/lyaJt

Awesome Project! Was just ask by someone to summarise what this is and thought it would be good to have a slogan.

Something like:
"UI less Scss based effect library focused on performance and mobile"

In fact, when you activate any full page effect, the scroll position is reset (for example, the "let me in" modal has this issue too)

In #1 BEM syntax was brought up and heavily favored, but the topic started tangenting and so got closed.

In looking at the code today I see a number of different class structures.

• Usage of non-generic classes (.effeckt-button.orange, .effeckt-button .label, etc) that could inherit from non-effeckt classes and cause problems
• Building on base module names just by adding additional single hyphen portions (.effeckt-page-transition to .effeckt-page-transition-content)
• Using data-type instead of an additional class (.effeckt-list[data-type='pop-in'])

So I thought I'd bring BEM back up for some potential consistency.

While the objective of effeckt.css is to be ui-less, it is required to have a UI to demo things. Thus a lot of CSS currently has background colors, padding, etc built into the files right along side the effeckt animation CSS.

It would be great to separate the CSS needed for demo UI from the CSS needed for the effeckt animations. Not sure if this should be done within the same file but just in different blocks, separating into different files for each modle (1 for modal demo UI, 1 for modal effecks animations), having all demo code be in a single file (easier to remove when imported into another site), or something else.

Thoughts?

So I saw the issue #2 where it was discussed using compass/less/vanilla css to create the prefixes for browsers, which you decided on using a grunt task of autoprefixer to create that.

I think Effeckt should re-evaluate this decision and move over to either a few hand-rolled mixins or using a lib to do this.

I tried consuming your scss, (instead of compiled css) but wasn't able to utilize it, without rewriting the scss to use mixins. I wanted variables too, for timing and such.

I would really like to use your tool without changing your source.

I'd like to be able to @include in scss and say $effecktModalTiming: 800ms; or change easing etc.

I will submit a pull request later with a very simple hand-rolled mixins, along with variables that can be over-written.

(Hand rolled allows less dependencies and agnostic build process, though right now its node, it could become gemified for ruby and imported)

Specifically the left/right squeeze animations where the entire page is being reflowed.
To a lesser extent, the push animations as well.

As an aside, I've noticed that certain native system animations are quite slow as well (Mission Control).. so it could be the case that the graphics hardware is simply under powered to calculate animations (or in our case reflows) & push so many pixels at the same time.

Not sure what can be done about this, as applying the translate3d(0,0,0) hack to the content div doesn't really help - and seems like that would be bad practice anyways.

We kinda have to pick since we really need prefixing help.

For contributors, they will need to fork and submit pull requests to the master branch, but then the build process will update the gh-pages branch and that needs to be a separate pull request. That is kinda awkward.

Discussion so far:

• @benschwarz git subtree push --dist origin gh-pages
• @doowb goes into more detail: #24 (comment)

Or, maybe general contributors don't need to worry about gh-pages? Team members will merge the pull requests into master and handle it?

Sorry if this is confusing. I'm confused myself. I just know we need to keep gh-pages updated too so the live demo is current.

Local link is broken for jQuery (also there's a new version of jQuery). Becomes a problem when running locally without a web server as the CDN protocol tries to go to file:// :)

A problem I have run into with these CSS animation libraries are that the animations are too much. They are hard to implement into business'y type projects without toning down.

Would anyone be against having a set of subtle animations for each of the Roles?

Ex.

• Button that shrinks ever so slightly when pressed
• Modal that just fades in nicely (little more than just opacity: 1 with an ease transition)

Name

"Effeckt.css" I just randomly came up with. I'm not particularly attached to it, though it seemed pretty good. Renaming the project isn't a priority but if we want to, we certainly can.

Github org

The current github location of h5bp/Effeckt.css also need not be permanent. But if we move this to it's own org (probably inevitable) then let's do it with a final name.

In the demo using OS X and FF 22, cannot close the "let me in" modal dialog with the "Close me!" button. Was able to refresh page and reproduce.

Sass is like this:

sass: {
  build: {
    files: {
      // destination, source
      'css/demo/demo.css': 'scss/demo/demo.scss',
      'css/modules/modals.css': 'scss/modules/modals.scss',
      'css/modules/modals-1.css': 'scss/modules/modals-1.scss',
      'css/modules/modals-2.css': 'scss/modules/modals-2.scss',
      'css/modules/buttons-1.css': 'scss/modules/buttons-1.scss'
    }
  }
},

with every single .scss file being declared. Can we do it so the entire "scss" folder processes over to the same place in the "css" folder? Like Compass does it?

• Remove the "Modals 1" - in "Modals 2" there is already a "from top" style one
• Add a "from bottom" in Modals 2 - just a reverse of the
• Can't click close button in Firefox, see: #48
• Make sure overlay always covers entire area. Some bugs there like http://cl.ly/Q3U2 and scrolling issue
• Some effects haven't been quite ported over to work right, see Newspaper demo
• None of the 3D ones are working quite right yet
• Super Scaled isn't centered (several others have centering issues)

I can fix all this I just wanted to note the issue.

Discussions about whether to use a pre-processor or vanilla CSS and if the former whether or not animations could or should be implemented as mixins or via an extension.

Trying out the demo page in Firefox 22 Win 7 the animations are really sporadic and will shift position when the exit animation is running. See gif below.

The quality problem is quite distinguishable. See attachment.
Left one is how I see, and the right one is how it should be.

Except "sticky up" & "let me in", this issue exists in all modals.

Edit: I just realized this issue is open already.

All the effect resources listed so far, any below if you know of any more . Lets get this down to a list of effect names to implement

Button / Touch effects

• tympanus.net/Development/PFold/index2.html
• leaverou.github.io/animatable/
• lab.hakim.se/ladda/
• http://tympanus.net/Tutorials/OriginalHoverEffects/index9.html - would work for Modal aswell
• http://tympanus.net/Development/CreativeButtons/

Modals

• tympanus.net/Development/ModalWindowEffects/
• lab.hakim.se/avgrund/

Page transitions

• tympanus.net/Development/PageTransitions/
• lab.hakim.se/kontext/
• lab.hakim.se/meny/

Other

• http://dabblet.com/gist/3715742

I made this issue on Bootstrap's Github page but wanted to get thoughts here too.

I'm thinking of forking Bootstrap to incorporate Effeckt.css for the CSS transitions.

This might be a sizable addition to Bootstrap, and you might argue beyond its scope, but these effects should really be baseline components of any web app today as they have been in native apps for the last 5+ years.

Thoughts?

http://lab.hakim.se/effeckt is "Not Found".

I just found Tabulous and I think it would be a great addition to the library.

This is from the source of the page_transitions demo and I think that yes, it would be VERY helpful if there was a build dir in the repo where devs could just pull the latest, stable, concatenated and minified source and work with it.

Or a build script that generates this.

Chris removed it in here #43

I want to bring it back for now, mostly because we'll soon have some automated performance testing infrastructure and I want to demonstrate how blur is a performance jerk. :)

Can someone pick apart that commit and bring it back?

Just found your repo, awesome work!!

Was just wondering about the page transitions, shouldn't they be the other way around?

Click on "Slide In Left" lets a new page slide in from the right side at the moment. Click on "Slide in Right" lets the page slide in from the left side. Is it supposed to work like that? I quickly checked the source, can't see any wrong assignments.

This was already briefly brought up in a different discussion, but I wanted to have a designated spot to chat about it and hopefully push the conversation along a bit. I think that it will make the repo easier to read and work with while also making PRs easier if we ditch the master branch and move everything to to gh-pages branch.

One particular frustration that I am having with the current set up is the node_modules folder. This folder is excluded from the repo, as it should be. This means that ever time I move between the different branches and my working directory is updated I need to run npm install again. Anyway, it seems like one branch will be earlier moving forward.

Thoughts? If the community is on board, I'll be happy to help shuffle files around.

Like you update a .scss file, and the page doesn't refresh the new styles are just injected into the page. That's how it normally works, but in the setup now, it just refreshes the page.

This seems mighty complicated: http://rhumaric.com/2013/05/reloading-magic-with-grunt-and-livereload/

The Guard setup we used for two seconds did this fine. LiveReload the actual Mac app does it this way as well.

When adding list items of different height, the items start disappearing too early at the top. Would be great if this could be supported.

If I can find some time, I'll look into it myself.

Name

"Effeckt.css" I just randomly came up with. I'm not particularly attached to it, though it seemed pretty good. Renaming the project isn't a priority but if we want to, we certainly can.

Github org

The current github location of h5bp/Effeckt.css also need not be permanent. But if we move this to it's own org (probably inevitable) then let's do it with a final name.

I don't think you can just run npm install and get the gem required for Sass. I think we still need bundler to help manage any gemset dependencies. no?
Just tried installing with the instructions and it didn't give me gems. I want my gems! I'm freekin' out!