- const COUNT = 10
- let b = 0
while b < COUNT
  .box= b + 1
  - b++
View Compiled
*
  box-sizing border-box
  
body
  display grid
  place-items center
  min-height 100vh
  background hsl(0, 0%, 10%)
  
.box
  position absolute
  top 50%
  left 50%
  height 25vmin
  width 25vmin
  display grid
  place-items center
  font-size 5vmin
  font-family sans-serif
  transform translate(-50%, -50%)
  
  &:nth-of-type(odd)
    background hsl(90, 80%, 70%)
  
  &:nth-of-type(even)
    background hsl(90, 80%, 40%)
View Compiled
import gsap from 'https://cdn.skypack.dev/gsap'

const SHIFT = gsap.fromTo('.box', {
  xPercent: 100
}, {
  xPercent: -200,
  stagger: 0.5,
  duration: 1,
  paused: true,
  ease: 'none',
  repeat: -1,
})

const DURATION = SHIFT.duration()

gsap.to(SHIFT, {
  totalTime: DURATION,
  repeat: -1,
  duration: DURATION,
  ease: 'power4.in',
})
View Compiled
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.