Pen Settings

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. If you link to another Pen, it will include the CSS from that Pen. If the preprocessor matches, it will attempt to combine them before processing.

+ add another resource

You're using npm packages, so we've auto-selected Babel for you here, which we require to process imports and make it all work. If you need to use a different JavaScript preprocessor, remove the packages in the npm tab.

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

Use npm Packages

We can make npm packages available for you to use in your JavaScript. We use webpack to prepare them and make them available to import. We'll also process your JavaScript with Babel.

⚠️ This feature can only be used by logged in users.

Code Indentation

     

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.

HTML Settings

Here you can Sed posuere consectetur est at lobortis. Donec ullamcorper nulla non metus auctor fringilla. Maecenas sed diam eget risus varius blandit sit amet non magna. Donec id elit non mi porta gravida at eget metus. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.

            
              <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Provident incidunt expedita, quo perferendis optio necessitatibus molestias autem impedit. Commodi possimus, perferendis voluptas error eius consequatur excepturi nobis cupiditate velit saepe vitae minus adipisci animi repellat pariatur cumque aspernatur voluptatibus laudantium natus! Fugit quae, nesciunt consequatur, ab id aperiam incidunt error atque consequuntur iure totam officia quidem. Dolores dolorum nulla natus!</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Corrupti nesciunt reiciendis magni impedit voluptatum ad natus eaque dolores eius suscipit, ex, quia tempora, dignissimos voluptates saepe! Rerum culpa veniam excepturi laboriosam labore voluptas velit cum, molestiae, corporis dolorum architecto totam. Dolores, quae, animi. Distinctio necessitatibus nesciunt quibusdam iusto quaerat, quidem vero ipsum, magnam, sapiente nobis nulla obcaecati laborum culpa odio!</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Veniam fuga harum nemo expedita nihil blanditiis, pariatur officiis corporis, velit facilis excepturi. Voluptatibus nostrum nihil eligendi dolore repudiandae corrupti, neque quaerat ex corporis eum reiciendis. Doloremque autem soluta ipsa aliquid odit nulla ullam, ipsum, quam eveniet quasi ad quae molestiae recusandae dicta voluptates quia sint tempora ipsam eius suscipit temporibus qui!</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Blanditiis libero tenetur eaque eius deleniti itaque similique ipsam voluptas saepe facilis dicta, rerum quia, ducimus natus magni voluptatum nesciunt! Blanditiis praesentium quasi, inventore dolores quos! Officiis voluptatum accusantium atque provident alias, dolorem ad autem. Sequi quia modi ducimus. Adipisci vel illum esse, voluptatibus iste, consequatur quia dicta, eos voluptas ipsum minima!</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repudiandae laborum voluptatem cum, quia error deleniti omnis provident ullam harum, iste quod nobis corporis quisquam suscipit beatae ab repellendus eos rem porro. Sunt ducimus repudiandae consequatur quaerat quos rem repellat provident eaque, a debitis? Explicabo repudiandae beatae placeat fugit error rem eum sequi asperiores, eaque, veritatis natus, cum, nostrum hic deserunt?</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Totam maxime ratione consequuntur accusantium deleniti reiciendis inventore obcaecati est praesentium debitis? Reiciendis delectus harum maxime, sequi impedit explicabo facilis, exercitationem, a pariatur, itaque deleniti quia ipsa possimus id eaque doloribus hic. Quos saepe doloremque ipsum modi asperiores debitis minima blanditiis, voluptas ut! Cumque nulla, delectus, iure in itaque asperiores placeat fugit.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Labore velit numquam facilis consectetur enim a, amet ipsa? Minus expedita dignissimos nihil itaque deleniti aperiam ab obcaecati consequatur possimus distinctio blanditiis ad ea qui perferendis vero nemo, voluptatibus ut laboriosam error, quas illum. Laudantium, earum beatae animi numquam, ducimus officia unde deserunt quod, placeat atque assumenda error doloribus quisquam voluptates pariatur!</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eaque saepe dolor dolore, quam quas corporis at, veritatis totam laboriosam explicabo velit. Dignissimos iusto vero earum, modi veritatis blanditiis mollitia cumque ducimus maiores eius aliquam deleniti, ipsam eligendi repellat neque ratione error itaque ea amet ex, ipsum. Odit aut, ad beatae nostrum mollitia obcaecati nobis excepturi placeat error! At, expedita, esse.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quae sint sunt, labore dolorem voluptate, voluptatem a quod facilis dolores dolore sit, pariatur rerum modi saepe molestiae! Deleniti sapiente ipsa, expedita numquam, placeat maxime dolorum eum molestiae ipsam architecto dolorem ab facere a corporis facilis sequi neque doloremque quidem necessitatibus explicabo! Totam obcaecati dolor, eum sequi quam rerum eos dignissimos cum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quisquam consequatur, laborum reiciendis a architecto, excepturi perferendis, soluta voluptatibus aliquam aut repudiandae iusto quidem itaque esse! Excepturi voluptas voluptate debitis, nihil eius totam non reiciendis? Maxime quibusdam iure inventore, ipsum deleniti, qui eaque itaque quam maiores ipsa, assumenda quidem ipsam. Esse quod nihil officia eligendi, iste veniam placeat accusamus officiis laudantium.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Officia ratione aliquam dignissimos iure quas assumenda minus pariatur, quia unde fugit inventore, fugiat eaque laborum autem iusto vel ipsam veritatis odio molestias nulla perspiciatis at mollitia libero vero magni. Autem earum expedita hic nulla nesciunt, vel, natus, qui odit recusandae dolores ratione impedit quae neque maxime praesentium labore tempore, sint. Quasi.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fugit similique nulla, quis dolorum iusto voluptates blanditiis amet laborum nihil eligendi explicabo beatae at est, perferendis. Ipsum quidem molestiae sapiente dicta neque temporibus libero, cumque quod cupiditate reiciendis illo veniam laudantium consequuntur, nisi hic ullam. Minima impedit cupiditate neque, maiores est laudantium dolore mollitia quaerat iure animi sunt, dignissimos temporibus sed!</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolorem sed ipsam sint consectetur ex corrupti molestias, delectus veniam ea quo autem veritatis et eius eum similique libero harum incidunt quidem est ducimus necessitatibus, consequatur tempore? Neque eaque, nobis veniam aliquid iste dolores excepturi, ad sunt possimus, nam, id cupiditate. Eos, nulla! Excepturi dolores doloremque aperiam magnam fugit aliquam. Quo, totam.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vel eos molestias reiciendis commodi laboriosam necessitatibus. Culpa eaque quas voluptate possimus, aliquid nulla quo sit quae tempore commodi repudiandae facilis beatae at quasi exercitationem similique numquam sed laudantium, autem in quibusdam! Vitae non in sequi consequatur quos eveniet similique omnis voluptatum! In, possimus eius. Aliquam est maxime nobis enim illum, ipsam.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Libero neque vero modi similique laborum, facere unde, ab veniam eligendi rem dicta non dolores. Laboriosam iusto, earum voluptate animi accusantium deserunt accusamus, dolorem ea ab, quas quisquam reprehenderit id consectetur quidem quam aperiam! Repellat ullam accusantium asperiores tenetur deserunt, illum non officiis sit perspiciatis officia quas, impedit in nam aliquam totam!</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Hic delectus ad deleniti, possimus eos tempore voluptas dolorum, distinctio, cumque atque dicta. Labore quos odit facere ex illo, vero, commodi consequatur, exercitationem adipisci ab dolores itaque at rerum ducimus laboriosam tenetur sunt aperiam earum debitis veniam magnam quasi! Animi, reiciendis aperiam ipsam, magnam unde vero libero, at, quasi blanditiis tempore consequatur!</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsam delectus voluptas rem nulla optio enim alias, mollitia nam fugit debitis asperiores officiis ratione fuga, eveniet non eligendi. Assumenda nesciunt autem aliquam earum. Ducimus earum explicabo distinctio enim amet praesentium, beatae sit tempore necessitatibus illo corporis quisquam voluptate, repellendus nisi iusto, corrupti cum quibusdam excepturi deleniti fugiat. Deleniti, placeat inventore ipsa!</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Obcaecati possimus tempore, cumque, asperiores delectus eveniet ipsam ipsum magni distinctio. Quaerat rem quam esse animi accusantium beatae mollitia nihil quis, tempore omnis iure, a similique. Eveniet, minus sapiente rerum explicabo odit similique facilis incidunt, harum laborum tempora totam ex odio debitis ducimus distinctio reprehenderit accusamus repudiandae doloremque minima illum, id! Ad.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Perspiciatis temporibus, nemo tempora quam commodi expedita ipsum quis asperiores numquam aperiam debitis suscipit beatae voluptate nisi repellendus eveniet ad doloribus nihil voluptatibus tenetur! Assumenda deleniti praesentium, esse, animi ipsam consequatur iusto. Laudantium sit unde eos, quod ab nostrum illum soluta distinctio culpa recusandae. Odio est laboriosam quae minus fuga, error facilis.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vero possimus, sunt assumenda necessitatibus eos qui perspiciatis aliquam modi, mollitia, iure odit? Repellendus obcaecati atque nihil perspiciatis, suscipit reprehenderit magni minus sint debitis illo nisi molestias rem impedit dolores unde et saepe. Doloribus veniam quidem rem libero laborum aut excepturi eaque minus labore consequatur debitis nam sequi, ab nulla incidunt minima.</p>
            
          
