Animating 4 transforms properties on +200 dom elements with individual timing values.
A Pen by Julian Garnier on CodePen.
Animating 4 transforms properties on +200 dom elements with individual timing values.
A Pen by Julian Garnier on CodePen.
<div class="wrapper"></div> |
const wrapperEl = document.querySelector('.wrapper'); | |
const numberOfEls = 90; | |
const duration = 6000; | |
const delay = duration / numberOfEls; | |
let tl = anime.timeline({ | |
duration: delay, | |
complete: function() { tl.restart(); } | |
}); | |
function createEl(i) { | |
let el = document.createElement('div'); | |
const rotate = (360 / numberOfEls) * i; | |
const translateY = -50; | |
const hue = Math.round(360 / numberOfEls * i); | |
el.classList.add('el'); | |
el.style.backgroundColor = 'hsl(' + hue + ', 40%, 60%)'; | |
el.style.transform = 'rotate(' + rotate + 'deg) translateY(' + translateY + '%)'; | |
tl.add({ | |
begin: function() { | |
anime({ | |
targets: el, | |
backgroundColor: ['hsl(' + hue + ', 40%, 60%)', 'hsl(' + hue + ', 60%, 80%)'], | |
rotate: [rotate + 'deg', rotate + 10 +'deg'], | |
translateY: [translateY + '%', translateY + 10 + '%'], | |
scale: [1, 1.25], | |
easing: 'easeInOutSine', | |
direction: 'alternate', | |
duration: duration * .1 | |
}); | |
} | |
}); | |
wrapperEl.appendChild(el); | |
}; | |
for (let i = 0; i < numberOfEls; i++) createEl(i); |
<script src="https://rawgit.com/juliangarnier/anime/master/anime.min.js"></script> |
body { | |
display: flex; | |
justify-content: center; | |
align-items: center; | |
width: 100%; | |
height: 100vh; | |
background-color: #24209e; | |
} | |
.wrapper { | |
position: relative; | |
display: flex; | |
align-items: center; | |
flex-wrap: wrap; | |
width: 1px; | |
height: 100vh; | |
mix-blend-mode: color-dodge; | |
} | |
.el { | |
position: absolute; | |
opacity: 1; | |
width: 2px; | |
height: 24vh; | |
margin-top: -12vh; | |
transform-origin: 50% 100%; | |
background: white; | |
} |
<link href="https://codepen.io/juliangarnier/pen/EWxgGx" rel="stylesheet" /> |