For many seasoned web designers and developers, saying goodbye to Adobe Flash has not been easy. We know that Flash is a security nightmare, but we can't deny its legacy as a coding platform that really brought life to the internet component we used to call the World Wide Web. Even though Adobe had previously explained that the final updates to Flash would be released in 2020, no one has touched it since about 2017, which is when the Google Chrome web browser started its initial phase of deprecation.
Developers who have been looking for the perfect Flash replacement know that it will not be monolithic. The good practices that have emerged with regard to web animation are all based on HTML5, CSS, and countless frameworks that are essentially massive JavaScript libraries. The problem with relying on JS frameworks for web animations is that the endless server calls tend to bring pages to a halt. Purists will tell you that CSS is the only future of web animation, and this is clearly the feeling you get when you see the CodePen portfolio of Jackie Zen, a product designer at media giant ViacomCBS.
Jackie Zen is all about coding smooth CSS animations that require user input. One of Jackie's most recent showcase animations is "Good Morning, Good Night," which directs page visitors to click on a graphic representation of the Sun or the Moon. The background is a serene lake scene that features a sailing vessel. Clicking on the Sun will move the sailboat to the left while the color scheme cycles from daylight to moonlight. Clicking on the Moon will reverse the cycle, which looks strange because we know that backwards sailing is impossible because of the hydrodynamics of hulls, but we get the CSS animation idea nonetheless.
This particular CSS project runs just as smooth, if not smoother, than Adobe Flash, and it does not put a strain on the browser or on the computing device. Granted, not all developers are skilled at making CSS works of art, but we are gradually getting there. Flash will be missed, but we have a strong replacement in CSS. For more information click here https://codepen.io/jackiezen/pen/WMavEV.