Need help with tuesday?
Click the “chat” button below for chat support from the developer who created it, or find similar developers for support.

About the developer

shakrmedia
441 Stars 42 Forks MIT License 66 Commits 3 Opened issues

Description

A quirky CSS Animation Library by Shakr

Services available

!
?

Need anything else?

Contributors list

Tuesday

What is it?

It's a quirky CSS Animation Library developed at Shakr.

Why 'Tuesday'?

Because at Shakr, Tuesdays are like Mondays.

Why did you make Tuesday?

There are many other CSS animation libraries out there, but many of them have motion paths that are too big that stand out too much when used inside certain environments. Also a problem is that some of the effects designed are just a bit too long in duration for UI element transitions. (0.2s and 0.3s is a big difference, if you know what I mean.)

So while we were working on our project, we decided to make our own animation library that fits our needs. Tuesday aims to fill out the gap inbetween, providing a more subtle set of effects that can seamlessly integrate into a wider variety of websites or web-app UI designs.

Tuesday is a stand-alone library you can use without any dependencies, but you can use Tuesday alongside other animation libraries as well. All Tuesday animation names start with

td
prefix so there is a low chance two libraries will collide unless there is another one that uses the same prefix and animation name.

If you're interested, check out the "Making of" article in our Making Shakr blog for a more thorough introduction and explanation on how this project came to life.

How to use

The Basic Way

  1. Download the release ZIP file or clone the repository.

  2. Include the compiled CSS file in the

     of your HTML file.
    
    html
    
      
    
    

    Or alternatively, use a CDN link instead if you don't want to host the file.

    html
    
    
  3. Add the class

    .animated
    and the class name of the animation to the element you want to animate.
    html
    

    It's Tuesday.

  4. Your element will now animate!

The Advanced Way (Using LESS source file)

  1. Download the release ZIP file or clone the repository.

  2. Import the source

    tuesday.less
    file to your site LESS stylesheet.
    less
    @import 'tuesday.less';
    
  3. Apply the animation classes as mixins on the element rule.

    less
    h1#header-text {
        .animated;
        .tdDropInLeft;
    }
    
  4. Your element will now animate!

Controlling & Customizing animations

Since the animations will start the moment after the element is loaded in DOM (or made visible with

display: block
), you'll need to dynamically apply classes through JavaScript if you want to controll when the animations will start.

However, if you just want simple delays as to when the animations will start, you can do it by adding

animation-delay: (n)s
property on the element rule.

Similarly if you need to adjust the duration of the animation, add

animation-duration: (n)s
on the element.

Custom building

Tuesday uses Grunt to automate the building process. In case you want to custom-build the CSS file, you can do so by setting up Grunt, heading to the cloned repository path and running

grunt
.

The default grunt task includes autoprefixer that automatically includes vendor-prefixes for CSS3 draft properties.

In case you want to remove any specific group of animations from the output file to reduce file size, just comment out lines in the main

tuesday.less
before running Grunt, and the compiler will skip through the excluded ones.

Animation List

All animation names start with the

td
prefix. Naming conventions are based on that of the Animate.css:
td
+
Name
+
In/Out
+
Direction/Option

More animations are to be added. Check out the demo page to test out the animations in action.

FadeIn

  • tdFadeIn
  • tdFadeInDown
  • tdFadeInLeft
  • tdFadeInUp
  • tdFadeInRight

FadeOut

  • tdFadeOut
  • tdFadeOutDown
  • tdFadeOutLeft
  • tdFadeOutUp
  • tdFadeOutRight

Expand

  • tdExpandIn
  • tdExpandInBounce
  • tdExpandOut
  • tdExpandOutBounce

Stamp

  • tdStampIn
  • tdStampInSwing

Shrink

  • tdShrinkIn
  • tdShrinkInBounce
  • tdShrinkOut
  • tdShrinkOutBounce

Swing

  • tdSwingIn
  • tdSwingOut

DropIn

  • tdDropInLeft
  • tdDropInRight

Plop

  • tdPlopIn
  • tdPlopInDown
  • tdFadeInUp

HingeFlip

  • tdHingeFlipIn
  • tdHingeFlipOut

Browser Compatibility

Tuesday animations are implemented entirely using CSS animations. To see which specific browser versions support CSS animations, please refer to the Can I Use page.

Author

  • Hansol Kim (zvuc) : https://github.com/zvuc/
  • with help from the Shakr Dev team

License

Released under the MIT License. See LICENSE for details.

We use cookies. If you continue to browse the site, you agree to the use of cookies. For more information on our use of cookies please see our Privacy Policy.