elrumordelaluz / csshake

CSS classes to move your DOM!

“Simplicity is about subtracting the obvious and adding the meaningful.”

— John Maeda

Hola. My name is Lionel Tzatzkin.

I am a Front End Developer who started as Graphic Designer, worked as Art Director and found a passion writing code.

elrumordelaluz.com

You can find me on Mastodon and Twitter or find stuff I made on Codepen, Dribble, Behance. Otherwise drop me an Email.

csshake's Issues

sass files issue

compiled sass files using compass and generated css file don't work for me.
however you css file works.

Shake child element instead of entire parent

Not really an issue, more of a request. Is it possible to shake a child element on parent hover for example.

<div class="shake-controller">
   <div class="shake shake-slow"><span class="fa fa-heart"></span></div>
   <h3>I am a title</h3>
</div>

this way as I hover over any where within shake-controller my heart icon would shake by the text would stay steady?

Rectangle icon on Windows

Google Chrome, Windows 7

Version and link in minified css

Can you add some description about css in minified file?
For example jquery includes /*! jQuery v3.1.1 | (c) jQuery Foundation | jquery.org/license */
Would be nice to have some link back if csshake.min.css is packed with a project files.

Thanks, Love your work! thumbs up

How to get a combination of slow and horizontal?

I'm trying to mimic the wide, slow and horizontal shake behaviour of the error bars at Stackoverflow (try not inputting a title and hitting "Post Your Question"). I've tried combining shake-slow and shake-horizontal, but that seems to have the same result as only using shake-horizontal; the animation is still very quick.

Furthermore, the shake seems to be very small, meaning, it doesn't move much from it's position. Is there a way to make the shake move further from it's initial position so that I can for example have it shake 200 pixels from it's position?

All tips are welcome!

impossible to make it work using gh-pages?

I tried it locally and it works, but on gh-pages it doesn't am I doing something wrong or is it not supported on gh-pages?

Add dedicated CSS style for the default "shake" class

shake-little, shake-slow and others have dedicated CSS files for very light-weight integration into existing projects (in the dist directory). However, no dedicated CSS file is present for the shake class. It is available only in the 21kb file which contains all the classes. I suggest adding a new file csshake-default.css and csshake-default.min.css to cover the shake class if someone is not interested in the other shake variants.

Make a sache.json file for this project

Suggestion: Add a sache.json file that connects this repo to the http://www.sache.in site allowing authors to discover Sass & Compass Extensions.

shake effect on menu

Hello,

could i make this effect showed in this video https://vimeo.com/208065323

using cshake ?

thanks !

.freeze doesn't work

Since it's misspelled.
See: https://github.com/elrumordelaluz/csshake/blob/master/sass/_shake.scss#L28

Breaking Change: Slash as Division

WARNING: Using / for division is deprecated and will be removed in Dart Sass 2.0.0.

Recommendation: math.div($input, 2)

More info and automated migrator: https://sass-lang.com/d/slash-div

   ╷
15 │   @return if($input != 0, random($input) - $input/2, 0);
   │                                            ^^^^^^^^
   ╵
    node_modules/csshake/scss/_tools.scss 15:44                                 apply-random()
    node_modules/csshake/scss/_tools.scss 59:18                                 do-shake()

Therefor a small change should be done in scss/_tools.scss.

Choose only several effects

Hello,

Thank you for your great work !

I find a bit annoying to have to download all the effects at once, would it be possible to download only the shake effect(s) chosen in the CSS file ? (something like a checkbox)

Thank you

[request] new release (npm)

In 1.5.0 the apply-random function is defined within the do-shake mixin. In master you have it defined outside of the do-shake mixin. Chances are the change in master is to address Sass compilers barking Functions may not be defined within control directives or other mixins.

Is it possible to make a new release with the patch that is contained in master?

Thanks!

Without prefixes version

Hello,

Like many people, I already use Autoprefixer tool to add vendor prefixes.

Is it possible to download a CSS file without vendor prefixes ?

missing bower

bower is needed to spread csshake out!

Support for tailwind as a plugin

Thanks for this awesome project!
I just want to suggest a support for tailwind https://tailwindcss.com/docs/plugins

It's not shaking in Chrome

Hi,
I just downloaded your csshake.min.css, it's working fine in Internet Explorer and FireFox, but it's not working in Chrome, any finx for this will be appreciated.
Thanks

Not working

Is it only me that has having a problem running this? I added the css created a span with class shake. But nothing seems to work. hmmm

package.json not pointing right to main files

Please update your package.json properties to point to your directories and main files. Automatic bundlers like webpack and such cannot find your "module", so we need to copy it to project files to get collected by webpack properly. Probably your initial target audience was bower-users, but npm-guys also deserve your blessed lib :)

Асtually it seemes i don't know good solution to point to style files in package.json (maybe there is still no good one), maybe use antoher fields.. maybe investigate how bootstrap do it (they obviously had to invent something to point all possible bundlers to it's stylesheets in the first place)

Missing: Harlem Shake

