<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();
This Pen doesn't use any external CSS resources.