{"id":24871118,"url":"https://github.com/michal-skoula/simple-scroll-animations","last_synced_at":"2025-04-13T05:46:27.683Z","repository":{"id":253982446,"uuid":"845130890","full_name":"Michal-Skoula/simple-scroll-animations","owner":"Michal-Skoula","description":"Simple lightweight CSS library for animating on scroll with Tailwind inspired syntax.","archived":false,"fork":false,"pushed_at":"2024-08-29T17:39:00.000Z","size":9840,"stargazers_count":5,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-04-13T05:46:09.857Z","etag":null,"topics":["animation","css-animations","css-library","library","lightweight","scroll-animations"],"latest_commit_sha":null,"homepage":"https://michal-skoula.github.io/simple-scroll-animations/","language":"CSS","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/Michal-Skoula.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2024-08-20T16:34:02.000Z","updated_at":"2025-03-26T16:19:24.000Z","dependencies_parsed_at":"2025-03-26T22:38:24.260Z","dependency_job_id":null,"html_url":"https://github.com/Michal-Skoula/simple-scroll-animations","commit_stats":null,"previous_names":["michal-skoula/simple-scroll-animations"],"tags_count":1,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Michal-Skoula%2Fsimple-scroll-animations","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Michal-Skoula%2Fsimple-scroll-animations/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Michal-Skoula%2Fsimple-scroll-animations/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Michal-Skoula%2Fsimple-scroll-animations/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Michal-Skoula","download_url":"https://codeload.github.com/Michal-Skoula/simple-scroll-animations/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248670514,"owners_count":21142901,"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","css-animations","css-library","library","lightweight","scroll-animations"],"created_at":"2025-02-01T04:19:48.847Z","updated_at":"2025-04-13T05:46:27.621Z","avatar_url":"https://github.com/Michal-Skoula.png","language":"CSS","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Simple scroll animations\n![Showcase video](assets/videos/showcase.gif)\n\n- 🌐 [Demo website](https://michal-skoula.github.io/simple-scroll-animations)\n- 🔗 [My WIP personal website using this library](https://michal-skoula.github.io/website-design)\n- 🗃️ [Product Hunt](https://www.producthunt.com/posts/scroll-animations-css-library)\n\nTailwind inspired way to create simple scroll animations for your website. Extremely easy to use for someone who wants to spice up their website presentation. \n\nI made this for my personal website, as I really only needed simple animations and this was the most comfortable way I found of making them.\n``` HTML\n\u003ch1 class=\"animate once left-to-right delay200\"\u003eAnd that's it!\u003c/h1\u003e\n```\n## 💎 Highlights\n- Every setting fully customizable\n- Super simple to use, only need to remember a few classes\n- Mostly CSS only and utilizing the intersectionObserver API for applying the animations\n\n## 🏗️ Installation\n### 1. Link CSS and JS in your project\nAdd the following code in `\u003chead\u003e`:\n``` HTML\n\u003clink rel=\"stylesheet\" href=\"https://cdn.jsdelivr.net/gh/Michal-Skoula/simple-scroll-animations@master/release/latest/styles.css\"\u003e\n\u003cscript defer src=\"https://cdn.jsdelivr.net/gh/Michal-Skoula/simple-scroll-animations@master/release/latest/script.js\"\u003e\u003c/script\u003e\n``` \n### 2. Add `animate` class to elements you want to animate\n``` HTML\n\u003ch1 class=\"animate\"\u003eThis is now animated!\u003c/h1\u003e\n```\n### 3. Add aditional classes to modify the behaviour\n``` HTML\n\u003ch1 class=\"animate once left-to-right delay100\"\u003eLeft to right animation with a delay happening once\u003c/h1\u003e\n```\n*For a more detailed overview of available classes, see **Configuration**.*\n\n### 4. Change settings to suit your preferences\nThis library comes with a few settings to tweak to your liking, which you change by editing CSS variables inside the document `:root`. You can copy the following code inside your CSS should you want to change any values. **You do not need to change any of these values if you don't want to.**\n``` CSS\n:root:root {\n  --reanimate-on-scroll-by-default: 0;\n  --default-animation-duration: 500ms; \n  --staggered-step-amount:250ms; \n  --delay-step-amount: 250ms; \n  --blur-strength: 3px; \n  --translate-amount-x: 40%;\n  --translate-amount-y: 40%;\n}\n```  \nNote: In order to change these setting, use `:root:root` for a higher specificity than the default settings.\n\nA more detailed description of the available settings can be seen in **Configuration**.\n\n## ⚙️ Configuration\n### Notes\nIf your element has animations and transitions on it already, this library may not play nice. I recommend wrapping the element in a `\u003cdiv\u003e` or `\u003cspan\u003e` and putting the animations on that to resolve any issues.\n#### ❌ Don't:\n``` HTML\n\u003ca class=\"animate bottom-to-top delay100 button-primary\"\u003eButton\u003c/a\u003e \n```\n#### ✅ Do:\n``` HTML\n\u003cdiv class=\"animate bottom-to-top delay100\"\u003e\n  \u003ca class=\" button-primary\"\u003eButton\u003c/a\u003e\n\u003c/div\u003e\n```\n\n### Settings\n``` CSS\n:root {\n  /* Sets if by default animations should play every time they are loaded (1) or only once (0) */\n  --reanimate-on-scroll-by-default: 1;\n\n  /* Default duration for all animations. Can be overriden by setting a duration100-1000 value. */\n  --default-animation-duration: 500ms; \n\n  /* For duration100-1000, what the step values should be.  */\n  /* For a value of200ms, duration200 = 400ms, duration300 = 600ms and so on.  */\n  /* Equation is: calc(var(--staggered-step-amount) * var(--duration)); */\n  --staggered-step-amount:250ms;\n\n  /* Sets the values for each step of the animation in a list and delay100-1000 values. */\n  /* For a value of 150ms, delay100 = 150ms, delay300 = 450ms and so on.  */\n  /* Equation is: calc(var(--delay-step-amount) * var(--delay) */\n  --delay-step-amount: 250ms;\n\n  /* How strong the blur is when elements are animating in. Can be turned off. */\n  --blur-strength: 3px; \n\n  /* How much elements should be moved when animated e.g. right-to-left. */\n  --translate-amount-x: 40%;\n  --translate-amount-y: 40%;\n}\n```\n### Available animation types\n- `fade-in` (default)\n- `right-to-left`\n- `left-to-right`\n- `top-to-bottom`\n- `bottom-to-top`\n\n### Available Classes\n- `animate` - Makes an element be animatable. This is mandatory for every element that is to be animated.\n- `name-of-animation` - Type of animation which should display on scroll, see **Animation types**.\n- `once / always` - If the animation should play once or every time it enters the viewport.\n- `staggered`- Used on lists of elements, such as cards, buttons, menu items etc.\n- `noblur` - Removes blur from the animation.\n- `delay100-1000` - Set a custom delay for when the animation should play for. Doesn't work with `staggered`.\n- `duration100-1000` - Set a custom duration for how long the animation should play for.\n\n## 🌳 Examples\n### Different directions\n![Directions](assets/videos/directions.gif)\n``` HTML\n\u003ch2 class=\"animate delay200\"\u003eAll cardinal directions!\u003c/h2\u003e\n\u003cdiv class=\"flex-container\"\u003e\n  \u003cdiv class=\"block animate left-to-right\"\u003e\u003c/div\u003e\n  \u003cdiv class=\"block animate top-to-bottom\"\u003e\u003c/div\u003e\n  \u003cdiv class=\"block animate bottom-to-top\"\u003e\u003c/div\u003e\n  \u003cdiv class=\"block animate right-to-left\"\u003e\u003c/div\u003e\n\u003c/div\u003e\n\u003cdiv class=\"animate fade-in delay300 column\"\u003e\n  \u003ca href=\"#cards-showcase\" class=\"button\"\u003eSee more: Cards\u003c/a\u003e\n  \u003ca href=\"#hero\"\u003eGo back\u003c/a\u003e\n\u003c/div\u003e\n```\n---\n### Staggered elements (cards or lists)\n![Staggered](assets/videos/staggered.gif)\n``` HTML\n\u003ch2 class=\"animate delay200\"\u003eSick staggered cards with one class\u003c/h2\u003e\n\u003cdiv class=\"flex-container\"\u003e\n  \u003cdiv class=\"block animate left-to-right staggered\"\u003e\u003c/div\u003e\n  \u003cdiv class=\"block animate left-to-right staggered\"\u003e\u003c/div\u003e\n  \u003cdiv class=\"block animate left-to-right staggered\"\u003e\u003c/div\u003e\n  \u003cdiv class=\"block animate left-to-right staggered\"\u003e\u003c/div\u003e\n\u003c/div\u003e\n\u003cdiv class=\"animate fade-in delay400 column\"\u003e\n  \u003ca href=\"\"\u003e\u003c/a\u003e\n  \u003ca href=\"#delay-showcase\" class=\"button\"\u003eSee more: Setting a delay\u003c/a\u003e\n  \u003ca href=\"#side-to-side-showcase\"\u003eGo back\u003c/a\u003e\n\u003c/div\u003e \n```\n---\n### Delayed animations\n![Delayed](assets/videos/delay.gif)\n``` HTML\n\u003ch2 class=\"animate\"\u003eEasily set a delay\u003c/h2\u003e\n\u003cdiv class=\"flex-container delay-grid\"\u003e\n  \u003cspan class=\"animate delay100\"\u003eYou\u003c/span\u003e\n  \u003cspan class=\"animate delay500\"\u003ejust\u003c/span\u003e\n  \u003cspan class=\"animate delay300\"\u003eset\u003c/span\u003e\n  \u003cspan class=\"animate delay200\"\u003ea\u003c/span\u003e\n  \u003cspan class=\"animate delay700\"\u003evalue\u003c/span\u003e\n  \u003cspan class=\"animate delay600\"\u003efrom\u003c/span\u003e\n  \u003cspan class=\"animate delay900\"\u003e100\u003c/span\u003e\n  \u003cspan class=\"animate delay400\"\u003eto\u003c/span\u003e\n  \u003cspan class=\"animate delay1000\"\u003e1000\u003c/span\u003e\n\u003c/div\u003e\n\u003cdiv class=\"animate fade-in delay100 column\"\u003e\n  \u003ca href=\"#duration-showcase\" class=\"button\"\u003eSee more: Setting a duration\u003c/a\u003e\n  \u003ca href=\"#cards-showcase\"\u003eGo back\u003c/a\u003e\n\u003c/div\u003e \n```\n---\n### Long and short animations\n![Duration](assets/videos/duration.gif)\n``` HTML\n\u003ch2 class=\"animate\"\u003eSet an animation duration\u003c/h2\u003e\n\u003cp\u003eYour animation can be as \u003cspan class=\"animate bottom-to-top delay300 duration100\"\u003eshort\u003c/span\u003e or as \u003cspan class=\"animate top-to-bottom delay400 duration1000\"\u003elong\u003c/span\u003e as you'd like\u003c/p\u003e\n\u003cdiv class=\"animate fade-in delay100 column\"\u003e\n  \u003ca href=\"#installation\" class=\"button\"\u003eInstallation\u003c/a\u003e\n  \u003ca href=\"#delay-showcase\"\u003eGo back\u003c/a\u003e\n\u003c/div\u003e \n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmichal-skoula%2Fsimple-scroll-animations","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmichal-skoula%2Fsimple-scroll-animations","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmichal-skoula%2Fsimple-scroll-animations/lists"}