That is to say, nearly no shaking for 15 seconds followed by a fairly intense shake... except for the first element, which should shake intensely the whole time.

Laggy Animation

Hi, I have tried using this cool css lib on my asp.net MVC5 web page.

The animations does not seem smooth, as in very laggy so it doesnt have a "shake" effect at all it just seem odd, but on your example page it works perfect with the same browser.

So I am wondering what might be the cause for this laggy animation (not smooth) ?

Support intermittent shaking?

I needed a shake that only occurred for N% of the full animation (so that it would shake for say one second, then not move for three seconds before shaking again), so csshake wasn't a perfect fit for my use case. Maybe support for this could be added?

I ended up writing my own SCSS that wound up being similar to yours, so here it is in case you can use something from it:

@mixin create-shake($name, $x, $y, $angle, $keyframes: 10, $portion: 100%) {
  @keyframes #{$name} {
    $dx: 0px;
    $dy: 0px;
    $rotate: 0deg;

    $offset: 0%;
    $increment: $portion / $keyframes;
    @while $offset < $portion {
      @if $x != 0px { $dx: random($x) - $x / 2; }
      @if $y != 0px { $dy: random($y) - $y / 2; }
      @if $angle != 0deg { $rotate: random($angle) - $angle / 2; }

      #{$offset} {
        transform: translate($dx, $dy) rotate($rotate);
      }

      $offset: $offset + $increment;
    }

    #{if($portion < 100%, ($portion, 100%), 100%)} {
      transform: translate(0px, 0px) rotate(0deg);
    }
  }
}

Example use:

@include create-shake('intermittent', 8px, 8px, 12deg, 10, 30%);

Example output:

@keyframes intermittent {
  0% {
    transform: translate(3px, 1px) rotate(-4deg);
  }
  3% {
    transform: translate(3px, -3px) rotate(3deg);
  }
  6% {
    transform: translate(1px, 3px) rotate(-4deg);
  }
  9% {
    transform: translate(4px, 1px) rotate(0deg);
  }
  12% {
    transform: translate(0px, 2px) rotate(5deg);
  }
  15% {
    transform: translate(-2px, 1px) rotate(0deg);
  }
  18% {
    transform: translate(3px, -1px) rotate(-5deg);
  }
  21% {
    transform: translate(0px, 2px) rotate(6deg);
  }
  24% {
    transform: translate(2px, 0px) rotate(-5deg);
  }
  27% {
    transform: translate(1px, -3px) rotate(-5deg);
  }
  30%, 100% {
    transform: translate(0px, 0px) rotate(0deg);
  }
}

$opacity is not in the documentation and not in the comment for do-shake()

in _tool.scss opacity is missing from the comments
it is also missing in the readme

/// Do The Shake
/// @param {String} $name ['shake'] - Name for the keyframes animation
/// @param {Number} $h [5px] - Max number for random to assign in x axis
/// @param {Number} $v [5px] - Max number for random to assign in y axis
/// @param {Number} $r [3deg] - Max number for random rotation
/// @param {Number} $dur [100ms] - animation-duration; valid time value
/// @param {Number} $precision [.1] - Precision of the keyframes animation (i.e 2 > 2%, 4%, 6%...)
/// @param {String} $q [infinite] - animation-iteration-count; valid value
/// @param {String} $t [infinite] - animation-timing-function; valid value
/// @param {Number} $delay [null] - animation-delay; valid time value
/// @param {Number} $chunk [100%] - Part of 100% where apply the animation
@mixin do-shake(
$name: 'shake',
$h: 5px,
$v: 5px,
$r: 3deg,
$dur: 100ms,
$precision: .02,
$opacity: false,
$q: infinite,
$t: ease-in-out,
$delay: null,
$chunk: 100%
) {

Elements changing width

This issue is likely caused because I'm using Bootstrap but when the shake class is applied to some elements, it causes the elements below to become inline, even if set to blocks

Issue recreated here: https://codepen.io/anon/pen/QMOOxJ

This is because on the display: inline-block, I've commented it out in the local copy and it appears to prevent the issue from happening but wanted to check what the particular reason behind changing the element to an inline-block was, in case it causes effects elsewhere when using your plugin.

A new idea makes csshake more perfect

I'm currently using the plug-in, and I have encountered a problem, but the simple jitter is not enough to meet the requirements. If it is always jittering, it will be visually fatigued, which is not conducive to good interface design. Therefore, I want csshake to be able to configure interval jitter.
I referenced the csshake.css file in my file and used it in the div. It works perfectly, but I want the div to stop shaking for a period of time, and then start shaking after 1 second (configurable). Use This plug-in is very convenient, but I am not a professional programmer. How can I realize interval jitter?
Thank you again for writing such a great thing, and I look forward to the changes in csshake to make it better!

Shake effect on hover in safari browser

we got a problem with shake only on hover in safari browsers, the same problem i found on your page on section "variation". The first example "Freezed after Shake" doesnt work in safari 11.0.1. On our Website, it has more objects with this effect, only the first one shake.
we hope u can fix it.