Some ideas of how sticky sections can be animated while exiting the viewport.
![\"\"](\"https://codrops-1f606.kxcdn.com/codrops/wp-content/uploads/2024/01/stickycardnewfeatured.gif?x36933\")
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 🤗
