Responsive Webflow Animation Project

For this project, the client wanted a custom-built animation designed in Webflow to give their website that bit of extra flair. After discussing the requirements, we arrived at the concept of using over 100 profiles of people to demonstrate the feeling of community and make it feel like they are interacting and posting their own updates

Webflow development

Website redesign

UI/UX

Animation

To achieve this animation, I implemented GSAP and Javascript to control the motion and most importantly the order of the animation. The requirements for this were to have one bubble displayed for a couple seconds and as it is shrinking, the next be displayed. Given the limitations of Webflow's built in animations, the looping feature would not have been possible. This is where the Javascript came in. The code set the correct order and looping pattern, as well as making it responsive using a custom order for Mobile.