CodePen Embed - Untitled

  <div id="hero" class="section">
    <h1 class="animate left-to-right fade-in">Simple Scroll animations</h1>
    <p class="animate left-to-right fade-in">A simple showcase of what this library can do to help you add animations to your website.</p>
    <div class="animate bottom-to-top staggered">
      <a href="#side-to-side-showcase" class="button">Take a look!</a>
    </div>
  </div>
  <div id="side-to-side-showcase" class="section">
    <h2 class="animate delay200">All cardinal directions!</h2>
    <div class="flex-container">
      <div class="block animate left-to-right"></div>
      <div class="block animate top-to-bottom"></div>
      <div class="block animate bottom-to-top"></div>
      <div class="block animate right-to-left"></div>
    </div>
    <div class="animate fade-in delay300 column">
      <a href="#cards-showcase" class="button">See more: Cards</a>
      <a href="#hero">Go back</a>
    </div>
  </div>
  <div id="cards-showcase" class="section">
    <h2 class="animate delay200">Sick staggered cards with one class</h2>
    <div class="flex-container">
      <div class="block animate left-to-right staggered"></div>
      <div class="block animate left-to-right staggered"></div>
      <div class="block animate left-to-right staggered"></div>
      <div class="block animate left-to-right staggered"></div>
    </div>
    <div class="animate fade-in delay400 column">
      <a href=""></a>
      <a href="#delay-showcase" class="button">See more: Setting a delay</a>
      <a href="#side-to-side-showcase">Go back</a>
    </div> 
  </div>
  <div id="delay-showcase" class="section">
    <h2 class="animate">Easily set a delay</h2>
    <div class="flex-container delay-grid">
      <span class="animate delay100">You</span>
      <span class="animate delay500">just</span>
      <span class="animate delay300">set</span>
      <span class="animate delay200">a</span>
      <span class="animate delay700">value</span>
      <span class="animate delay600">from</span>
      <span class="animate delay900">100</span>
      <span class="animate delay400">to</span>
      <span class="animate delay1000">1000</span>
    </div>
    <div class="animate fade-in delay100 column">
      <a href="#duration-showcase" class="button">See more: Setting a duration</a>
      <a href="#cards-showcase">Go back</a>
    </div> 
  </div>
  <div id="duration-showcase" class="section">
    <h2 class="animate">Set an animation duration</h2>
    <p>Your animation can be as <span class="animate bottom-to-top delay300 duration100">short</span> or as <span class="animate top-to-bottom delay400 duration1000">long</span> as you'd like</p>
    <div class="animate fade-in delay100 column">
      <a href="#installation" class="button">Installation</a>
      <a href="#delay-showcase">Go back</a>
    </div> 
  </div>
  <div id="installation" class="section">
    <h2 class="animate left-to-right staggered">How do I add this to my website?</h2>
    <p class="animate left-to-right staggered">Just copy the following code:</p>
      <code class="animate left-to-right staggered"> 
        &lt;link rel=&quot;stylesheet&quot; href=&quot;https://cdn.jsdelivr.net/gh/Michal-Skoula/simple-scroll-animations@master/release/latest/styles.css&quot;&gt; <br> &lt;script defer src=&quot;https://cdn.jsdelivr.net/gh/Michal-Skoula/simple-scroll-animations@master/release/latest/script.js&quot;&gt;&lt;/script&gt;
      </code>
    <p class="animate left-to-right staggered">Or read more in the README:</p>
    <div class="animate bottom-to-top delay400">
      <a href="https://github.com/Michal-Skoula/simple-scroll-animations" class="">Github Repo</a>
    </div>
    <div class="animate fade-in delay100 column">
      <a href="https://michal-skoula.github.io/website" class="button">View on a real site (my WIP website)</a>
      <a href="#duration-showcase">Go back</a>
    </div> 
  </div>

/**
 * CONFIG
 * Set the variables to adjust timings
 */

 :root {
  --reanimate-on-scroll-by-default: 0;
  --default-animation-duration: 500ms; 
  --staggered-step-amount:250ms; 
  --delay-step-amount: 400ms; 
  --blur-strength: 3px; 
  --translate-amount-x: 40%;
  --translate-amount-y: 40%;
}
@media(prefers-reduced-motion) {
  .animate.show {
    transition: none !important;
  }
}

