<div class="container">
	<div class="wrapper">
		<h1 class="txt">ETC</h1>
		<h1 class="txt">ETC</h1>
		<h1 class="txt">ETC</h1>
		<h1 class="txt">ETC</h1>
	</div>
</div>

<div class="collection">
	<a class="collection__link" href="https://codepen.io/collection/02388423440b98155f8e4002bde094f2" target='_blank'>The GSAP 3 collection<span></span></a>
</div>

<a href="https://greensock.com" target="_blank"><img class="gsap-3-logo" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/16327/gsap-3-logo.svg" width="150" /></a>

@font-face {
	font-family: 'Anybody';
	src: url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/61488/ETCAnybodyPB.woff2') format('woff2-variations');
	font-display: block;
	font-style: normal italic;
	font-weight: 100 900;
	font-stretch: 10% 400%;
}

html {
	box-sizing: border-box;
}
*,
*:before,
*:after {
	box-sizing: inherit;
}

body,
html {
	height: 100%;
	width: 100%;
	margin: 0;
	padding: 0;
}

body {
	background: black;
	font-family: 'Anybody';
	color: white;
}

.container {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 100%;
	visibility: hidden;
	opacity: 0;
}

.wrapper {
	display: flex;
}

h1 {
	margin: 0;
	font-size: 32px;
	text-transform: uppercase;
	font-weight: 900;
	font-stretch: 400%;
}

.gsap-3-logo {
	width: 20vw;
	max-width: 150px;
	position: fixed;
	bottom: 15px;
	right: 15px;
}

/*  ==========================================================
	Collection Linl
	========================================================== */

.collection {
	position: fixed;
	z-index: 1000;
	top: 24px;
	right: 24px;
	display: flex;
	flex-direction: column;
}

.collection__link {
	position: relative;
	margin-bottom: 16px;
	color: white;
	font-family: Helvetica, sans-serif;
	text-decoration: none;
	font-size: 16px;

	span {
		display: block;
		position: absolute;
		bottom: -3px;
		left: 0;
		height: 1px;
		width: 10%;
		background-color: white;
		content: "";
		transition: width 0.3s;
	}

	&:hover span{
		width: 100%;
	}
}
View Compiled
console.clear();

mySplitText = new SplitText(".txt", {type:"chars", charsClass:"char"}); 

let gtl = gsap.timeline({ yoyo: true, repeat: -1, delay: 0 });

function animateText() {
	let tl = gsap.timeline()
		.to( '.char', {
			fontWeight: 100,
			fontStretch: '10%',
			ease: "sine.inOut",
			duration: 0.8,
			stagger: {
				each: 0.4,
				yoyo: true,
				repeat: -1
			}
		} );
	
	return tl;
}

gsap.to('.container', {
	autoAlpha: 1,
	duration: 4,
	ease: 'none'
})

gtl.add(animateText())
	.seek(6)
	.play();

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/gsap/3.0.0/gsap.min.js
  2. https://s3-us-west-2.amazonaws.com/s.cdpn.io/16327/SplitText3.min.js