This would add a neat bit of response to user actions, and feels better than the way it feels right now where it feels random due to it only running on its own timer.
Here's a quick prototype that just completely resets the animation so it replays the whole reveal when Headroom.js shows the header on scrolling up:
This might be overkill and also has some issues, namely that it has a slight delay which is set to delay it on loading so that the site reveal animation has nearly completed and the site is faded in enough to see the logo. Is it possible to animate the animation-name property so that it removes the reveal animation after the element is first revealed? If so, that would be a great CSS-only solution, but if not, we'll have to add a bit of JavaScript to add a class that removes the reveal and only has the shimmer animation.
This would add a neat bit of response to user actions, and feels better than the way it feels right now where it feels random due to it only running on its own timer.
Here's a quick prototype that just completely resets the animation so it replays the whole reveal when Headroom.js shows the header on scrolling up:
omnipedia-site-logo-compact-header-header-show-animate.webm
This might be overkill and also has some issues, namely that it has a slight delay which is set to delay it on loading so that the site reveal animation has nearly completed and the site is faded in enough to see the logo. Is it possible to animate the
animation-nameproperty so that it removes the reveal animation after the element is first revealed? If so, that would be a great CSS-only solution, but if not, we'll have to add a bit of JavaScript to add a class that removes the reveal and only has the shimmer animation.