.animate {
  opacity: 0;
  filter: blur(var(--blur-strength));

  transition:
    transform var(--default-animation-duration) ease-in-out,
    opacity var(--default-animation-duration),
    filter calc(var(--default-animation-duration) * 2/3);
}

.animate.show,
.animate.show.fade-in {
  opacity: 1;
  filter: blur(0);
}

.animate.fade-in {
  opacity: 0;
  filter: blur(var(--blur-strength));
}
.noblur {
  filter: blur(0) !important;
}
.animate.bottom-to-top {
  transform: translateY(var(--translate-amount-y));
}
.animate.show.bottom-to-top {
  transform: translateY(0);
}

.animate.right-to-left {
  transform: translateX(var(--translate-amount-x));
}
.animate.show.right-to-left {
  transform: translateX(0);
}

.animate.top-to-bottom {
  transform: translateY(calc(var(--translate-amount-y) * -1));
}
.animate.show.top-to-bottom {
  transform: translateY(0);
}

.animate.left-to-right {
  transform: translateX(calc(var(--translate-amount-x) * -1));
}
.animate.show.left-to-right {
  transform: translateX(0);
}


.animate.staggered {
  transition-delay: calc(var(--delay-step-amount) * var(--index));
}
.animate.delay100, .animate.delay200, .animate.delay300, 
.animate.delay400, .animate.delay500, .animate.delay600, 
.animate.delay700, .animate.delay800, .animate.delay900, 
.animate.delay1000 {
  transition-delay: calc(var(--delay-step-amount) * var(--delay));
}
.animate.duration100, .animate.duration200, .animate.duration300, 
.animate.duration400, .animate.duration500, .animate.duration600, 
.animate.duration700, .animate.duration800, .animate.duration900, 
.animate.duration1000 {
  transition-duration: calc(var(--staggered-step-amount) * var(--duration));
}

.animate.staggered:nth-child(2) { --index: 1; }
.animate.staggered:nth-child(3) { --index: 2; }
.animate.staggered:nth-child(4) { --index: 3; }
.animate.staggered:nth-child(5) { --index: 4; }
.animate.staggered:nth-child(6) { --index: 5; }
.animate.staggered:nth-child(7) { --index: 6; }
.animate.staggered:nth-child(8) { --index: 7; }
.animate.staggered:nth-child(9) { --index: 8; }
.animate.staggered:nth-child(10) { --index: 9; }

.animate.delay100  { --delay: 1; }
.animate.delay200  { --delay: 2; }
.animate.delay300  { --delay: 3; }
.animate.delay400  { --delay: 4; }
.animate.delay500  { --delay: 5; }
.animate.delay600  { --delay: 6; }
.animate.delay700  { --delay: 7; }
.animate.delay800  { --delay: 8; }
.animate.delay900  { --delay: 9; }
.animate.delay1000 { --delay: 10; }

.animate.duration100  { --duration: 1; }
.animate.duration200  { --duration: 2; }
.animate.duration300  { --duration: 3; }
.animate.duration400  { --duration: 4; }
.animate.duration500  { --duration: 5; }
.animate.duration600  { --duration: 6; }
.animate.duration700  { --duration: 7; }
.animate.duration800  { --duration: 8; }
.animate.duration900  { --duration: 9; }
.animate.duration1000 { --duration: 10; }

/*styles*/

:root:root {
  --reanimate-on-scroll-by-default: 1;
  --default-animation-duration: 500ms; 
  --staggered-step-amount:250ms; 
  --delay-step-amount: 250ms; 
  --blur-strength: 3px; 
  --translate-amount-x: 40%;
  --translate-amount-y: 40%;
}

