Sticky sections were round for some time and are reasonably necessary for scrollytelling. These days, I wish to proportion a few concepts for animations and layouts for sticky sections. We use JavaScript for the animations, however quickly, CSS scroll-driven animations will very most likely be capable to exchange them. We additionally use ‘place: sticky’ in our CSS. By means of the usage of sticky sections of various sizes or card-like layouts, you’ll be able to create quite a lot of stacking or collapsing results. The point of interest of those demos is on animations when sections depart the viewport. I am hoping this evokes you. Be at liberty to make use of it, as at all times. It’s very uncooked, however I’m hoping that you’ll be able to take it to the following stage for your tasks.

The pictures used within the demos are by means of Annas Muslimin.

Having reasonably other layouts for the sticky sections (like rounded corners or part width) opens the door to quite a lot of animation probabilities. I’m now not exploring a lot right here concept, it’s actually just a few delicate adjustments at the method issues glance and animate.

Hope you revel in this and in finding it helpful! Thank you for checking by means of 🤗