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="demo">
    <div class="demo__inner">
        <div class="demo__spacer">
            <h1><strong>About This Demo</strong></h1>
            <p><strong>Welcome! Scroll down to see the animation below, and use the Toggle controler compose various animation combtinations.</strong></p>
            <p><strong>The main idea: add a class of <code>.ani</code> to any elements you want, and use JavaScript to add <code>.is-shown</code> whenever it’s within the viewport. Then, combine your choice of animations like opacity, movement, and filters via classes like <code>.ani--opacity</code>, <code>.ani--up</code>, and <code>.ani--blur</code>.</strong></p>
            <p>Magna quis nisi occaecat ipsum labore sunt elit magna exercitation ullamco cillum eiusmod reprehenderit. Occaecat sit voluptate esse pariatur ad excepteur est exercitation commodo reprehenderit non. Consequat sit quis nostrud dolor quis non eu cillum exercitation qui sint ut eiusmod ad. Adipisicing ipsum pariatur adipisicing aute laborum id dolor elit id aliqua qui cupidatat.</p>
            <p>Velit enim ea officia. Veniam incididunt cupidatat nulla et tempor ea adipisicing officia. Labore officia commodo pariatur reprehenderit ullamco aute et sunt veniam tempor eu. Non incididunt ea est quis est. Eu dolor sit labore ut consequat adipisicing irure reprehenderit elit officia id sunt est commodo sint. Occaecat duis fugiat anim veniam ipsum commodo. Aute duis dolor dolore pariatur et aliqua aliquip anim sint aute fugiat officia mollit sint.</p>
            <h2>Lorem ipsum dolar sit</h2>
            <p>Magna quis nisi occaecat ipsum labore sunt elit magna exercitation ullamco cillum eiusmod reprehenderit. Occaecat sit voluptate esse pariatur ad excepteur est exercitation commodo reprehenderit non. Consequat sit quis nostrud dolor quis non eu cillum exercitation qui sint ut eiusmod ad. Adipisicing ipsum pariatur adipisicing aute laborum id dolor elit id aliqua qui cupidatat.</p>
            <p>Aute quis officia deserunt proident incididunt voluptate et fugiat deserunt occaecat consequat. Ad veniam fugiat consectetur ut sint cupidatat fugiat sunt duis velit amet aute est eiusmod do. Labore proident tempor sunt dolor nostrud. Sit est commodo adipisicing in adipisicing consectetur adipisicing dolore aliquip commodo voluptate cupidatat labore.</p>
            <p>Fugiat dolore fugiat nostrud aliqua esse consectetur magna. Tempor aliqua ex laborum irure esse in laborum ullamco laboris magna nisi eu eu consequat. Fugiat sunt fugiat adipisicing sint qui consequat incididunt sint elit mollit. Consequat sint exercitation minim pariatur elit consectetur amet aliquip nisi ullamco minim fugiat mollit exercitation. Anim laborum elit anim.</p>
            <p>Velit enim ea officia. Veniam incididunt cupidatat nulla et tempor ea adipisicing officia. Labore officia commodo pariatur reprehenderit ullamco aute et sunt veniam tempor eu. Non incididunt ea est quis est. Eu dolor sit labore ut consequat adipisicing irure reprehenderit elit officia id sunt est commodo sint. Occaecat duis fugiat anim veniam ipsum commodo. Aute duis dolor dolore pariatur et aliqua aliquip anim sint aute fugiat officia mollit sint.</p>
            <p>Magna quis nisi occaecat ipsum labore sunt elit magna exercitation ullamco cillum eiusmod reprehenderit. Occaecat sit voluptate esse pariatur ad excepteur est exercitation commodo reprehenderit non. Consequat sit quis nostrud dolor quis non eu cillum exercitation qui sint ut eiusmod ad. Adipisicing ipsum pariatur adipisicing aute laborum id dolor elit id aliqua qui cupidatat.</p>
            <p>Aute quis officia deserunt proident incididunt voluptate et fugiat deserunt occaecat consequat. Ad veniam fugiat consectetur ut sint cupidatat fugiat sunt duis velit amet aute est eiusmod do. Labore proident tempor sunt dolor nostrud. Sit est commodo adipisicing in adipisicing consectetur adipisicing dolore aliquip commodo voluptate cupidatat labore.</p>
            <h2>Lorem ipsum dolar sit</h2>
            <p>Fugiat dolore fugiat nostrud aliqua esse consectetur magna. Tempor aliqua ex laborum irure esse in laborum ullamco laboris magna nisi eu eu consequat. Fugiat sunt fugiat adipisicing sint qui consequat incididunt sint elit mollit. Consequat sint exercitation minim pariatur elit consectetur amet aliquip nisi ullamco minim fugiat mollit exercitation. Anim laborum elit anim.</p>
        </div>

        <div class="demo__section">
            <h1 class="ani ani--opacity">Animated text example</h1>
            <img class="ani ani--opacity" src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1920 1080' preserveAspectRatio='none'%3E%3Cpath fill='%23EEE' d='M0 0h1920v1080H0z'/%3E%3Cpath fill='%23DDD' fill-rule='evenodd' d='M1073 392a359 359 0 0 0-697 172c-73 24-126 93-126 174 0 101 9 290 633 183 190-33 278-22 372-11 65 8 133 17 240 11a183 183 0 0 0 0-366h-47a246 246 0 0 0-375-163Z' clip-rule='evenodd'/%3E%3C/svg%3E" style="object-fit:cover;" alt="Teal image" width="200" height="250">
            <p class="ani ani--opacity">This text has animation applied to it by adding the global <code>.ani</code> class.</p>
            <ul>
                <li class="ani ani--opacity">Plus, it has multiple animation styles applied.</li>
                <li class="ani ani--opacity">For example, <code>.ani--opacity</code> or <code>.ani--up</code>; use the Toggle toolbar to apply these different animations.</li>
                <li class="ani ani--opacity">Then, scroll this text out of view and then back into view to trigger the animation!</li>
            </ul>
        </div>

        <div class="demo__spacer">
            <p>Velit enim ea officia. Veniam incididunt cupidatat nulla et tempor ea adipisicing officia. Labore officia commodo pariatur reprehenderit ullamco aute et sunt veniam tempor eu. Non incididunt ea est quis est.</p>
            <h2><strong>But why is that useful?</strong></h2>
            <p><strong>I use this for WordPress Gutenberg blocks, since it allows my clients to choose a handful of animations themselves rather than hard-coding something that may not work in all circumstances.</strong></p>
            <p><strong>In fact, it's become so useful, I also typically have my tabs, sliders, accordions, etc. start with <code>visibility:hidden;</code> or <code>left:-99rem;</code> so elements are off screen, which allows me to apply animations on activation of those features: you can switch a tab and have the text fade in and up, then click the next tab and have an image blur and scale into view, keeping things much more interesting than simply having every slide or tab use exactly the same animation; and, you can do all this just by adding a few class names!</strong></p>
            <h2>Lorem ipsum dolar sit</h2>
            <p>Magna quis nisi occaecat ipsum labore sunt elit magna exercitation ullamco cillum eiusmod reprehenderit. Occaecat sit voluptate esse pariatur ad excepteur est exercitation commodo reprehenderit non. Consequat sit quis nostrud dolor quis non eu cillum exercitation qui sint ut eiusmod ad. Adipisicing ipsum pariatur adipisicing aute laborum id dolor elit id aliqua qui cupidatat.</p>
            <p>Aute quis officia deserunt proident incididunt voluptate et fugiat deserunt occaecat consequat. Ad veniam fugiat consectetur ut sint cupidatat fugiat sunt duis velit amet aute est eiusmod do. Labore proident tempor sunt dolor nostrud. Sit est commodo adipisicing in adipisicing consectetur adipisicing dolore aliquip commodo voluptate cupidatat labore.</p>
            <p>Fugiat dolore fugiat nostrud aliqua esse consectetur magna. Tempor aliqua ex laborum irure esse in laborum ullamco laboris magna nisi eu eu consequat. Fugiat sunt fugiat adipisicing sint qui consequat incididunt sint elit mollit. Consequat sint exercitation minim pariatur elit consectetur amet aliquip nisi ullamco minim fugiat mollit exercitation. Anim laborum elit anim.</p>
            <p>Velit enim ea officia. Veniam incididunt cupidatat nulla et tempor ea adipisicing officia. Labore officia commodo pariatur reprehenderit ullamco aute et sunt veniam tempor eu. Non incididunt ea est quis est. Eu dolor sit labore ut consequat adipisicing irure reprehenderit elit officia id sunt est commodo sint. Occaecat duis fugiat anim veniam ipsum commodo. Aute duis dolor dolore pariatur et aliqua aliquip anim sint aute fugiat officia mollit sint.</p>
            <p>Magna quis nisi occaecat ipsum labore sunt elit magna exercitation ullamco cillum eiusmod reprehenderit. Occaecat sit voluptate esse pariatur ad excepteur est exercitation commodo reprehenderit non. Consequat sit quis nostrud dolor quis non eu cillum exercitation qui sint ut eiusmod ad. Adipisicing ipsum pariatur adipisicing aute laborum id dolor elit id aliqua qui cupidatat.</p>
            <p>Aute quis officia deserunt proident incididunt voluptate et fugiat deserunt occaecat consequat. Ad veniam fugiat consectetur ut sint cupidatat fugiat sunt duis velit amet aute est eiusmod do. Labore proident tempor sunt dolor nostrud. Sit est commodo adipisicing in adipisicing consectetur adipisicing dolore aliquip commodo voluptate cupidatat labore.</p>
            <h2>Lorem ipsum dolar sit</h2>
            <p>Fugiat dolore fugiat nostrud aliqua esse consectetur magna. Tempor aliqua ex laborum irure esse in laborum ullamco laboris magna nisi eu eu consequat. Fugiat sunt fugiat adipisicing sint qui consequat incididunt sint elit mollit. Consequat sint exercitation minim pariatur elit consectetur amet aliquip nisi ullamco minim fugiat mollit exercitation. Anim laborum elit anim.</p>
        </div>
    </div>

    <form class="demo__controls" action="">
        <h3>Toggle:</h3>
        <label>
            <input type="checkbox" value="ani--opacity" checked />
            <span>ani--opacity</span>
        </label>
        <label>
            <input type="checkbox" value="ani--scale" />
            <span>ani--scale</span>
        </label>
        <label>
            <input type="checkbox" value="ani--scale-x" />
            <span>ani--scale-x</span>
        </label>
        <label>
            <input type="checkbox" value="ani--blur" />
            <span>ani--blur</span>
        </label>
        <label>
            <input type="checkbox" value="ani--up" />
            <span>ani--up</span>
        </label>
        <label>
            <input type="checkbox" value="ani--down" />
            <span>ani--down</span>
        </label>
        <label>
            <input type="checkbox" value="ani--left" />
            <span>ani--left</span>
        </label>
        <label>
            <input type="checkbox" value="ani--right" />
            <span>ani--right</span>
        </label>
        <label>
            <input type="checkbox" value="ani--3d" />
            <span>ani--3d</span>
        </label>
        <label>
            <input type="checkbox" value="ani--custom-1" />
            <span>ani--custom-1</span>
        </label>
        <label>
            <input type="checkbox" value="ani--custom-2" />
            <span>ani--custom-2</span>
        </label>
    </form>