!
            
              * {
  margin: 0;
}

p {
  font-family: sans-serif;
  font-size: 18px;
  line-height: 1.6rem;
  max-width: 600px;
  margin: auto;
  padding: 1.6rem;
  transform: scale(.75) translateY(3.2rem);
  opacity: .3;
}

@keyframes boom {
  0% {
    transform: scale(.75) translateY(3.2rem);
    opacity: .3;
  }

  100% {
    transform: none;
    opacity: 1;
  }
}

.visible {
  animation-name: boom;
  animation-duration: 300ms;
  animation-fill-mode: both;
}
            
          
!
            
              // the callback function that will be fired
// when the element apears in the viewport
// because it fires on initialization
// we have to check for change.isIntersecting parameter
function onEntry(entry) {
  entry.forEach((change) => {
    if(change.isIntersecting) {
      change.target.classList.add('visible');
    }
  });
}

// list of options
let options = {
  threshold: [0.5]
};

// instantiate a new Intersection Observer
let observer = new IntersectionObserver(onEntry, options);

// list of paragraphs
let elements = document.querySelectorAll('p');

// loop through all elements
// pass each element to observe method
// ES2015 for-of loop can traverse through DOM Elements
for (let elm of elements) {
  observer.observe(elm);
}
            
          
!
999px
🕑 One or more of the npm packages you are using needs to be built. You're the first person to ever need it! We're building it right now and your preview will start updating again when it's ready.

Console