Scroll-Triggered Animation Demo 1

Scroll-position controlled animation examples using WayPoints and GSAP ScrollTrigger.

by the_voder

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.1/normalize.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/waypoints/4.0.1/jquery.waypoints.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.8.0/gsap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.8.0/ScrollTrigger.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/prism/1.25.0/themes/prism-solarizedlight.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.25.0/prism.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.25.0/components/prism-javascript.min.js"></script>
<main>
  <h1>
    Scroll-Triggered Animation
  </h1>
  <p>Examples of different ways of applying scroll-position-triggered animation to page elements</p>

  <!-- WAYPOINTS DEMO 1 -->
  <section>
    <h2>WayPoints 1: Add CSS Class To Element</h2>
    <p>The <a href="http://imakewebthings.com/waypoints/guides/jquery-zepto/" target="_blank">WayPoints</a> JavaScript library can be used to trigger an action when a page element scrolls into view</p>
    <p>In this case we use the jQuery version of the library, to select an element and add a CSS style to it when it hits the top of the page.</p>
    <div id="box1" class="box box-transition"></div>
    <p>We're using the CSS transition property to fade in our new background color when the new CSS class is added to the element.</p>
    <p>I've used a little class <span class="inline-code">.box-transition</span> to apply the transition property to just this box.</p>
    <p>The concept of combining small CSS classes that do specific things in a modular way can help with writing cleaner CSS code, and is the basis of popular CSS frameworks like...

CSS

@import url('https://fonts.googleapis.com/css2?family=Quicksand:wght@300;700&family=Roboto+Mono:wght@300&display=swap');

:root {
	/* CSS variables. Can be used further down */
	--content-width: 640px;
	--text-color: #111;
	--base-fontsize: 20px;
	--bassline-grid: 24px;
	--twice-bassline: 48px;
	--highlight-color: rgb(10, 250, 206);
	--border-radius: 5px;
}

body {
	position: relative;
	background-color: #eee;
	font-family: 'Quicksand', sans-serif;
	font-size: var(--base-fontsize);
	line-height: var(--bassline-grid);
	color: var(--text-color);
	margin: 0;
	padding: 0;
}

a:link,
a:visited,
a:active {
	color: var(--text-color);
	transition: color 0.5s;
}

a:hover {
	color: var(--highlight-color);
}

main {
	max-width: var(--content-width);
	height: 1000vh;
	margin: 0 auto;
	padding: var(--bassline-grid);
	background-color: #fff;
	box-shadow: 0 0 24px 7px rgba(0,0,0,0.1);
}

section {
	margin: var(--twice-bassline) 0 var(--twice-bassline) 0;
}

h1, h2, h3 {
	color: #666;
	font-weight: bold;
}

h2 {
	line-height: var(--twice-bassline);
}

details {
	margin: var(--bassline-grid) 0 var(--bassline-grid) 0;
	padding: var(--bassline-grid);
	border-radius: var(--border-radius);
	background-color: #eee;
}

.inline-code {
	display: inline;
	padding: 0 5px 0 5px;
	background-color: #eee;
	font-family: 'Roboto Mono', monospace;
	border-radius: var(--border-radius);
}

.box {
	width: 100px;
	height: 100px;
	border-radius: var(--border-radius);
	background-color: #aaa;
}

.box-transition {
	transition: background-color 1s;
}

.transparent {
	opacity: 0;
}

.redbg {
	background-color: red;
}

JavaScript

///////////////////////////
//// WAYPOINT EXAMPLES ////
///////////////////////////

/* ==============================

Required JavaScript libraries:

Link to these libraries in script tags in the document head

jQuery:
https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js

WayPoints (jQuery verison):
https://cdnjs.cloudflare.com/ajax/libs/waypoints/4.0.1/jquery.waypoints.js

=============================== */

/////////////////////////
// WAYPOINTS EXAMPLE 1 //

var waypoint = $('#box1').waypoint(function(direction) {
  // We use jQuery to select an element and add a CSS from our stylesheet class to it 
  $(this.element).addClass("redbg");
}, {
  offset: '100px' // Offset from top of page
});

/////////////////////////
// WAYPOINTS EXAMPLE 2 //

var waypoint = $('#box2').waypoint(function(direction) {
  // We use jQuery to select an element and add CSS styles from Animate.css
  $(this.element).addClass("animate__animated animate__tada");
}, {
  offset: '100px'
});

/////////////////////////
// WAYPOINTS EXAMPLE 3 //

var waypoint = $('#box3').waypoint(function(direction) {
  // Use a JavaScript conditional statement to add/remove CSS classes based on scroll-direction
  if (direction === "down") {
    // NOTE: we need to also remove the "transparent" class that was originally applied to the element or we get a glitch
    $(this.element).removeClass("transparent animate__animated animate__bounceOut")
      .addClass("animate__animated animate__bounceIn");
  } else {
    $(this.element).removeClass("transparent animate__animated animate__bounceIn")
      .addClass("animate__animated animate__bounceOut");
  }
}, {
  offset: '100px'
});


/////////////////////////////////////
//// GSAP SCROLLTRIGGER EXAMPLES ////
/////////////////////////////////////

/* ==============================

Required JavaScript libraries:

Link to these libraries in script tags in the document head

GSAP Base...