Warning: Trying to access array offset on value of type null in /home/l7yod4xq2ufo/public_html/wp-content/plugins/codepen-embedded-pen-shortcode/codepen.php on line 16
Warning: Trying to access array offset on value of type null in /home/l7yod4xq2ufo/public_html/wp-content/plugins/codepen-embedded-pen-shortcode/codepen.php on line 17
Last Updated on December 29, 2021
Recently I needed to make an animated header that slides up when you scroll down the page, and slides down when you scroll up- the idea is to give the user the navigation when you ‘assume’ they are reaching back up the page with that intention. With this opportunity, my intention was to use best practice and dynamically add and remove the will-change property when transition starts and ends. I was confused that will-change was not being added on transitionstart until I realized there was none – only transitionend. A quick search for a solution gave me this pen that uses CustomEvent. Read about CustomEvent on MDN.
Furthermore, I was unsure if dynamic will-change was even necessary, because when we use tranistion: translate() the element is already being moved onto the GPU so is there a need for this?
Anyway, here is a simple but useful version of dynamic will-change for both animation and transition. For will-change on transition I added with the onClick event and let transitionend trigger the removal.
See the Pen Add-Remove will-change on Animation and Transition: Plain JavaScript by Peter (@peterdillon) on CodePen.0
And the finished dynamic scroll-detected header transition:
See the Pen Sliding Header with Transform and jQuery with IE9 Support by Peter (@peterdillon) on CodePen.