Some concepts of how sticky sections could be animated whereas exiting the viewport.
Sticky sections have been round for some time and are fairly vital for scrollytelling. Right now, I need to share a few concepts for animations and layouts for sticky sections. We use JavaScript for the animations, however quickly, CSS scroll-driven animations will very probably have the ability to exchange them. We additionally use ‘place: sticky’ in our CSS. By utilizing sticky sections of various sizes or card-like layouts, you’ll be able to create numerous stacking or collapsing results. The main target of those demos is on animations when sections depart the viewport. I hope this conjures up you. Be happy to make use of it, as all the time. It’s very uncooked, however I’m hoping that you would be able to take it to the subsequent stage in your initiatives.
The pictures used within the demos are by Annas Muslimin.
Having barely completely different layouts for the sticky sections (like rounded corners or half width) opens the door to numerous animation potentialities. I’m not exploring a lot right here thought, it’s actually just a few delicate modifications on the best way issues look and animate.
Hope you get pleasure from this and discover it helpful! Thanks for checking by 🤗
