{"id":13717531,"url":"https://github.com/ShakrMedia/tuesday","last_synced_at":"2025-05-07T07:31:46.245Z","repository":{"id":25418497,"uuid":"28847717","full_name":"shakrmedia/tuesday","owner":"shakrmedia","description":"A quirky CSS Animation Library by Shakr","archived":false,"fork":false,"pushed_at":"2023-07-08T06:57:10.000Z","size":613,"stargazers_count":457,"open_issues_count":14,"forks_count":38,"subscribers_count":28,"default_branch":"master","last_synced_at":"2024-10-30T04:50:10.741Z","etag":null,"topics":["animation","animation-library","css","css-animations","less","tuesday-css"],"latest_commit_sha":null,"homepage":"http://shakrmedia.github.io/tuesday/","language":"CSS","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/shakrmedia.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null}},"created_at":"2015-01-06T05:08:10.000Z","updated_at":"2024-08-08T05:20:38.000Z","dependencies_parsed_at":"2024-01-14T15:21:12.122Z","dependency_job_id":"7a79d8fe-2a12-4dac-b646-9c5c3103f4c6","html_url":"https://github.com/shakrmedia/tuesday","commit_stats":null,"previous_names":[],"tags_count":6,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/shakrmedia%2Ftuesday","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/shakrmedia%2Ftuesday/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/shakrmedia%2Ftuesday/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/shakrmedia%2Ftuesday/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/shakrmedia","download_url":"https://codeload.github.com/shakrmedia/tuesday/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":224360355,"owners_count":17298319,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["animation","animation-library","css","css-animations","less","tuesday-css"],"created_at":"2024-08-03T00:01:23.633Z","updated_at":"2024-11-14T05:32:06.399Z","avatar_url":"https://github.com/shakrmedia.png","language":"CSS","funding_links":[],"categories":["Frameworks / Resources"],"sub_categories":["T"],"readme":"Tuesday\n=======\n\n#### What is it?\nIt's a quirky CSS Animation Library developed at Shakr.\n\n#### Why 'Tuesday'?\nBecause at Shakr, Tuesdays are like Mondays.\n\n#### Why did you make Tuesday?\nThere 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.)\n\nSo 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.\n\nTuesday 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.\n\nIf you're interested, check out the [\"Making of\" article](http://making.shakr.com/making-tuesday/) in our Making Shakr blog for a more thorough introduction and explanation on how this project came to life.\n\n\n## How to use\n#### The Basic Way\n1. Download the release ZIP file or clone the repository.\n\n2. Include the compiled CSS file in the `\u003chead\u003e` of your HTML file.\n    ```html\n    \u003chead\u003e\n      \u003clink rel=\"stylesheet\" type=\"text/css\" href=\"css/tuesday.min.css\" /\u003e\n    \u003c/head\u003e\n    ```\n\n    Or alternatively, use a CDN link instead if you don't want to host the file.\n    ```html\n    \u003clink rel=\"stylesheet\" type=\"text/css\" href=\"https://cdn.jsdelivr.net/gh/shakrmedia/tuesday@v1.1.0/build/tuesday.min.css\" /\u003e\n    ```\n\n\n3. Add the class `.animated` and the class name of the animation to the element you want to animate.\n    ```html\n    \u003ch1 id=\"header-text\" class=\"animated tdDropInLeft\"\u003eIt's Tuesday.\u003c/h1\u003e\n    ```\n\n4. Your element will now animate!\n\n\n#### The Advanced Way (Using LESS source file)\n1. Download the release ZIP file or clone the repository.\n\n2. Import the source `tuesday.less` file to your site LESS stylesheet.\n    ```less\n    @import 'tuesday.less';\n    ```\n\n3. Apply the animation classes as mixins on the element rule.\n    ```less\n    h1#header-text {\n        .animated;\n        .tdDropInLeft;\n    }\n    ```\n\n4. Your element will now animate!\n\n\n#### Controlling \u0026 Customizing animations\nSince 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.\n\nHowever, 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.\n\nSimilarly if you need to adjust the duration of the animation, add `animation-duration: (n)s` on the element.\n\n\n## Custom building\nTuesday uses [Grunt](http://gruntjs.com/) 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`.\n\nThe default grunt task includes [autoprefixer](https://github.com/postcss/autoprefixer) that automatically includes vendor-prefixes for CSS3 draft properties.\n\nIn 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.\n\n\n## Animation List\n\nAll animation names start with the `td` prefix. Naming conventions are based on that of the [Animate.css](http://daneden.github.io/animate.css/): `td`+`Name`+`In/Out`+`Direction/Option`\n\nMore animations are to be added. Check out the [demo page](http://shakrmedia.github.io/tuesday/) to test out the animations in action.\n\n#### FadeIn\n- tdFadeIn\n- tdFadeInDown\n- tdFadeInLeft\n- tdFadeInUp\n- tdFadeInRight\n\n#### FadeOut\n- tdFadeOut\n- tdFadeOutDown\n- tdFadeOutLeft\n- tdFadeOutUp\n- tdFadeOutRight\n\n#### Expand\n- tdExpandIn\n- tdExpandInBounce\n- tdExpandOut\n- tdExpandOutBounce\n\n#### Stamp\n- tdStampIn\n- tdStampInSwing\n\n#### Shrink\n- tdShrinkIn\n- tdShrinkInBounce\n- tdShrinkOut\n- tdShrinkOutBounce\n\n#### Swing\n- tdSwingIn\n- tdSwingOut\n\n#### DropIn\n- tdDropInLeft\n- tdDropInRight\n\n#### Plop\n- tdPlopIn\n- tdPlopInDown\n- tdFadeInUp\n\n#### HingeFlip\n- tdHingeFlipIn\n- tdHingeFlipOut\n\n\n## Browser Compatibility\nTuesday animations are implemented entirely using CSS animations. To see which specific browser versions support CSS animations, please refer to the [Can I Use page](http://caniuse.com/#feat=css-animation).\n\n## Author\n- **Hansol Kim** (zvuc) : https://github.com/zvuc/\n- with help from the Shakr Dev team\n\n\n## License\nReleased under the MIT License.\nSee [LICENSE](https://github.com/ShakrMedia/tuesday/blob/master/LICENSE) for details.\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FShakrMedia%2Ftuesday","html_url":"https://awesome.ecosyste.ms/projects/github.com%2FShakrMedia%2Ftuesday","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FShakrMedia%2Ftuesday/lists"}