Pen Settings

HTML

About HTML Preprocessors

HTML preprocessors can make writing HTML more powerful or convenient. For instance, Markdown is designed to be easier to write and read for text documents and you could write a loop in Pug.

Learn more · Versions

Adding Classes

In CodePen, whatever you write in the HTML editor is what goes within the <body> tags in a basic HTML5 template. So you don't have access to higher-up elements like the <html> tag. If you want to add classes there that can affect the whole document, this is the place to do it.

About the <head>

In CodePen, whatever you write in the HTML editor is what goes within the <body> tags in a basic HTML5 template. If you need things in the <head> of the document, put that code here.

!
Insecure Resource

The resource you are linking to is using the 'http' protocol, which may not work when the browser is using https.

CSS

About CSS Preprocessors

CSS preprocessors help make authoring CSS easier. All of them offer things like variables and mixins to provide convenient abstractions.

Learn more · Versions

CSS Base

About CSS Base

It's a common practice to apply CSS to a page that styles elements such that they are consistent across all browsers. We offer two of the most popular choices: normalize.css and a reset. Or, choose Neither and nothing will be applied.

Vendor Prefixing

About Vendor Prefixing

To get the best cross-browser support, it is a common practice to apply vendor prefixes to CSS properties and values that require them to work. For instance -webkit- or -moz-.

We offer two popular choices: Autoprefixer (which processes your CSS server-side) and -prefix-free (which applies prefixes via a script, client-side).

Add External Stylesheets/Pens

Any URLs 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 its URL and the proper URL extension.

Powered by Algolia
About External Resources

You can apply CSS to your Pen from any stylesheet on the web. Just put a URL to it here and we'll apply it, in the order you have them, before the CSS in the Pen itself.

You can also link to another Pen here (use the .css URL Extension) and we'll pull the CSS from that Pen and include it. If it's using a matching preprocessor, use the appropriate URL Extension and we'll combine the code before preprocessing, so you can use the linked Pen as a true dependency.

Learn more

+ add another resource

JavaScript

About JavaScript Preprocessors

JavaScript preprocessors can help make authoring JavaScript easier and more convenient.

Learn more · Versions

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.

Powered by Algolia
About External Resources

You can apply a script from anywhere on the web to your Pen. Just put a URL to it here and we'll add it, in the order you have them, before the JavaScript in the Pen itself.

If the script you link to has the file extension of a preprocessor, we'll attempt to process it before applying.

You can also link to another Pen here, and we'll pull the JavaScript from that Pen and include it. If it's using a matching preprocessor, we'll combine the code before preprocessing, so you can use the linked Pen as a true dependency.

Learn more

+ 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.

Powered by Algolia
About Packages

Using packages here is powered by esm.sh, which makes packages from npm not only available on a CDN, but prepares them for native JavaScript ESM usage.

All packages are different, so refer to their docs for how they work.

If you're using React / ReactDOM, make sure to turn on Babel for the JSX processing.

Behavior

