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 🤗

Tagged with:

Manoela Ilic

Manoela is the main tinkerer at Codrops. With a background in coding and passion for all things design, she creates web experiments and keeps frontend professionals informed about the latest trends.

Stay in the loop: Get your dose of frontend twice a week

👾 Hey! Looking for the latest in frontend? Twice a week, we'll deliver the freshest frontend news, website inspo, cool code demos, videos and UI animations right to your inbox.

Zero fluff, all quality, to make your Mondays and Thursdays more creative!