<style>
.photo {
opacity: 0;
transform-origin: 0 0.5;
}
</style>
<script>
var showtime = 600;
var carousel = {
targets: '.photo',
opacity: [0, 0.85, 1],
rotateY: [270, 360],
scaleX: [0, 0.5, 1],
scaleY: [0, 0.35, 1],
translateX: [-200, -400, 0],
delay: anime.stagger(2 * showtime),
easing: 'easeInQuad',
duration: showtime,
loop: false,
}
anime(carousel);
</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/animejs/3.2.1/anime.min.js" integrity="sha512-
z4OUqw38qNLpn1libAN9BsoDx6nbNFio5lA6CuTp9NlK83b89hgyCVq+N5FdBJptINztxn1Z3SaKSKUS5UP60Q=="
crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<!--Page Shadow-->
<style>
.shadow { filter: drop-shadow( 8px 6px 4px #264f9375); }
.inv { filter: invert(1); }
</style>
Centre logo has a standard delayed rotate fade-in - the hexagon a delayed
zoom/fade-in. Logo has a link “javascript:window.location.reload();” to refresh
the animation.