Auto Save

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 

              
                <div class="parent">
  <div class="child-container">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse interdum blandit tellus a maximus. Morbi a congue purus. Nullam tortor leo, luctus vitae efficitur quis, ultricies nec dolor. Vivamus ac libero urna. Ut hendrerit porta maximus. Duis pharetra lacinia tincidunt. Aliquam fringilla accumsan nulla, non sollicitudin mauris imperdiet eget. Morbi in nisi at sapien laoreet blandit et rhoncus velit. Nullam placerat facilisis condimentum. Proin viverra, urna ac blandit eleifend, sapien neque vestibulum dolor, sit amet faucibus justo ex eu urna. Sed non enim vitae ante molestie sagittis vitae nec ante. Nam ut leo orci. Vivamus ultrices massa vitae nisl maximus, sed sollicitudin purus mattis. Sed vestibulum neque lectus, at finibus justo iaculis id.</p>
    
    <p>Fusce posuere arcu ut urna tempus, scelerisque pulvinar massa dignissim. Cras viverra facilisis eleifend. Mauris ut porta lacus. Morbi sit amet rutrum turpis. Mauris ac vehicula mauris. Maecenas maximus ac ligula eu ultricies. Sed tincidunt sodales luctus. Vivamus in porttitor lacus. Vivamus vestibulum, velit eget convallis placerat, urna lectus semper tortor, sit amet fermentum enim risus rhoncus nisi. Duis elementum molestie eros, nec convallis ipsum hendrerit et. Cras maximus urna eget felis accumsan rhoncus. Vivamus a commodo elit. Donec egestas viverra augue vitae sagittis. Curabitur lorem orci, vestibulum a tincidunt commodo, hendrerit in diam. Donec eget turpis vestibulum, sollicitudin leo id, viverra massa. Nunc euismod sed diam sed commodo.</p>
    
    <p>Praesent rutrum lorem in magna faucibus interdum. Praesent rhoncus, lacus vulputate sagittis dignissim, tortor leo vestibulum felis, a interdum nulla sapien a justo. Nulla facilisi. Donec a sodales lorem. Nunc non erat placerat, semper diam ac, eleifend nunc. Fusce malesuada volutpat velit quis iaculis. Maecenas sollicitudin pharetra elit at porttitor. Nullam tempor nisi libero, vel aliquam augue vestibulum in. Suspendisse lacinia eros feugiat enim ultricies, at fringilla mauris scelerisque. Maecenas gravida rutrum leo. Cras non dui eu sem convallis semper. Mauris volutpat malesuada arcu, sed vehicula eros mattis ut. Vivamus quis urna nisl.</p>
    
    <p>Integer mollis tellus justo, interdum suscipit purus congue at. Integer lacinia mauris id turpis scelerisque hendrerit. Vestibulum at metus nec ex suscipit consequat. Cras est nisl, auctor sed cursus ut, bibendum in nunc. Aenean quis lorem id libero molestie viverra sit amet id felis. Fusce semper fermentum congue. Suspendisse potenti. Donec ultricies dictum diam, nec luctus tortor laoreet ut. Sed ut imperdiet augue, ac semper sapien. Fusce malesuada pharetra mi nec bibendum. Proin consequat magna leo, vitae aliquet orci tincidunt sed. Mauris fringilla egestas lorem a efficitur. Duis quis ultrices libero. Nulla ac iaculis lorem.</p>
    
    <p>Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Proin at rhoncus nisl. Quisque ac purus at ante ornare sollicitudin. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent facilisis, nunc ut vestibulum eleifend, arcu urna rhoncus lorem, nec iaculis orci odio nec dolor. Fusce ac interdum dui. Quisque ut ipsum id enim maximus egestas vitae vel nisl. Nullam efficitur dui nec tempor pretium. Aenean a urna eu magna tempus pellentesque. Curabitur vel tincidunt velit.</p>
    
    <p>Mauris erat tortor, suscipit sed egestas et, ullamcorper ut orci. Donec semper rhoncus massa a lobortis. Suspendisse eget pretium libero, porta convallis eros. Aenean at neque id dui fringilla tempor. Curabitur luctus magna id metus laoreet tincidunt. Mauris rhoncus porta ultricies. Sed id vestibulum felis. Integer lacinia consectetur tristique. Nullam dignissim congue mollis. Ut justo leo, ultrices quis odio eu, cursus consectetur ipsum.</p>
    
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer leo massa, feugiat sed faucibus quis, tincidunt finibus mauris. Ut eget tempor enim, a pulvinar erat. Nulla dapibus, orci sit amet commodo ornare, lectus diam tempor massa, non laoreet ligula mi et tellus. Proin enim leo, lacinia a pretium id, semper fermentum leo. Praesent molestie suscipit lacus et convallis. Sed sollicitudin tincidunt dapibus. Curabitur a gravida mauris. Quisque faucibus felis id mi venenatis pellentesque. Interdum et malesuada fames ac ante ipsum primis in faucibus. Curabitur iaculis risus velit, a tincidunt est commodo a.</p>
    
    <p>Donec vitae tempus quam. Morbi tortor ligula, commodo sed tortor sed, semper tempus eros. Integer id dui vel est elementum elementum eget a sem. Cras nec purus in est aliquam tincidunt quis ut sapien. Phasellus diam purus, pharetra eu consectetur vitae, aliquam non risus. Praesent auctor iaculis sapien vitae sodales. Vestibulum vitae turpis vestibulum, sagittis diam ut, efficitur ligula. Aenean sagittis justo elit, sit amet egestas ante malesuada ac. In hac habitasse platea dictumst. Curabitur ultrices et purus et fermentum. Aenean posuere sapien eget dolor ultrices, a porta mi consequat. Vestibulum fermentum tellus in ipsum scelerisque, lacinia maximus sapien commodo. Praesent maximus consequat hendrerit. Nam finibus, libero maximus rhoncus vulputate, metus est bibendum augue, nec rutrum urna erat nec diam. Duis a leo accumsan, porta massa convallis, pellentesque nisl. Donec non facilisis lacus, nec iaculis ipsum.</p>
    
    <p>Mauris tincidunt sapien enim, ut feugiat dolor volutpat ac. Pellentesque ut justo pellentesque eros vestibulum vestibulum et quis turpis. Aliquam elementum orci lacus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nulla ullamcorper risus sed erat sagittis, sit amet pretium nunc semper. Donec ut lectus hendrerit tortor aliquet interdum. Phasellus tempor mi diam, a lacinia felis egestas a. In id sem tellus. Nulla blandit elit in dolor cursus, eget rutrum ipsum suscipit.</p>
    
    <p>Fusce non iaculis dolor. Vivamus a nisi enim. Maecenas tristique eleifend dui, ut sagittis ante ultrices sed. Cras non blandit metus. Sed in lorem odio. Sed ullamcorper ligula et urna lobortis, sit amet suscipit eros consectetur. Phasellus laoreet viverra ante ac auctor.</p>
  </div>
</div>
!

CSS 

              
                html,body{
  margin:0;
  padding:0;
}

.parent{
  width:600px;
  border:solid 1px black;
  height:500px;
  overflow:hidden;
}

.child-container{
  background:#333;
  color:white;
  padding:5px;
}
!

JS 

              
                function scroller(){
  TweenLite.to(".parent", 2,{
    scrollTo:{y:"max"},
    onComplete:backToStart
  });
};

function delayedStart(){
  TweenLite.delayedCall(1, scroller);
};

function backToStart(){
  TweenLite.to(".parent", 2, {
    scrollTo:{y:0},
    delay:1,
    onComplete:delayedStart
  });
};

scroller();
!
999px

Console