Pen Settings

HTML

CSS

CSS Base

Vendor Prefixing

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.

+ 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

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="https://source.unsplash.com/200x250/?teal" 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