@import url('https://fonts.googleapis.com/css2?family=Barlow+Semi+Condensed:wght@700&display=swap');

​

body {

  margin:0;

}

​

.yellow {

  background:#FFCA29;

}

​

.blue {

  background:#6699FC;

}

​

​

​

/* css from Sarah Drasner's Hero Generator */

​

​

.yellow {

  background:#FFD54F;

}

​

.fillViewport {

  display: flex;

  justify-content: center;

  align-items: center;

  flex-direction: column;

  text-align: center;

  width: 100%;

  height: 100vh; /* if you don't want it to take up the full screen, reduce this number */

  overflow: hidden;

}

​

.masthead {

  background: radial-gradient(ellipse at center, rgba(0,0,0,0) 0%, rgba(0,0,0,0) 37%, rgba(0,0,0,0.65) 100%), url(https://assets.codepen.io/32887/jonathan-riley-VW8MUbHyxCU-unsplash.jpg) no-repeat center top scroll;

  background-size: cover;

}

​

h1 {

  font-family: 'Barlow Semi Condensed', sans-serif;

  font-style: normal;

  font-weight: bold;

  color: #eee;

  font-size: 11vmin;

  letter-spacing: 0.03em;

  line-height: 1;

  text-shadow: 1px 2px 4px rgba(0, 0, 0, 0.8);

  margin-bottom: 40px;

}

button {

  background: #DD2C00;

  transition: background ease .25s;

  border-radius: 5px;

  display: inline-block;

  border: none;

  padding: 0.75rem 1.5rem;

  margin: 0;

  text-decoration: none;

  color: #ffffff;

  font-size: 1.2rem;

  cursor: pointer;

  text-align: center;

  -webkit-appearance: none;

  -moz-appearance: none;

}

button:hover {

  background: #63b6b8

}

button:focus {

  outline: 1px solid #fff;

  outline-offset: -4px;

}

​

let split = new SplitText(".headerText")

​

let tl = gsap.timeline({scrollTrigger:{

  trigger:".masthead",

  start:"top 50%",

  end:"bottom top",

  toggleActions:"restart none none reset"

}})

.from(split.chars, {yPercent:-100,  stagger:0.05, duration:0.3, ease:"back"})

.from(split.chars, {opacity:0, stagger:0.05, duration:0.2}, 0)

.from("button", {y:100, opacity:0, ease:"back", duration:1}, "<1")

​

//need help learning GSAP? 

//check out my courses: https://www.creativeCodingClub.com