Pen Settings

HTML

CSS

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URL's added here will be added as <link>s in order, and before the CSS in the editor. You can use the CSS from another Pen by using it's URL and the proper URL extention.

+ add another resource

JavaScript

Babel includes JSX processing.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

+ add another resource

Packages

Add Packages

Search for and use JavaScript packages from npm here. By selecting a package, an import statement will be added to the top of the JavaScript editor for this package.

Behavior

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

Format on Save

If enabled, your code will be formatted when you actively save your Pen. Note: your code becomes un-folded during formatting.

Editor Settings

Code Indentation

Want to change your Syntax Highlighting theme, Fonts and more?

Visit your global Editor Settings.

HTML

              
                <!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title>CodePen - Horizontal snapping sections (simple) - ScrollTrigger</title>
  <!-- <link href='//fonts.googleapis.com/css?family=Signika+Negative:300,400,600' rel='stylesheet' type='text/css'><link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"> -->
<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" href="css/cpstyle.css">

</head>
<body>
<!-- partial:index.partial.html -->
<div class="container">
  <div class="description panel blue">
    <div><header>
      <h1>American Football</h1><br>
      <h2>A Concussion Story</h2>
    </header>
    <section class="videogroup">
  <iframe class="video" src="https://www.youtube.com/embed/_dcs9RS7Hi0?autoplay=1&mute=1" title="concussion video" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
  <section class="paragraph1">
    <p>Concussions and football go hand in hand, why do people continue to take the risks? In short, for glory, for pride, for the love of the game.  Above is a mini interview from retired NFL player Thomas Jones, describing how concussions affects one's body.  Concussions lead to CTE, a disease that stems from  multiple concussions and/or brain trauma over time.</p>
    <p>However players also need to have a sense of self preservation when it comes to concussions, and not hide it so that they can keep playing, this is especially common in high school and collegiate games.<br><br>  Doctors have put it in layman's terms, to describe the dangers of football, the brain is soft, the skull is hard, in football tackling, which sometimes is lead with the crown of the
    head/helmet, causes the brain to bounce off the skull, short term wise this might not seem too bad, long term issues will almost be a guarantee.</p>
      <div class="scroll-down">Scroll down<div class="arrow"></div></div>
    </div>
  </div>


  <section class="panel red">
    <figure class="slide-up show-on-scroll" id="column1"><img src="images/peewee.jpg" alt="peewee"></figure>
    <p class="fade-in show-on-scroll" id="column2">Peewee football, normally played with flags, but sometimes they play full contact with the approval from parents, contact football at young ages should be removed, if they wish to protect the health of the children.</p>
  </section>
  <section class="panel orange">
    <section class="row">

        <p class="fade-in show-on-scroll" id="column3">The same can be said for Youth football (high school), they know the risks of injuries but they're playing for fame, glory, pride, and for the prospect of getting a full ride scholarship
          at a good college, and potentially go professional.</p>
          <figure class="slide-up show-on-scroll" id="column4"><img src="images/youth.jpg" alt="youth"></figure>

          </section>
  </section>
  <section class="panel purple">
    <section class="row2">

      <figure class="slide-up show-on-scroll" id="column5"><img src="images/college.jpg" alt="college"></figure>
      <p class="fade-in show-on-scroll" id="column6">Once commited to a college be it a top football school or a middle of the pack one, once in your chances of going pro just became more realistic, now college is the part where people start playing harder,
        because of the prestigious NFL draft that they're all working towards. This is where injuries start, be it minor, career ending, you get a concussion out a week you think you'll be okay, but when those concussions start piling up, the outlook
        on your future career and life change drastically.</p>

      </section>
  </section>
  <section class="panel green">
    <section class="row3">

      <figure class="slide-up show-on-scroll" id="column7"><img src="images/nflsandwhich.jpg" alt="nfl"></figure>
      <p class="fade-in show-on-scroll" id="column8">The NFL, they players have made the league, now they go out there any given sunday and give it their best shot, play their hardest, tackle their hardest, take the hardest hits from the best players, the
        NFL's concussion protocol is not as effective as it should be, when guys get knocked out cold, go into a blue tent, and are given the green light to resume the game.  Despite the good efforts that the NFL does to protect players from getting hit in the head, and preventing players from leading hits using their heads, they have to continue to incentivise players to NOT do this, unless they have a breakthrough in protective gear, the outcome will always be the same after multiple concussions/blows to the head, players need to be held out for longer time by force if they've succumed to multiple concussions in a short time frame.<br><br>
        </p>

        </section>
  </section>
  <section class="panel gray">
    FIVE
  </section>

