- 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
}, {
paused: true,
xPercent: -200,
stagger: 0.5,
duration: 1,
repeat: -1,
ease: 'none',
})
const DURATION = SHIFT.duration()
gsap.to(SHIFT, {
totalTime: DURATION,
repeat: -1,
duration: DURATION,
ease: 'none',
})
View Compiled
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.