Reveal on scroll

Html

<div class="wrap">
	<!-- .wrap is only for more vertical spacing -->
	<div class="row">
		<div class="col-4" data-reveal="x-1">
			<h2>Effect data-reveal="x-1"</h2>
		</div>
		<div class="col-4" data-reveal="x-1">
			<h2>Effect data-reveal="x-1"</h2>
		</div>
		<div class="col-4" data-reveal="x-1">
			<h2>Effect data-reveal="x-1"</h2>
		</div>
		<div class="col-4" data-reveal="img-1">
			<h4>Effect data-reveal="img-1"</h4>
			<img src="../assets/images/img3.jpg" />
		</div>
		<div class="col-4" data-reveal="img-1">
			<h4>Effect data-reveal="img-1"</h4>
			<img src="../assets/images/img2.png" />
		</div>
		<div class="col-4" data-reveal="img-1">
			<h4>Effect data-reveal="img-1"</h4>
			<img src="../assets/images/img1.jpg" />
		</div>
	</div>
</div>
<div class="wrap">
	<!-- .wrap is only for more vertical spacing -->
	<div class="row">
		<div class="col-4" data-reveal="x-2">
			<h2>Effect data-reveal="x-2"</h2>
		</div>
		<div class="col-4" data-reveal="x-2">
			<h2>Effect data-reveal="x-2"</h2>
		</div>
		<div class="col-4" data-reveal="x-2">
			<h2>Effect data-reveal="x-2"</h2>
		</div>
		<div class="col-4" data-reveal="img-1">
			<h4>Effect data-reveal="img-1"</h4>
			<img src="../assets/images/img3.jpg" />
		</div>
		<div class="col-4" data-reveal="img-1">
			<h4>Effect data-reveal="img-1"</h4>
			<img src="../assets/images/img2.png" />
		</div>
		<div class="col-4" data-reveal="img-1">
			<h4>Effect data-reveal="img-1"</h4>
			<img src="../assets/images/img1.jpg" />
		</div>
	</div>
</div>
<div class="wrap">
	<!-- .wrap is only for more vertical spacing -->
	<div class="row">
		<div class="col-4" data-reveal="y-1">
			<h2>Effect data-reveal="y-1"</h2>
		</div>
		<div class="col-4" data-reveal="y-1">
			<h2>Effect data-reveal="y-1"</h2>
		</div>
		<div class="col-4" data-reveal="y-1">
			<h2>Effect data-reveal="y-1"</h2>
		</div>
		<div class="col-4" data-reveal="img-1">
			<h4>Effect data-reveal="img-1"</h4>
			<img src="../assets/images/img3.jpg" />
		</div>
		<div class="col-4" data-reveal="img-1">
			<h4>Effect data-reveal="img-1"</h4>
			<img src="../assets/images/img2.png" />
		</div>
		<div class="col-4" data-reveal="img-1">
			<h4>Effect data-reveal="img-1"</h4>
			<img src="../assets/images/img1.jpg" />
		</div>
	</div>
</div>
<div class="wrap">
	<!-- .wrap is only for more vertical spacing -->
	<div class="row">
		<div class="col-4" data-reveal="y-2">
			<h2>Effect data-reveal="y-2"</h2>
		</div>
		<div class="col-4" data-reveal="y-2">
			<h2>Effect data-reveal="y-2"</h2>
		</div>
		<div class="col-4" data-reveal="y-2">
			<h2>Effect data-reveal="y-2"</h2>
		</div>
		<div class="col-4" data-reveal="img-1">
			<h4>Effect data-reveal="img-1"</h4>
			<img src="../assets/images/img3.jpg" />
		</div>
		<div class="col-4" data-reveal="img-1">
			<h4>Effect data-reveal="img-1"</h4>
			<img src="../assets/images/img2.png" />
		</div>
		<div class="col-4" data-reveal="img-1">
			<h4>Effect data-reveal="img-1"</h4>
			<img src="../assets/images/img1.jpg" />
		</div>
	</div>
</div>

Scss

		
// local variables
$reveal-large: 12rem;
$reveal-small: 8rem;

// base reveal animation
[data-reveal] {
	@for $i from 1 through 14 {
		&:nth-child(#{$i}) {
			transition-delay: $i*.08s;
		}
	}
}
// transition for img with overlay
[data-reveal^="img"] {
    position: relative;
    overflow:hidden;
    @for $i from 1 through 14 {
        &:nth-child(#{$i}) {
            &:after {
                transition-delay: $i*.08s;
            }
        }
    }
    &:after {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        height: 100%;
        width: 100%;
        background-color: $color-white;
        transform-origin: center top;
        overflow: hidden;
        transform: scaleY(1);
        transition: $transition--slow;
    }
    img {
        transition-delay: .8s;
        transform: translate3d(0,100%,0);
        transition: $transition--slow;
    }
    &.is-visible {
        &:after {
            transform: scaleY(0);
        }

        img {
            transform: translate3d(0,0,0);
        }
    }
}

// simple transition for transform translate 3d
[data-reveal^="y"], [data-reveal^="x"] {
	transition: $transition;
	opacity: 0;

	&.is-visible {
		opacity: 1;
		transform: translate3d(0,0,0);
		-webkit-transform: translate3d(0,0,0);
	}
}
// translateY
[data-reveal="y-1"] {
	transform: translate3d(0,$reveal-large,0);
	-webkit-transform: translate3d(0,$reveal-large,0);
}

[data-reveal="y-2"] {
	transform: translate3d(0,$reveal-small,0);
	-webkit-transform: translate3d(0,$reveal-small,0);
}
// translateX
[data-reveal="x-1"] {
	transform: translate3d(-$reveal-large,0,0);
	-webkit-transform: translate3d(-$reveal-large,0,0);
}

[data-reveal="x-2"] {
	transform: translate3d(-$reveal-small,0,0);
	-webkit-transform: translate3d(-$reveal-small,0,0);
}

JavaScript - ClickhandlerModule.ts

 
	
export class revealOnScrollModule {
	revealItem: NodeList = document.querySelectorAll("[data-reveal]");
	revealItems: HTMLElement[] = Array.prototype.slice.call(this.revealItem);
	isVisibleClass: string = "is-visible";

	constructor() {
		this.inViewCheck();
		window.addEventListener("scroll", this.inViewCheck, false);
		window.addEventListener("resize", this.inViewCheck, false);
	}
	private inViewCheck = () => {
		let windowHeight: number = window.innerHeight;
		let windowScrollPosition: number = window.pageYOffset || document.documentElement.scrollTop;
		// get window height, top and bottom
		let windowBottomPosition: number = (windowScrollPosition + windowHeight);

		// loop over all elemntes.
		this.revealItems.forEach((element: HTMLElement) => {
			// get elements height, top and bottom positioning
			let elementHeight: number = element.offsetHeight;
			let elementTopPosition: number = element.offsetTop;
			let elementBottomPosition: number = (elementTopPosition + elementHeight);

			if ((elementBottomPosition >= windowScrollPosition) &&
				(elementTopPosition <= windowBottomPosition)) {
				// add class if element is in viewport
				element.classList.add(this.isVisibleClass);
			}
		});
	}
}