</div>


<!-- partial -->
  <script src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/16327/gsap-latest-beta.min.js?r=5426'></script>
<script src='https://assets.codepen.io/16327/ScrollTrigger.min.js'></script>
<script src='https://codepen.io/GreenSock/pen/7ba936b34824fefdccfe2c6d9f0b740b.js'></script><script  src="./script.js"></script>
<script  src="js/script.js"></script>

</body>
</html>

              
            
!

CSS

              
                @font-face {
    font-family: 'modern_no._20regular';
    src: url('../font/modern_no._20-webfont.eot');
    src: url('../font/modern_no._20-webfont.eot?#iefix') format('embedded-opentype'),
         url('../font/modern_no._20-webfont.woff2') format('woff2'),
         url('../font/modern_no._20-webfont.woff') format('woff'),
         url('../font/modern_no._20-webfont.svg#modern_no._20regular') format('svg');
    font-weight: normal;
    font-style: normal;

}
/* ----------------------------------------------
 * Generated by Animista on 2021-11-6 16:39:24
 * Licensed under FreeBSD License.
 * See http://animista.net/license for more info.
 * w: http://animista.net, t: @cssanimista
 * ---------------------------------------------- */

/**
 * ----------------------------------------
 * animation text-focus-in
 * ----------------------------------------
 */
@-webkit-keyframes text-focus-in {
  0% {
    -webkit-filter: blur(12px);
            filter: blur(12px);
    opacity: 0;
  }
  100% {
    -webkit-filter: blur(0px);
            filter: blur(0px);
    opacity: 1;
  }
}
@keyframes text-focus-in {
  0% {
    -webkit-filter: blur(12px);
            filter: blur(12px);
    opacity: 0;
  }
  100% {
    -webkit-filter: blur(0px);
            filter: blur(0px);
    opacity: 1;
  }
}

