chrismochinski / easy-scroll-animations

Publicly available, organized Intersection Observer library of pre-built page scroll animations and associated logic. Simple class-based implementation. Build in progress, updating regularly!

Mo's Easy Scroll Animation Library! 🚀

NOTE: This project is built to be accessible to everyone - including new developers ( I'm looking at you, Primers 😃 ). If anything is confusing or you'd like some clarity, I'd be happy to help - hit me up!

👇 This repository contains the following files 👇

• animations.css - THIS IS THE MEAT N' TATERS of Easy Scroll Animations.

• README.md - You're lookin' at it.

• sample.html - A simple sample HTML file with a few demos of the included animations.

• script.js - This file contains the guts of the animation functionality and some explanations in the notes. Once you get the hang of it, you'll be able to create your own!

• style.css - The style sheet that applies to the sample page. Nothing here is particularly relevant to the animations.

👇 HOW TO APPLY THE ANIMATIONS TO YOUR OWN PROJECT 👇

1. Fork/Clone this repo as needed

2. copy script.js into your own project and source it into the head of any HTML pages where you'd like to use it, or copy the contents into any JavaScript file that's already imported. If it's in the same directory as your HTML file, it'll look like this:

        <script src="script.js" defer></script>
   

3. copy animations.css into your own project and source it into the head of any HTML pages where you'd like to use it, or copy the contents into any css file that's already imported. if it's in the same directory as your HTML file, it'll look like this:

        <link rel="stylesheet" href="animations.css" />
   

---

Each HTML element that you'd like to animate will require TWO classes:

• The first class is telling the browser about the TIMING of the animation. There are such classes as move , fast-move, and delay-move.

• The second class is telling the browser what STYLE of animations we're using, directionally or otherwise. There are such classes as from-top, from-small, or more complicated stuff like from-rotate-c-270-up-right.

No need to mess around with these in any CSS file if you don't want to! They're already set up. However, feel free to take a look at things such as the delay duration. You can tweak all kinds of features! Reference the included sample.html file for a few examples, and change them around to get a feel for things!

( I'll do my best to update this repo with more animations and features as I have time, and I'll update this README accordingly )

---

AS ALWAYS - don't hesitate to reach out to me if you have questions! Always happy to help if I can!

My Website
My LinkedIn
My Twitter (@HolyMosesMusic)
My GitHub