We’ve recently been introducing more and more animations to the websites we’ve been developing. This has come in the form of basic features on sites to give them a more interactive feel to more advanced options. Read on below for an overview of what we’ve been up to and using…
CSS animations are one of the recent(ish) developments in web. They offer a highly effiecient way for your animation to run and it’s not limited to simple effects (though those little effects do add a lot to sites too).
We’re pretty much using CSS animations and effects on every site that we’re involved in now and they really give a finishing touch. Here’s a few:
Our use of SASS to help with writing these is not an essential aspect but we’ve shifted entirely to writing our CSS using it as it improves efficiency and it’s fast becoming a new web standard.
So what is it?
We’ll we gusss they’re best placed to answer that one themselves:
GreenSock Animation Platform (GSAP) is a suite of tools for scripted, high-performance HTML5 animations in all major browsers. Popular, reliable, and fast.
To this, we couldn’t agree more having recenlty used this on something for an international brand (sorry we can’t divulge more over who they are – it’s white label!).
Why use it?
Greensock is exceptionally adaptable so there’s loads that can be achieved using it. It’s basically replaced the need for Flash (something previously used for this in web but it wasn’t friendly in mobile devices, not to mention SEO limitations).
We’ve used Greensock on a few projects now which we have involved some great animations including, as we say, work for an international brand (sorry we just can’t show it on our site though we’d be happy to run through it in a face to face meeting). We’ve also used it on our recent VForm project.
To see everything we could do for you with Greensock we’d suggest a quick look at their site.
Trigger points is a technique we use to ensure any animations (or other events) are fire at a desired point, ensuring the vistior to your site, see’s things as expected. This can be achieved directly through Greensock or using an alternative tool – we could write it ourselves but we think it’s better to use the right thing for our clients.
We’ve used this in a number of ways, such as:
- Playing a video
- Triggering image or text animations
- Animated graphs
- Triggering animated GIFs
All in, it’s an extremely useful tool to have at your disposal, not to mention, improving your visitors experience and is fully cross browser / device compatible.
SVGs are vector based graphics for web meaning, like one’s in print, they’re basically good for use at any scale. Use within your animations means that things remain crystal clear as they’re scaled but they’re also layered allowing us to identify objects or groups to spin, slide, recolour, morph… lot’s of things really.