/* MOBILE FIRST */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.parent {
  display:flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
body {
  font-size: 18px;
  background: #000;
}

header {
  color: #fff;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 60px 0 0 60px;
}

header h1 {
  font-size: 2em;
  letter-spacing: 0.05em;
  /* text-align: center; */
  font-family: 'modern_no._20regular';
}

header h2 {
  font-size: 0.9em;
  letter-spacing: 0.05em;
  font-family: 'modern_no._20regular';
	-webkit-animation: text-focus-in 2s cubic-bezier(0.550, 0.085, 0.680, 0.530) both;
	        animation: text-focus-in 2s cubic-bezier(0.550, 0.085, 0.680, 0.530) both;
}

p {
  font-family: arial, sans-serif;
  color: #fff;
  padding: 20px 60px 20px 60px;
  font-size: 18px;
}

/* The side navigation menu */
.sidenav {
  height: 100%;
  /* 100% Full-height */
  width: 0;
  /* 0 width - change this with JavaScript */
  position: fixed;
  /* Stay in place */
  z-index: 1;
  /* Stay on top */
  top: 0;
  /* Stay at the top */
  left: 0;
  background-color: #eee;
  /* Black*/
  overflow-x: hidden;
  /* Disable horizontal scroll */
  padding-top: 60px;
  /* Place content 60px from the top */
  transition: 0.5s;
  /* 0.5 second transition effect to slide in the sidenav */
}

/* The navigation menu links */
.sidenav a {
  padding: 8px 8px 8px 32px;
  text-decoration: none;
  font-size: 18px;
  color: #818181;
  display: block;
  transition: 0.3s;
}

/* When you mouse over the navigation links, change their color */
.sidenav a:hover {
  color: #f1f1f1;
}

/* Position and style the close button (top right corner) */
.sidenav .closebtn {
  position: absolute;
  top: 0;
  right: 25px;
  font-size: 36px;
  margin-left: 50px;
}

.hamburger {
  font-size: 20px;
  cursor: pointer;
  position: fixed;
  top: 20px;
  left: 20px;
  z-index: 9;
  color: #fff;
  font-weight: bold;
}

.hamburger:hover {
  color: red;
}
.logo {
  position: absolute;
  bottom: 0px;
  height: auto;
  width: 100%;
  padding: 8px 8px 8px 32px;
}
.video {
  width: 300px;
  height: 200px;
  padding: 0 0 0 60px;
}

.videogroup p {
  color: #fff;
  padding: 20px 60px 20px 60px;
  font-size: 18px;
}

.paragraph1 {
  width: 100%;
}
.row {
  display: flex;
  flex-direction: column;
}

.images img {
  width: 100%;
  height: auto;
}
/* ---Animation--- */
.slide-up {
  opacity: 0;
  transform: translateY(1em);
  transition: all .5s .6s cubic-bezier(0, .55, .75, 1.29);
  /* transition: all .3s .5s ease-out; */
  /*	will-change: all;*/
}

.slide-up.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.fade-in {
  opacity: 0;
  transition: all 1s 1s ease-out;
}

.fade-in.is-visible {
  opacity: 1;
}

/* === TABLET LAYOUT INHERITS FROM MOBILE 600PX 980PX === */
@media only screen and (min-width: 600px) {
  .sidenav {
    padding-top: 60px;
  }

  .sidenav a {
    font-size: 22px;
  }

  header h1 {
    font-size: 3.5em;
    letter-spacing: 0.05em;
    display: block;
    margin: 0 auto;
    /* text-align: center; */
  }

  header h2 {
    font-size: 2em;
    letter-spacing: 0.05em;
    display: block;
    margin: 0 auto;
  }

  .video {
    width: 500px;
    height: 300px;
    display: block;
    margin: 0 auto;
  }

  .paragraph1 {
    width: 100%;
    display: block;
    margin: 0 auto;
  }
  .row {
    display: flex;
    flex-direction: row;
  }

  .row p{
    width: 50%;
  }
  #column1 {
    flex: 50%;
    padding-left: 60px;
    padding-right: 8px;
  }
  #column2 {
    flex: 50%;
    padding-right: 60px;
    /* padding-left: 10px; */
  }
  #column3 {
    flex: 50%;
    padding-left: 60px;
    padding-right: 10px;
  }
  #column4 {
    flex: 50%;
    padding-right: 60px;
  }
  .row2 {
    flex-direction: column;
    flex-wrap: wrap;
  }
  #column5 {
    flex: 50%;
    width: 100%;
    margin: 0 auto;
    padding: 0 60px 0 60px;

  }
  #column6 {
    flex: 50%;
    padding: 0 60px 0 60px;
  }
  .row3 {
    display: flex;
    flex-direction: row;
    /* flex-wrap: wrap; */
  }
  #column7 {
    flex: 50%;
    padding: 10px 0 0 60px;
  }
  #column7 img {
    height: 33vh;
  }
  #column8 {
    flex: 50%;
    padding: 10px 60px 0 10px;
  }



}

