A creative concept I developed while at Complete Digital. As the page is scrolled conversations are animated within the widget. Scroll up and down the page to see it in action.
The brief: Make the dry subject of SEO more engaging.
The concept: Animated widgets featuring typical daily interactions between client and agency.
Conversations shown within stylised widgets mimicing workspace collaboration tools such as Slack and Microsoft Teams.
Scrolling triggers parts of the widget to animate.
Widgets to show conversations, as well as apps tools and platforms we use.
Tone of conversation allows us a opportunity to get over our culture, personality, skills, and outputs.
Easy to implement no expensive / complex / time-consuming artwork required.
Easy to animate with CSS / JS Scroll Reveal JS plugn, also works on mobile.
Scalable and re-useable. Modular design, panels can be 'remixed' infinately to create lots of micro-interactions.
More complex animations could be built with JS animation libraries such as Vivus. e.g animated graph lines.
Conclusion: Because the container for the animations has to be defined as relative so the animated content can be positioned correctly. This means that the entire animation can't be fluid. This in turn means the width of the elements has to be recalculated for each responsive break point. It can be done ( in this demo I have recalculated for small mobiles and desktops ) but it requires quite a bit of trial and error. This means this technique isn't really feasible.