* {
  box-sizing: border-box;
  scroll-behavior: smooth;
}
body {
  padding: 0;
  margin:0;
  font-family: Arial, Helvetica, sans-serif;
  background-color: #1e1e1e;
  color:#f2f2f2;
  display: grid;
  width: 100vw;
  max-width: 100%;
  place-items: center;
  min-height: 100vh;
  text-align: center;
  overflow: hidden;
}
h2 {
  margin-bottom: 64px;
}
p {
  font-size: 20px;
}
code {
  /* overflow:scroll; */
  margin: 0 auto;
}
.column {
  flex-direction: column;
  display: flex;
}
a:not(.button) {
  margin-top:16px;
  color: grey;
  text-decoration: none;
  transition: text-decoration 150ms;
}
a:not(.button):hover {
  text-decoration: underline;
}
#duration-showcase span:first-child {
  font-size: 40px;
  color: lemonchiffon;
}
#duration-showcase span:nth-child(2) {
  font-size: 40px;
  color: lightskyblue
}
.button {
  padding: 16px 32px;
  background-color: #f2f2f2;
  color: #1e1e1e;
  border-radius: 10px;
  width: max-content;
  text-align: center;
  margin:64px auto 0 auto;
  display: inline-block;
  text-decoration: none;
  border: 2px solid #f2f2f2;
  transition: color 150ms, background-color 150ms;
}
.button:hover {
  background-color: #1e1e1e;
  color:#f2f2f2;
}
.hero, .section {
  min-height: 100vh;
  min-height: 100svh;
  align-content: center;
  display: grid;
}
.flex-container {
  width: 100vw;
  max-width: 100%;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap:32px;
  justify-content: center;
}
.block {
  width: 100px;
  aspect-ratio: 1/1;
  background-color:red;
  border-radius: 10px;
}
.block:nth-child(1) {
  background-color: lightblue;
}
.block:nth-child(2) {
  background-color: lightcoral;
}
.block:nth-child(3) {
  background-color: lightgreen;
}
.block:nth-child(4) {
  background-color: lightseagreen;
}
.delay-grid {
  max-width: 400px;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
}
.delay-grid span {
  font-size: 30px;
  justify-content: center;
  margin: 0 auto;
}
.delay-grid span:nth-child(1) {
  font-family: "Arial";
  color: #AEC6CF; /* Light pastel blue */
}
.delay-grid span:nth-child(2) {
  font-family: "Courier New";
  color: #FFB7CE; /* Light pastel pink */
}
.delay-grid span:nth-child(3) {
  font-family: "Georgia";
  color: #CFCFC4; /* Light pastel gray */
}
.delay-grid span:nth-child(4) {
  font-family: "Helvetica";
  color: #FFD1DC; /* Light pastel peach */
}
.delay-grid span:nth-child(5) {
  font-family: "Lucida Console";
  color: #B4E7B8; /* Light pastel green */
}
.delay-grid span:nth-child(6) {
  font-family: "Tahoma";
  color: #FFDAC1; /* Light pastel orange */
}
.delay-grid span:nth-child(7) {
  font-family: "Times New Roman";
  color: #E2F0CB; /* Light pastel lime */
}
.delay-grid span:nth-child(8) {
  font-family: "Trebuchet MS";
  color: #F3E9D2; /* Light pastel beige */
}
.delay-grid span:nth-child(9) {
  font-family: "Verdana";
  color: #C4DDED; /* Light pastel sky blue */
}
.delay-grid span:nth-child(10) {
  font-family: "Comic Sans MS";
  color: #F7D9C4; /* Light */
}

// Check default behaviour for reanimating
const rootElement = document.documentElement;
const reanimate = getComputedStyle(rootElement).getPropertyValue('--reanimate-on-scroll-by-default');
reanimate.trim();

const observer = new IntersectionObserver((entries) => {

  entries.forEach((entry) => {
    if(entry.isIntersecting) {
      entry.target.classList.add('show')
    }
    else if(reanimate == 1 && !entry.target.classList.contains('once')) {
      entry.target.classList.remove('show')
    }
    else if(reanimate == 0 && entry.target.classList.contains('always')) {
      entry.target.classList.remove('show')
    }
    else if(reanimate == 0) {}
  });
});


const toBeAnimated = document.querySelectorAll('.animate');
toBeAnimated.forEach((element) => {observer.observe(element)});

This Pen is owned by kachibito on CodePen.

See more by @kachibito on CodePen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.