/* === DESKTOP LAYOUT INHERITS FROM MOBILE AND TABLET > 980PX === */
@media only screen and (min-width: 980px) {
  .sidenav {
    padding-top: 60px;
  }

  .sidenav a {
    font-size: 25px;
  }

  header h1 {
    font-size: 4.5em;
    letter-spacing: 0.05em;
    display: block;
    margin: 0 auto;
    /* text-align: center; */
  }

  header h2 {
    font-size: 2.5em;
    letter-spacing: 0.05em;
    display: block;
    margin: 0 auto;
  }

  .video {
    width: 560px;
    height: 315px;
    display: block;
    margin: 0 auto;
  }

  .images img {
    /* width: 560px;
    height: 315px; */
    width: 40vw;
    height: auto;
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0 auto;
  }
  #title {
    height: 30vh;
  }
  .videogroup p {
    width: 65%;
    margin: 0 auto;
  }
  .paragraph1 {
    width: 100%;
    display: block;
    margin: 0 auto;
  }
  p {
    width: 100%;
    margin: 0 auto;
  }
  .row {
    display: flex;
  }
  #column1 {
    flex: 50%;
    /* padding-left: 70px;
    padding-right: 10px; */
  }
  #column2 {
    flex: 50%;
    /* padding-right: 221px;
    bottom: 0; */
  }

  #column3 {
    flex: 50%;
    /* padding-left: 121px;
    padding-top: 10px; */

  }
  #column4 {
    flex: 88%;
  }
  .row2 {
    flex-direction: row;
    height: auto;
  }
  #column5 {
    flex: 50%;
    width: 100%;
  }
  #column5 img {
    width: 50vw;
    height: auto;
    /* padding-right: 61px;
    padding-top: 10px; */
  }
  #column6 {
    flex: 50%;
    /* padding: 10px 481px 0 473px; */
  }
  .row3 {
  flex-direction: row-reverse;
  column-count: 2;
  }
  #column7 {
    flex: 100%;
    /* padding:0 458px 10px 0; */
  }
  #column7 img {
    width: 80%;
    height: auto;
  }
  #column8 {
    flex: 50%;
    /* padding-left: 473px; */
    /* column-count: 2; */
  }

  .container {
  width:400%;
  height:100vh;
  overflow: hidden;
  display: flex;
  flex-flow: row nowrap;
}
.container section {
  position: relative;
  flex-basis: 100%;
  width:100vw;
  height: 100vh;
  display: flex;
  justify-content: flex-start;
  align-items: center;
}

article {
  /* border:1px red solid; */
  position:absolute;
  right:0;
  top:0;
  width:40%;
  height: 100vh;
  padding: 100px;
  /* background: #eee; */
  color: #333;
  z-index: 1;
}
article h3 {
  font-size: 9vmax;
    line-height: 8.6vmax;
    /* border:1px solid red; */
  font-family: gotham,sans-serif;
}
article p {
  font-size: 16px;
  font-family: gotham,sans-serif;
  margin-bottom: 20px;
  line-height: 24px;
}

article.a4 {
  /* border:1px red solid; */
  position:absolute;
  right:20%;
  top:0;
  height: 100vh;
  padding: 100px;
  /* background: #eee; */
  color: #333;
  z-index: 1;
}

.anim_container {
  position: relative;
  border-bottom: 1px #333 solid;
  /* padding-bottom: 10px; */
  margin-bottom: 20px;
  overflow: hidden;
  display:flex;
  flex-flow: row nowrap;
  width: 100%;
}

.panel.align-top {
  align-items: flex-start;
}

.panel h1 {
  font-size: 1.8em;
  color: white;
  font-weight: 300;
  margin: 0 auto;
}
.panel.description {
  padding-bottom: 60px;
}
.panel p, .panel li {
  color: black;
  font-weight: 400;
  text-align: left;
  font-size: 0.8em;
  line-height: 1.5em;
  margin: 0.3em 0 1em 0;
}
.panel p strong, .panel li strong {
  color: white;
  font-weight: 400;
}
.panel p code, .panel li code {
  background-color: rgba(255,255,255,0.15);
  padding: 2px 4px;
  border-radius: 5px;
}
.panel li {
  margin: 0;
}


html, body {W
  margin: 0;
  height: 100%;
  -webkit-overflow-scrolling: touch;
  overflow-scrolling: touch;
}

.panel {
	width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  font-weight: 600;
  font-size: 1.5em;
  text-align: center;
  color: white;
  position: relative;
  box-sizing: border-box;
  padding: 10px;
}

body {
  overflow-x: hidden;
  overflow-y: scroll;
}

h1, h2, p, li {
  max-width: 800px;
}

/* HEADER */
header {
  position: fixed;
  top: 0px;
  left: 0px;
  padding: 6px 10px 10px 10px;
  border-bottom-right-radius: 26px;
  z-index: 100;
  background-color: rgba(0,0,0,0.5);
  will-change: transform;
}

/* HEADINGS */
.header-section {
  padding: 0 15px;
  text-align: center;
  margin: 40vh auto 50vh;
}

