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

JavaScript

Babel is required to process package imports. If you need a different preprocessor remove all packages first.

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

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

              
                h1 No delay
h1 Delay
h1 Negative Delay
h1 Staggered
h1 Staggered w/ Negative Delay
h1 Reverse Stagger
h1 Reverse Stagger w/ Negative Delay
p Animate simulataneously with no delay
p Animate simulataneously with a delay
p Animate simulataneously with a negative delay
p Use a variable to create a stagger
p Use an offset to make the delays negative so that the elements retain stagger but don't stagger in
p Use the total amount of blocks to reverse the stagger
p Use a negative coefficient to create a stagger in the opposite direction
pre
  code .block {
  code   animation-delay: 0s;
  code }
pre
  code .block {
  code   animation-delay: 2s;
  code }
pre
  code .block {
  code   animation-delay: -0.5s;
  code }
pre
  code .block {
  code   animation-delay: calc(var(--index) * 0.25s);
  code }
pre
  code .block {
  code   animation-delay: calc((var(--index) - 5) * 0.25s);
  code }
pre
  code .block {
  code   animation-delay: calc((5 - var(--index)) * 0.25s);
  code }
pre
  code .block {
  code   animation-delay: calc(var(--index) * -0.25s);
  code }
.container
  - let b = 0
  while (b < 5)
    .block(style=`--index: ${b};`)
    - b++

input(type='range', min="0", max="6", value="0")
              
            
!

CSS

              
                *
  box-sizing border-box

:root
  --delay 0
  --duration 2
  --stagger-step 0
  --coefficient 1
  --offset 0

body
  background linear-gradient(-45deg, #111, #444)
  min-height 100vh
  display flex
  color hsl(0, 0%, 100%)
  align-items center
  font-family sans-serif
  justify-content center
  flex-direction column
  text-align center

pre
  background hsl(0, 0%, 0%)
  font-weight bold
  padding 1rem
  border-radius 6px

.block
  animation party calc(var(--duration, 1) * 1s) linear infinite
  animation-delay calc((((var(--delay, 0) + (var(--index) * var(--stagger-step))) + var(--offset)) * var(--coefficient)) * 1s)
  background hsl(0, 0%, 0%)
  padding-top 100%

.reversed .block
  animation-delay calc((((var(--delay, 0) + ((5 - var(--index)) * var(--stagger-step))) + var(--offset)) * var(--coefficient)) * 1s)

.container
  display grid
  grid-template-columns repeat(5, 1fr)
  grid-gap 1vmin
  width 25vmin
  margin 4rem 0

h1
p
pre
  display none
  text-align left
  max-width 550px

code
  line-height 1.75
  display block

@keyframes party
  for $frame in (0..100)
    {$frame * 1%}
      background 'hsl(%s, 65%, 40%)' % ($frame * 3.6)


[hidden] *
  animation none

              
            
!

JS

              
                // Get started!
const RANGE = document.querySelector('input')
const CONTAINER = document.querySelector('.container')
const TITLES = [...document.querySelectorAll('h1')]
const BLURBS = [...document.querySelectorAll('p')]
const CODES = [...document.querySelectorAll('pre')]

// Each config reps delay, duration, stagger, coefficient, offset
const STEP_CONFIGS = [
  [0, 2, 0, 1, 0],
  [2, 2, 0, 1, 0],
  [-0.5, 2, 0, 1, 0],
  [0, 2, 0.25, 1, 0],
  [0, 2, 0.25, 1, -5],
  [0, 2, 0.25, 1, 0],
  [0, 2, 0.25, -1, 0],
]

const update = () => {
  // Show/Hide elements
  for (let e = 0; e < TITLES.length; e++) {
    TITLES[e].style.display = BLURBS[e].style.display = CODES[e].style.display =
      e === parseInt(RANGE.value, 10) ? 'block' : 'none'
  }
  // Running the step function
  const CONFIG = STEP_CONFIGS[parseInt(RANGE.value, 10)]
  document.documentElement.style.setProperty('--delay', CONFIG[0])
  document.documentElement.style.setProperty('--duration', CONFIG[1])
  document.documentElement.style.setProperty('--stagger-step', CONFIG[2])
  document.documentElement.style.setProperty('--coefficient', CONFIG[3])
  document.documentElement.style.setProperty('--offset', CONFIG[4])
  if (parseInt(RANGE.value, 10) === 5) {
    CONTAINER.classList.add('reversed')
  } else {
    CONTAINER.classList.remove('reversed')
  }
  // Retrigger the animation
  CONTAINER.hidden = true
  requestAnimationFrame(() => (CONTAINER.hidden = false))
}

RANGE.addEventListener('change', update)
// Run the first time to show step 0 👍
update()

              
            
!
999px

Console