Everyone loves the bells and whistles that stand out visually when it comes to a well designed web page, but it can take a lot of time and energy to create these aspects from idea through execution.
On top of that, these fancy bits tend to be the last priority when developing. There is no point in sprucing something up to be beautiful when it isn’t ready or functional. It is important to find ways to be able to add a bit of shimmer and excitement to a page when you are close to wrapping up development, and it is equally important to not blow deadlines and/or budgets by doing this.
Here are a few simple and virtually effortless approaches that we have found can give your projects that last nudge in the right direction.
Keep it Simple with CSS Keyframes…
Using keyframes animations for simple additions and effects can make a page feel much more complete and thoroughly polished without compromising the valuable time that goes into the development phase. Keyframe animations let you change your CSS styling over a set period of time through percentage intervals, and has flexible loop functionality that can create seamlessly ongoing animations. This leaves a developer with a truly vast array of possible tricks and techniques.
When properly utilized, it’s pretty remarkable how a few lines of code can bring life to a page by adding a bit of motion to different elements, whether it be subtle or flashy. Creating a .scss partial to define and organize your own animations can help any developer have an accessible arsenal of different animations to call upon, making this code easy to plug and play in different parts of any page.
Ranging from graphic components that might rotate or bounce, or maybe buttons that float and breath on hover. On the simplest level, these small changes are sure to make a page feel more alive and interesting, and help us add a level of fluidity and unique character to UX that feel more organic to the viewers we bring in.
…Or Try A Lightweight JS Solution
While keyframes are a helpful time saver and a fun approach to adding some movement and energy, they might not be able to create the full effect of the UX you are going for.
Often times, we reach for a library called AOS (Animate On Scroll) developed by Michal Sajnog. AOS is an incredibly powerful and easy-to-use tool capable of pushing the presentation of a page to the next level.
With a few additions to HTML you can create an experience that feels much more interactive and captivating because it responds in time to how the user navigates the page. Instead of scrolling down and simply finding the next section of the page, it can slide into place or fade in, along with many other out of the box options. Elements can even be animated through being triggered by anchoring to the position of another element. Whether that means adding functionality to entering, exiting, or hitting a specific part of the page, the possibilities are incredibly flexible. Utilizing this creates a page that feels much more reactionary to what the user is doing while visiting.
And in the interest of performance, AOS only uses JS to calculate the trigger, while employing CSS to carry out its animations. This means there are no other dependencies required, helping to keep the page lightweight.
Applying these techniques and tools is a relatively easy learning curve to get the basics covered, and once you’ve got a basic understanding of it you can begin to play around and learn a lot of neat tricks through exploration. There are also an abundance of cool keyframes available online, like filling buttons on hover or colorful loading icons, that can provide different solutions to the same problem.
Ultimately, the power that comes from using keyframes is that once you have grown comfortable with that base knowledge, it becomes incredibly effortless and time efficient to give whatever you have been working on a new and visually stimulating face.
AOS, on the surface level, is even more plug and play than keyframes. Between these two additions to your workflow, it will change the way your finished products will look and feel. Better yet, both of these approaches are almost universally supported by modern browsers, ensuring smooth presentation across the board.
At QD, we love being able to throw these tools into our workflow and have a lot of fun doing so. Want to talk about how we can breathe some life into your online presence? Drop us a line and let’s talk!