<script>
var playing = false;
var initial = {
targets: '.acorn',
translateX: () => {
return anime.random(-450, 450);
},
translateY: () => {
return anime.random(-400, 400);
},
rotate: () => {
return anime.random(-890, 890);
},
scale: () => {
return anime.random(0.31, 0.76);
},
opacity: () => {
return anime.random(0.46, 0.93);
},
duration: () => {
return anime.random(500, 1000)
},
delay: anime.stagger(125, {start: 125, direction: 'reverse'}),
endDelay: () => {
return anime.random(125, 250)
},
autoplay: false,
direction: 'alternate',
easing: 'easeInOutQuad',
update: function(anim) {
document.querySelector('#acornSlider').value = anim.progress;
},
}
var animation = anime(initial);
function chaos() {
var tl = anime.timeline({direction: 'alternate'});
tl.add(initial);
//tl.complete = () => {chaos();};
}
// * Calculate the scroll percentage position
const scrollPercent = () => {
const bodyST = document.body.scrollTop;
const docST = document.documentElement.scrollTop;
const docSH = document.documentElement.scrollHeight;
const docCH = document.documentElement.clientHeight;
return (docST + bodyST) / (docSH - docCH) * 100
}
// Add a scroll listener on the window object to control animations based on scroll percentage.
window.onscroll = () => {
animation.seek(Math.min(scrollPercent(), 100 - scrollPercent()) / 50 * animation.duration);
};
</script>