On-Scroll Animation Ideas for Sticky Sections


Some ideas of how sticky sections can be animated while exiting the viewport.

Sticky sections have been around for a while and are quite important for scrollytelling. Today, I want to share a couple of ideas for animations and layouts for sticky sections. We use JavaScript for the animations, but soon, CSS scroll-driven animations will very likely be able to replace them. We also use ‘position: sticky’ in our CSS. By using sticky sections of different sizes or card-like layouts, you can create various stacking or collapsing effects. The focus of these demos is on animations when sections leave the viewport. I hope this inspires you. Feel free to use it, as always. It’s very raw, but I’m hoping that you can take it to the next level in your projects.

The images used in the demos are by Annas Muslimin.

Having slightly different layouts for the sticky sections (like rounded corners or half width) opens the door to various animation possibilities. I’m not exploring much here thought, it’s really just some subtle changes on the way things look and animate.

Hope you enjoy this and find it useful! Thanks for checking by ????


Source link

Show More


Makes Noise is a blog where you can find all the juicy details on a variety of topics including health and fitness, technology, lifestyle, entertainment, love and relationships, beauty and makeup, sports and so much more. The blog is updated regularly to make sure you have all the latest and greatest information on the topics that matter most to you.

Related Articles

antalya bayan escort
Back to top button