/* SCROLL DOWN */
.scroll-down {
  position: absolute;
  bottom: 30px;
  left: 50%;
  transform: translate(-50%, 0);
  color: black;
  font-weight: 400;
  text-transform: uppercase;
  font-size: 16px;
  overflow: visible;
}
.scroll-down .arrow {
  position: relative;
  top: -4px;
  margin: 0 auto;
  width: 20px;
  height: 20px;
  background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4KPHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA1MTIgNTEyIj4KPHBhdGggZmlsbD0iYmxhY2siIGQ9Ik00ODMuMiwxOTIuMmMtMjAuNS0yMC41LTUzLjUtMjAuOC03My43LTAuNkwyNTcsMzQ0LjFMMTA0LjUsMTkxLjZjLTIwLjItMjAuMi01My4yLTE5LjktNzMuNywwLjYKCWMtMjAuNSwyMC41LTIwLjgsNTMuNS0wLjYsNzMuN2wxOTAsMTkwYzEwLjEsMTAuMSwyMy40LDE1LjEsMzYuOCwxNWMxMy4zLDAuMSwyNi43LTQuOSwzNi44LTE1bDE5MC0xOTAKCUM1MDMuOSwyNDUuNyw1MDMuNywyMTIuNyw0ODMuMiwxOTIuMnoiLz4KPC9zdmc+);
  background-size: contain;
}

.arrow-right {
  transform: rotate(-90deg);
  position: relative;
  top: -4px;
  margin: 1rem auto;
  width: 20px;
  height: 20px;
  background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4KPHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA1MTIgNTEyIj4KPHBhdGggZmlsbD0iYmxhY2siIGQ9Ik00ODMuMiwxOTIuMmMtMjAuNS0yMC41LTUzLjUtMjAuOC03My43LTAuNkwyNTcsMzQ0LjFMMTA0LjUsMTkxLjZjLTIwLjItMjAuMi01My4yLTE5LjktNzMuNywwLjYKCWMtMjAuNSwyMC41LTIwLjgsNTMuNS0wLjYsNzMuN2wxOTAsMTkwYzEwLjEsMTAuMSwyMy40LDE1LjEsMzYuOCwxNWMxMy4zLDAuMSwyNi43LTQuOSwzNi44LTE1bDE5MC0xOTAKCUM1MDMuOSwyNDUuNyw1MDMuNywyMTIuNyw0ODMuMiwxOTIuMnoiLz4KPC9zdmc+);
  background-size: contain;
}


              
            
!

JS

              
                $(document).ready(function() {
$('html, body, *').mousewheel(function(e, delta) {
this.scrollLeft -= (delta);
e.preventDefault();
});
});

gsap.registerPlugin(ScrollTrigger);

let sections = gsap.utils.toArray(".panel");

gsap.to(sections, {
  xPercent: -100 * (sections.length - 1),
  ease: "none",
  scrollTrigger: {
    trigger: ".container",
    pin: true,
    scrub: 1,
    snap: 1 / (sections.length - 1),
    // base vertical scrolling on how wide the container is so it feels more natural.
    end: "+=3500",
  }
});


// I added this to the original code to enable a smooth scroll on click

$(document).ready(function(){
  // Add smooth scrolling to all links
  $("a").on('click', function(event) {

    // Make sure this.hash has a value before overriding default behavior
    if (this.hash !== "") {
      // Prevent default anchor click behavior
      event.preventDefault();

      // Store hash
      var hash = this.hash;

      // Using jQuery's animate() method to add smooth page scroll
      // The optional number (800) specifies the number of milliseconds it takes to scroll to the specified area
      $('html, body').animate({
        scrollLeft: $(hash).offset().left
      }, 800, function(){

        // Add hash (#) to URL when done scrolling (default click behavior)
        window.location.hash = hash;
      });
    } // End if
  });
});

gsap.registerPlugin(ScrollTrigger);

let sections = gsap.utils.toArray(".panel");

gsap.to(sections, {
  xPercent: -100 * (sections.length - 1),
  ease: "none",
  scrollTrigger: {
    trigger: ".container",
    pin: true,
    scrub: 1,
    snap: 1 / (sections.length - 1),
    // base vertical scrolling on how wide the container is so it feels more natural.
    end: "+=3500",
  }
});

              
            
!
999px

Console