index8.html

<!DOCTYPE html>
<html lang="en" class="no-js">
	<head>
		<meta charset="UTF-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<title>On-Scroll Column & Row Animations | Demo 1 | Codrops</title>
		<meta name="description" content="Scroll-driven animations for columns and rows powered by GSAP" />
		<meta name="keywords" content="scroll animation, grid, column, javascript, css, gsap, 3d, distort" />
		<meta name="author" content="Codrops" />
		<link rel="shortcut icon" href="favicon.ico">
		<link rel="stylesheet" href="https://use.typekit.net/rzt6nuu.css">
		<link rel="stylesheet" type="text/css" href="css/base.css" />
		<script>document.documentElement.className="js";var supportsCssVars=function(){var e,t=document.createElement("style");return t.innerHTML="root: { --tmp-var: bold; }",document.head.appendChild(t),e=!!(window.CSS&&window.CSS.supports&&window.CSS.supports("font-weight","var(--tmp-var)")),t.parentNode.removeChild(t),e};supportsCssVars()||alert("Please view this demo in a modern browser that supports CSS Variables.");</script>
		<script src="//tympanus.net/codrops/adpacks/analytics.js"></script>
	</head>
	<body class="demo-8 loading">
		<main>
			<div class="frame">
				<h1 class="frame__title">On-Scroll Column & Row Animations</h1> 
				<a class="frame__back" href="https://tympanus.net/codrops/?p=73182">Article</a>
				<a class="frame__prev" href="https://tympanus.net/Development/Scroll3DGrid/">Previous demo</a>
				<nav class="frame__demos">
					<span class="frame__demos-item">Variations: </span>
					<a class="frame__demos-item" href="index.html">1</a>
					<a class="frame__demos-item" href="index2.html">2</a>
					<a class="frame__demos-item" href="index3.html">3</a>
					<a class="frame__demos-item" href="index4.html">4</a>
					<a class="frame__demos-item" href="index5.html">5</a>
					<a class="frame__demos-item" href="index6.html">6</a>
					<a class="frame__demos-item" href="index7.html">7</a>
					<span class="frame__demos-item">8</span>
					<a class="frame__demos-item" href="index9.html">9</a>
					<a class="frame__demos-item" href="index10.html">10</a>
				</nav>
			</div>
			<div class="columns">
		       <div class="column">
		            <figure class="column__item">
		                <div class="column__item-imgwrap">
		                    <div class="column__item-img" style="background-image:url(img/10.jpg)"></div>
		                </div>
		            </figure>
		            <figure class="column__item">
		                <div class="column__item-imgwrap">
		                    <div class="column__item-img" style="background-image:url(img/11.jpg)"></div>
		                </div>
		            </figure>
		            <figure class="column__item">
		                <div class="column__item-imgwrap">
		                    <div class="column__item-img" style="background-image:url(img/12.jpg)"></div>
		                </div>
		            </figure>
		            <figure class="column__item">
		                <div class="column__item-imgwrap">
		                    <div class="column__item-img" style="background-image:url(img/13.jpg)"></div>
		                </div>
		            </figure>
		            <figure class="column__item">
		                <div class="column__item-imgwrap">
		                    <div class="column__item-img" style="background-image:url(img/14.jpg)"></div>
		                </div>
		            </figure>
		            <figure class="column__item">
		                <div class="column__item-imgwrap">
		                    <div class="column__item-img" style="background-image:url(img/15.jpg)"></div>
		                </div>
		            </figure>
		            <figure class="column__item">
		                <div class="column__item-imgwrap">
		                    <div class="column__item-img" style="background-image:url(img/16.jpg)"></div>
		                </div>
		            </figure>
		            <figure class="column__item">
		                <div class="column__item-imgwrap">
		                    <div class="column__item-img" style="background-image:url(img/17.jpg)"></div>
		                </div>
		            </figure>
		        </div><!-- /column -->
		        <div class="column">
		            <figure class="column__item">
		                <div class="column__item-imgwrap">
		                    <div class="column__item-img" style="background-image:url(img/18.jpg)"></div>
		                </div>
		            </figure>
		            <figure class="column__item">
		                <div class="column__item-imgwrap">
		                    <div class="column__item-img" style="background-image:url(img/19.jpg)"></div>
		                </div>
		            </figure>
		            <figure class="column__item">
		                <div class="column__item-imgwrap">
		                    <div class="column__item-img" style="background-image:url(img/20.jpg)"></div>
		                </div>
		            </figure>
		            <figure class="column__item">
		                <div class="column__item-imgwrap">
		                    <div class="column__item-img" style="background-image:url(img/21.jpg)"></div>
		                </div>
		            </figure>
		            <figure class="column__item">
		                <div class="column__item-imgwrap">
		                    <div class="column__item-img" style="background-image:url(img/22.jpg)"></div>
		                </div>
		            </figure>
		            <figure class="column__item">
		                <div class="column__item-imgwrap">
		                    <div class="column__item-img" style="background-image:url(img/23.jpg)"></div>
		                </div>
		            </figure>
		            <figure class="column__item">
		                <div class="column__item-imgwrap">
		                    <div class="column__item-img" style="background-image:url(img/24.jpg)"></div>
		                </div>
		            </figure>
		            <figure class="column__item">
		                <div class="column__item-imgwrap">
		                    <div class="column__item-img" style="background-image:url(img/25.jpg)"></div>
		                </div>
		            </figure>
		        </div><!-- /column -->
		        <div class="column">
		            <figure class="column__item">
		                <div class="column__item-imgwrap">
		                    <div class="column__item-img" style="background-image:url(img/26.jpg)"></div>
		                </div>
		            </figure>
		            <figure class="column__item">
		                <div class="column__item-imgwrap">
		                    <div class="column__item-img" style="background-image:url(img/27.jpg)"></div>
		                </div>
		            </figure>
		            <figure class="column__item">
		                <div class="column__item-imgwrap">
		                    <div class="column__item-img" style="background-image:url(img/28.jpg)"></div>
		                </div>
		            </figure>
		            <figure class="column__item">
		                <div class="column__item-imgwrap">
		                    <div class="column__item-img" style="background-image:url(img/29.jpg)"></div>
		                </div>
		            </figure>
		            <figure class="column__item">
		                <div class="column__item-imgwrap">
		                    <div class="column__item-img" style="background-image:url(img/30.jpg)"></div>
		                </div>
		            </figure>
		            <figure class="column__item">
		                <div class="column__item-imgwrap">
		                    <div class="column__item-img" style="background-image:url(img/31.jpg)"></div>
		                </div>
		            </figure>
		            <figure class="column__item">
		                <div class="column__item-imgwrap">
		                    <div class="column__item-img" style="background-image:url(img/32.jpg)"></div>
		                </div>
		            </figure>
		            <figure class="column__item">
		                <div class="column__item-imgwrap">
		                    <div class="column__item-img" style="background-image:url(img/33.jpg)"></div>
		                </div>
		            </figure>
		        </div><!-- /column -->
				<div class="column">
		            <figure class="column__item">
		                <div class="column__item-imgwrap">
		                    <div class="column__item-img" style="background-image:url(img/34.jpg)"></div>
		                </div>
		            </figure>
		            <figure class="column__item">
		                <div class="column__item-imgwrap">
		                    <div class="column__item-img" style="background-image:url(img/35.jpg)"></div>
		                </div>
		            </figure>
		            <figure class="column__item">
		                <div class="column__item-imgwrap">
		                    <div class="column__item-img" style="background-image:url(img/36.jpg)"></div>
		                </div>
		            </figure>
		            <figure class="column__item">
		                <div class="column__item-imgwrap">
		                    <div class="column__item-img" style="background-image:url(img/37.jpg)"></div>
		                </div>
		            </figure>
		            <figure class="column__item">
		                <div class="column__item-imgwrap">
		                    <div class="column__item-img" style="background-image:url(img/38.jpg)"></div>
		                </div>
		            </figure>
		            <figure class="column__item">
		                <div class="column__item-imgwrap">
		                    <div class="column__item-img" style="background-image:url(img/39.jpg)"></div>
		                </div>
		            </figure>
		            <figure class="column__item">
		                <div class="column__item-imgwrap">
		                    <div class="column__item-img" style="background-image:url(img/40.jpg)"></div>
		                </div>
		            </figure>
		            <figure class="column__item">
		                <div class="column__item-imgwrap">
		                    <div class="column__item-img" style="background-image:url(img/1.jpg)"></div>
		                </div>
		            </figure>
		        </div><!-- /column -->
			</div><!-- columns -->
		<section class="outro">
				<h2 class="outro__title">More you might like</h2>
				<div class="card-wrap">
					<div class="card">
						<a href="https://tympanus.net/Development/TileScroll/" class="card__image" style="background-image:url(https://tympanus.net/codrops/wp-content/uploads/2020/10/ScrollAnimationLocomotive.jpg"></a>
						<h3 class="card__title"><a href="https://tympanus.net/Development/TileScroll/">Scroll-Based Layout Animations</a></h3>
					</div>
					<div class="card">
						<a href="https://tympanus.net/Development/ColumnScroll/" class="card__image" style="background-image:url(https://tympanus.net/codrops/wp-content/uploads/2021/12/columscroll_feat.jpg)"></a>
						<h3 class="card__title"><a href="https://tympanus.net/Development/ColumnScroll/">On-Scroll SVG Filter Effect</a></h3>
					</div>
				</div>
			</section>
			<p class="credits">Made by <a href="https://twitter.com/codrops">@codrops</a></p>
		</main>
		<script src="https://tympanus.net/codrops/adpacks/cda_sponsor.js"></script>
		<script src="js/gsap.min.js"></script>
		<script src="js/ScrollTrigger.min.js"></script>
		<script src="js/lenis.min.js"></script>
		<script src="js/imagesloaded.pkgd.min.js"></script>
		<script type="module" src="js/index8.js"></script>
	</body>
</html>