https://github.com/michal-skoula/simple-scroll-animations
Simple lightweight CSS library for animating on scroll with Tailwind inspired syntax.
https://github.com/michal-skoula/simple-scroll-animations
animation css-animations css-library library lightweight scroll-animations
Last synced: about 1 year ago
JSON representation
Simple lightweight CSS library for animating on scroll with Tailwind inspired syntax.
- Host: GitHub
- URL: https://github.com/michal-skoula/simple-scroll-animations
- Owner: Michal-Skoula
- Created: 2024-08-20T16:34:02.000Z (almost 2 years ago)
- Default Branch: master
- Last Pushed: 2024-08-29T17:39:00.000Z (almost 2 years ago)
- Last Synced: 2025-04-13T05:46:09.857Z (about 1 year ago)
- Topics: animation, css-animations, css-library, library, lightweight, scroll-animations
- Language: CSS
- Homepage: https://michal-skoula.github.io/simple-scroll-animations/
- Size: 9.38 MB
- Stars: 5
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Simple scroll animations
- 🌐 [Demo website](https://michal-skoula.github.io/simple-scroll-animations)
- 🔗 [My WIP personal website using this library](https://michal-skoula.github.io/website-design)
- 🗃️ [Product Hunt](https://www.producthunt.com/posts/scroll-animations-css-library)
Tailwind inspired way to create simple scroll animations for your website. Extremely easy to use for someone who wants to spice up their website presentation.
I 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.
``` HTML
And that's it!
```
## 💎 Highlights
- Every setting fully customizable
- Super simple to use, only need to remember a few classes
- Mostly CSS only and utilizing the intersectionObserver API for applying the animations
## 🏗️ Installation
### 1. Link CSS and JS in your project
Add the following code in ``:
``` HTML
```
### 2. Add `animate` class to elements you want to animate
``` HTML
This is now animated!
```
### 3. Add aditional classes to modify the behaviour
``` HTML
Left to right animation with a delay happening once
```
*For a more detailed overview of available classes, see **Configuration**.*
### 4. Change settings to suit your preferences
This 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.**
``` CSS
:root:root {
--reanimate-on-scroll-by-default: 0;
--default-animation-duration: 500ms;
--staggered-step-amount:250ms;
--delay-step-amount: 250ms;
--blur-strength: 3px;
--translate-amount-x: 40%;
--translate-amount-y: 40%;
}
```
Note: In order to change these setting, use `:root:root` for a higher specificity than the default settings.
A more detailed description of the available settings can be seen in **Configuration**.
## ⚙️ Configuration
### Notes
If your element has animations and transitions on it already, this library may not play nice. I recommend wrapping the element in a `
` or `` and putting the animations on that to resolve any issues.
#### ❌ Don't:
``` HTML
Button
```
#### ✅ Do:
``` HTML
```
### Settings
``` CSS
:root {
/* Sets if by default animations should play every time they are loaded (1) or only once (0) */
--reanimate-on-scroll-by-default: 1;
/* Default duration for all animations. Can be overriden by setting a duration100-1000 value. */
--default-animation-duration: 500ms;
/* For duration100-1000, what the step values should be. */
/* For a value of200ms, duration200 = 400ms, duration300 = 600ms and so on. */
/* Equation is: calc(var(--staggered-step-amount) * var(--duration)); */
--staggered-step-amount:250ms;
/* Sets the values for each step of the animation in a list and delay100-1000 values. */
/* For a value of 150ms, delay100 = 150ms, delay300 = 450ms and so on. */
/* Equation is: calc(var(--delay-step-amount) * var(--delay) */
--delay-step-amount: 250ms;
/* How strong the blur is when elements are animating in. Can be turned off. */
--blur-strength: 3px;
/* How much elements should be moved when animated e.g. right-to-left. */
--translate-amount-x: 40%;
--translate-amount-y: 40%;
}
```
### Available animation types
- `fade-in` (default)
- `right-to-left`
- `left-to-right`
- `top-to-bottom`
- `bottom-to-top`
### Available Classes
- `animate` - Makes an element be animatable. This is mandatory for every element that is to be animated.
- `name-of-animation` - Type of animation which should display on scroll, see **Animation types**.
- `once / always` - If the animation should play once or every time it enters the viewport.
- `staggered`- Used on lists of elements, such as cards, buttons, menu items etc.
- `noblur` - Removes blur from the animation.
- `delay100-1000` - Set a custom delay for when the animation should play for. Doesn't work with `staggered`.
- `duration100-1000` - Set a custom duration for how long the animation should play for.
## 🌳 Examples
### Different directions
``` HTML
All cardinal directions!
```
---
### Staggered elements (cards or lists)
``` HTML
Sick staggered cards with one class
```
---
### Delayed animations
``` HTML
Easily set a delay
You
just
set
a
value
from
100
to
1000
```
---
### Long and short animations
``` HTML
Set an animation duration
Your animation can be as short or as long as you'd like
```