Did you notice this fade-in??
Many of the UI we see today, whether it’s on TV, slideshow presentations, mobile apps and many other kinds of visuals, all incorporate some form of transition to keep the user engaged. A few days ago I was designing a mock e-commerce website for a local business and spent quite some time stuck on how to implement this fade-in effect. While there are a lot of ways to incorporate fade-in effects and there are many webpages showing you how to do so, I’ve found that there are no articles which matched the exact effect I was looking for, and thus I’m putting it here for the sake of documentation and knowledge sharing.
Read on to learn more about how to incorporate fade-in of elements the moment it is partly visible in the viewport.