</div>
!

CSS 

              
                @use postcss-nested;
/**
 * Global animation configuration.
 *
 */
:root {
	--ani-duration: calc(var(--ani-speed, 0.375s) * 2); /* speed of transition effects */
	--ani-timing-function: var(--ani-ease, ease);
	--ani-delay-increment: 0; /* integer for stepped animations */
	--ani-delay-factor: 0.05s; /* duration of each increment step */
	--ani-delay-offset: 0.15s; /* start delay (so ani don't start at very bottom of screen) */
	--ani-property: filter, transform; /* properties to animate */
}

/**
 * Viewport-based animations.
 *
 * .ani animations occur once an element enters the
 * viewport, then reset immediately after that element
 * has left the viewport so it's ready to reanimate.
 *
 * In addition to the built-in animations, you can add
 * your own. Example:
 *
.ani:not(.is-shown) {
	--ani-custom-transform: skewX(10deg);
	--ani-custom-filter:
		drop-shadow(5px 5px 0 red)
		hue-rotate(220deg)
		drop-shadow(-5px -5px 0 red);
}
 */
.ani {
	transition-delay: calc(
		var(--ani-delay-increment)
		* var(--ani-delay-factor)
		+ var(--ani-delay-offset)
	);
	transition-duration: var(--ani-duration);
	transition-timing-function: var(--ani-timing-function);
	transition-property: var(--ani-property);
	will-change: transform;
	&:not(.is-shown) {
		transition: 0s 0s;
		/* prettier-ignore */
		filter:
			blur(var(--ani-blur, 0))
			opacity(var(--ani-opacity, 100%))
			var(--ani-custom-filter, );
		/* prettier-ignore */
		transform:
			 translateX(var(--ani-x, 0))
			 translateY(var(--ani-y, 0))
			 perspective(var(--ani-perspective, 0px))
			 scale(var(--ani-scale-x, 1), var(--ani-scale-y, 1))
			 rotateX(var(--ani-rotate-x, 0deg))
			 rotate(var(--ani-rotate, 0deg))
			 translateZ(var(--ani-z, 0))
			 var(--ani-custom-transform, );
	}
	&.ani--opacity {
		--ani-opacity: 0%;
	}
	&.ani--scale {
		--ani-scale-x: 0.8;
		--ani-scale-y: var(--ani-scale-x);
	}
	&.ani--scale-x {
		--ani-scale-x: 0;
	}
	&.ani--blur {
		--ani-blur: 0.25rem;
	}
	&.ani--up {
		--ani-y: 1.25rem;
	}
	&.ani--down {
		--ani-y: -1.25rem;
	}
	&.ani--left {
		--ani-x: 1.5rem;
	}
	&.ani--right {
		--ani-x: -1.5rem;
	}
	&.ani--3d {
		--ani-perspective: 8em;
		--ani-rotate-x: 12deg;
		--ani-rotate: -2deg;
		--ani-z: 1.5em;
	}
}

/* custom examples */
.ani {
    &.ani--custom-1 {
        &:not(.is-shown) {
            --ani-custom-transform: skewX(10deg);
            --ani-custom-filter:
                drop-shadow(5px 5px 0 red)
                hue-rotate(220deg)
                drop-shadow(-5px -5px 0 red);
        }
    }
    &.ani--custom-2 {
        --ani-property: letter-spacing, filter, transform;
        &:not(.is-shown) {
            letter-spacing: 0.1em;
        }
    }
}
!

JS 

              
                /**
 * Viewport-Based Animations
 *
 * Run animations on elements once they enter the viewport.
 *
 * @param {nodelist} els Elements to which we'll attach animations
 */
const ani = (els) => {
	// bail if we have no elements
	if (!els.length) return;
	// create an observer
	const observer = new IntersectionObserver((entries) => {
        entries.forEach((entry) => {
            // toggle .is-shown based on visibility in viewport
            entry.target.classList.toggle(
                'is-shown',
                entry.isIntersecting
            );
        });
    }, { rootMargin: '10px 0px 0px' });
	// add all animatable elements to the observer
	els.forEach((el) => observer.observe(el));
};

// call it!
ani(document.querySelectorAll('.ani'));
!
999px

Console