We've started the Blue Ocean project. My team's client is building a website called Unlocking Wellness:
Unlocking Wellness is a health-care web and mobile app that allows patients to find and assemble a team of providers who are specially trained to care for marginalized communities and people groups.
My role is to execute the animation of the site's logo, which is composed of three elements:
- The letter 'U', which starts out inverted to represent the loop of the lock.
- A square block that represents the body of the lock.
- The letter 'W' which resides within the body of the block.
The animation consists of flipping the U and moving it into position off to the side of the lock body. And the W will bounce in place.
Research
Animation is new to me. So this a great opportunity to flex my lean-and-apply skills.
The first step is to find some strategies or frameworks for creating animations. A teammate suggested looking at React Spring and another similar tool. I took a look and - cool stuff. I didn't know tools like these existed (although of course they do).
But I felt like the docs there were light on examples -- and I like examples. So I kept looking around for something a little closer to what I'm looking for. I ended up finding these two cool resources:
https://tobiasahlin.com/blog/curved-path-animations-in-css/
https://blog.fullstackdigital.com/how-to-create-an-animated-logo-with-svg-and-css-animations-dbf0802a47a1
These make me feel like my goals are achievable without a framework. These are some of the pertinent terms, which I need to explore: keyframes, transform, translate. SVGs also look like they're in the mix.
Top comments (0)