Giter VIP home page Giter VIP logo

sassimate's Introduction

Sassimate

Sass mixin for dynamic animations

#Installation

  1. Download sassimate.zip and add the enclosed files to your project in your sass folder
  2. Go to animation.scss and change the file paths to wherever you have put the files.
  3. Run gulp on your project
    Please note: if you know you are not using certain animations please feel free to get rid of references to them. However due to using mixins only the keyframes you call are compiled into your css file.

#Usage The mixin is called with 4 arguments

  1. $animation-name
  2. $duration
  3. $strength (optional, defaults to 100)
  4. $iterations (optional, defaults to 1)

Calling an animation works like this

p{
    @include sassimate($animation-name: bounce, $duration: 1s, $strength: 50, $iterations: 2);
}

Or in shorthand

p {
    @include sassimate(bounce, 1s, 50, 2);
}

#Adding your own animations

  1. Add the file to the animations folder with your keyframe in there.
  2. make sure the name of the file and the name of the keyframe match.
  3. go to the animations.scss file and add @import 'fill-path/animation/newfilename';
  4. also add to the @if/else statement :
@elseif $name == newAnimationName {
  @include newAnimationName($strength);
}

Do any maths to the mixin to allow the strength to work. If yo aren't bothered by strength then add do this:

    @mixin newAnimationName($strength:100){
        @-webkit-keyframes newAnimationName#{$strength} {
              //keyframe stuff
        }
    }

and always call the animation using strength 100 to avoid creating multiple keyframes

#Demo
NOTE: Demo will only work on chrome, firefox and is a bit dubious on safari. This is due to the generator code and not the animations. All animations in the normal project files should work on all browsers that support keyframes and transforms.

https://georgeevans1995.github.io/Sassimate

#Credits All animations have originated from the animate.css Library! To check this project out go to: https://daneden.github.io/animate.css/
Also thanks to:
https://github.com/jonleesmith
https://github.com/liamhegenbarth

#Contribute If you come up with any more awesome animations I would love to see them! Please set up a codepen of fiddle of some sort as a demo so that I can se them. Please use pull requests for any suggestions on improving sassimate. I will review them as quick as possible.

#License sassimate is licensed under the MIT license. (http://opensource.org/licenses/MIT)

sassimate's People

Contributors

georgeevans1995 avatar

Stargazers

 avatar  avatar

Watchers

 avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.