Scroll triggered animation - what is it and why you should be using it?
Scroll triggered animation is a super-effective way to animate website elements such as text, graphics, photos and video, bringing them to life as you scroll down a page. Scroll animations are more likely to grab a user's attention, making websites look and feel more dynamic and interesting.
Xigen look at the benefits of scroll-triggered animation and provide marketers with a guide on how to use them.
Why use scroll triggered animation?
We are naturally visually attracted to movement. Scroll triggered animation draws user attention to specific sections of a web page, highlighting the key areas that you want your audience to view and the order in which you want those areas to be viewed. This is an effective way to: highlight a call to action, a special offer, infographics, the next step in a process, tell a story and more, making it seem natural for the user to gravitate towards these sections of the page, meaning they’re less likely to become lost. Encouraging better engagement, giving the user a more active experience, means the potential for higher conversion rates, but more on that later.
What does scroll triggered animation look like?
Scroll triggered animation has three broad categories:
- Moving foreground and background — this is referred to as ‘parallax’ scroll animation.
- Elements animate when they come into view on the screen.
- Scroll triggered video.
Parallax scroll animation can add a sense of scale to your website. Backgrounds scroll at different rates and/or in different directions. Combining multiple backgrounds can give the illusion of depth.
As page elements come into view they animate: vibrating text, sliding text, self-filling graphs, exploded views, the list goes on.
Scroll controlled video is more visually exciting technique. Editors create a video animation, with the user in control of how the video advances as they scroll.
Seconds to make an impact
A report by the Nielsen Norman Group states visitors decide to stay on or leave a website within 10 to 20 seconds of landing on the page, so you have a small window of opportunity to make a good first impression. Scroll triggered animation is an effective way to engage audiences from the second they land on a page. But for ecommerce there’s a bit more to it than that.
Ecommerce: Faster page-load and increased conversion
Scroll triggered animation enables faster page load time, which is important for SEO optimisation. Google has shown that site speed is an indicator used by its algorithm to rank pages. Increasing page speed will also increase positive user experience—pages with a longer loading time often have lower average time on page and higher bounce rates.
So, page-load time is linked to bounce rate. For example, 47% of consumers expect a web page to load in two seconds or less, with the probability of bounce increasing by 32% as page-load time goes form one second to three seconds. A staggering 79% of shoppers who are dissatisfied with website performance are less likely to buy again from the same site. Page-load time has a significant impact on customer loyalty too. 52% of online shoppers surveyed state that quick page loading is important for their loyalty to a website. Reputation management is a factor too, with 44% of shoppers reporting that they tell friends about bad experiences online.
General design considerations
- Deciding what the animation should actually do: vibrating text, self-filling graphs or charts, process guiding, storytelling etc. You might have scroll animation ideas of your own. Whatever your requirements, our skilled and experience developers will guide you through what will work best for your website so that your business sees results.
- Animation timings need to be considered for maximum impact. Do the animations start at the correct time? Do they move at the right speed? Are they correctly synchronised with the scrolling of the page? Again, our expert team will ensure that your scroll animations work for your website, genuinely enhancing user experience and increasing conversion, not just looking pretty.
- Are the animations working together with the rest of the page? Often there will be a number of animations on a webpage and these should work together for optimum impact. This applies across devices—animations must work well on phone and tablet too.
Examples of websites that use scroll trigger animation:
Scroll triggered animation is soaring in popularity as a way to grow user interest and increase website interaction. In an increasingly competitive online world, businesses and organisations have to evolve to meet their audience’s changing behaviour and expectations. With just a few crucial moments to engage with users, a website must be pitched just right, with an appropriate look, style and level of sophistication.
Scroll animation is a great way to make your website stand out and engage potential customers and new audiences long enough to be able to tell your story and guide them to action.
We can develop the right scroll animation strategy for your website. We’d love to have a conversation with you and share ideas on how together we can give potential customers and new audiences a more active experience and maximise the potential for a higher conversion rate on your website.
If you'd like to find out more about our approaches or have a project in mind, or would just like more information about scroll triggered animation, then please get in touch.
Content by The Drum Network member:
Xigen is the full service digital design agency you can trust to produce straight forward marketing strategy and execution, helping you grow your brand and develop effective marketing solutions in order to acquire, engage and retain new customers.
As solution specialists we love solving problems! Tackling challenges, engaging users and measuring KPI's is all part of our day-to-day functions, helping increase ROI on both B2B and B2C focused activities.
With our in-house team of highly skilled designers, developers, testers, strategists and project delivery experts we're able to deliver on brief, on time and on budget.
Visit our site to find out more: https://xigen.co.uk